@import url('https://fonts.googleapis.com/css2?family=Gowun+Batang:wght@400;700&display=swap');
@import url('https://cdn.jsdelivr.net/gh/orioncactus/pretendard@v1.3.9/dist/web/static/pretendard.css');
:root{--line:#9fdcf8;--tab:#a8daf7;--deep:#55a9d8;--ink:#55a6cf;--ink-deep:#2f6f91;--soft:#d2ebfb;--paper:#fff}
*{box-sizing:border-box}html{margin:0;min-height:100%;background:#dff2fd}body{margin:0;min-height:100vh;color:var(--ink);font-family:Pretendard,-apple-system,BlinkMacSystemFont,"Segoe UI",sans-serif;background:linear-gradient(180deg,#fff 0%,#fff 8%,#fafdff 22%,#f0f9fe 45%,#e7f6fd 70%,#dff2fd 100%);background-attachment:fixed}.page{width:860px;max-width:100%;margin:0 auto;background:transparent}.section{margin:0;background:transparent}.section-content{width:776px;max-width:calc(100% - 84px);margin:0 auto;padding:20px 0 30px}.label{width:max-content;margin:0 auto 22px;padding:9px 16px 8px;border-radius:11px;background:var(--tab);font:700 20px/1.35 Pretendard,sans-serif;letter-spacing:-.25px;color:#2d6385}.panel{border:4px solid var(--line);border-radius:13px;background:rgba(159,215,245,.20);padding:9px;box-shadow:inset 0 0 0 1px rgba(255,255,255,.88)}.panel-inner{background:#fff}.notice .section-content{padding-top:20px}.notice .panel-inner{min-height:462px;padding:10px 10px 16px;font-family:'Gowun Batang',serif}.notice p{font-size:18px;line-height:1.55;margin:10px 0 19px;letter-spacing:-.28px;color:#55a6cf}.notice strong{font-weight:700;color:#3f8fb8}.notice h3{font-size:24px;line-height:1.4;margin:49px 0 13px;color:#347f9f;font-weight:700}.process .section-content{padding-top:18px}.process .label{margin-bottom:34px}.process .panel-inner{height:410px;padding:10px}.process-canvas{height:390px;position:relative;font-family:Pretendard,sans-serif}.process-lines{position:absolute;inset:0;width:100%;height:100%;z-index:1;overflow:visible}.process-lines path{fill:none;stroke:#87d2fa;stroke-width:4.2;stroke-linecap:round;stroke-dasharray:.1 11}.process-lines .curve-path{stroke-width:3.4;stroke-dasharray:2 7}.step{position:absolute;z-index:2;text-align:center;color:var(--ink-deep);font-family:Pretendard,sans-serif}.step.primary{background:var(--deep);color:#fff;font-weight:700;font-size:18px;border-radius:12px;padding:15px 22px}.step.small{background:var(--tab);font-weight:600;font-size:15px;border-radius:9px;padding:9px 18px}.step.card{background:var(--soft);border-radius:24px;padding:12px 20px 15px}.step.card>b{display:block;font-size:18px;font-weight:700;line-height:1.35}.step.card span{display:block;font:400 15px/1.48 Pretendard,sans-serif;margin-top:4px;color:#4b96c0}.step.card span b{font-size:15px;color:var(--ink-deep);font-weight:600}.p1{left:55px;top:8px;width:168px}.p2{left:65px;top:105px;width:148px}.p3{left:18px;top:184px;width:240px;min-height:109px}.p4{left:65px;top:348px;width:148px}.p5{left:322px;top:8px;width:235px;min-height:126px}.p6{left:365px;top:218px;width:148px}.p7{left:351px;top:327px;width:176px}.extra{position:absolute;z-index:2;left:575px;top:105px;width:125px;text-align:center;color:var(--ink-deep);font:600 15px/1.48 Pretendard,sans-serif}.extra b{display:block;font-size:18px;margin-bottom:2px;font-weight:700}.extra .more{margin-top:30px}.usage .section-content{padding-top:22px;padding-bottom:24px}.usage-label{padding-left:47px;padding-right:47px;margin-bottom:17px;letter-spacing:1.4px}.usage-grid{display:grid;grid-template-columns:1fr 1fr;gap:38px}.usage-card{border:3px solid var(--line);border-radius:7px;padding:7px;background:rgba(159,215,245,.18)}.usage-card .inside{height:218px;background:#fff;text-align:center;padding:0 20px}.usage-title{display:inline-block;margin-top:2px;padding:9px 31px;border-radius:7px;background:var(--tab);font:700 17px/1.35 Pretendard,sans-serif;color:#fff}.usage-card.commercial .usage-title{background:#3f86b0}.usage-main{font:600 14px/1.58 Pretendard,sans-serif;color:#286785;margin:9px 0 17px}.usage-small{font:500 11.5px/1.5 Pretendard,sans-serif;color:#4e809d;margin:0}.usage-strong{font:700 13.5px/1.5 Pretendard,sans-serif;color:#286785;margin-top:13px}.disclaimer{font:400 14.5px/1.48 'Gowun Batang',serif;color:#59a9d1;margin-top:10px;letter-spacing:-.2px}.disclaimer strong{font-weight:700;color:#3f8fb8}.disclaimer strong:first-child{font-size:20px;line-height:1.35;color:#347f9f}.admin-link{position:fixed;right:14px;bottom:14px;font:500 12px Pretendard,sans-serif;color:#5d89a3;text-decoration:none;opacity:.5}.admin{width:900px;max-width:100%;margin:0 auto;padding:32px 24px;font-family:Pretendard,sans-serif}.admin h1{color:#285f82}.admin .box{background:#fff;border:2px solid var(--line);border-radius:12px;padding:18px;margin:14px 0}.admin label{display:block;font-weight:700;color:#2d6d91;margin:10px 0 5px}.admin input,.admin textarea{width:100%;border:1px solid #b8d9ec;border-radius:7px;padding:10px;font:14px/1.5 Pretendard,sans-serif}.admin textarea{min-height:86px;resize:vertical}.admin button{border:0;border-radius:8px;background:var(--deep);color:#fff;padding:11px 18px;font-weight:700;cursor:pointer;margin-right:8px}.admin .muted{font-size:12px;color:#7094aa}.admin-actions{position:sticky;bottom:12px;background:rgba(223,242,253,.92);padding:12px;border-radius:10px;backdrop-filter:blur(8px)}
@media(max-width:700px){.section-content{max-width:calc(100% - 28px)}.notice p{font-size:15px}.notice h3{font-size:21px}.process .panel-inner{height:auto}.process-canvas{height:auto;display:flex;flex-direction:column;align-items:center;gap:12px;padding:8px}.process-lines{display:none}.step,.extra{position:static!important;width:min(100%,280px)!important}.extra{text-align:center}.usage-grid{grid-template-columns:1fr;gap:16px}.usage-card .inside{height:auto;min-height:220px;padding-bottom:20px}}

/* ===== V5 reference-match refinements ===== */
:root{--line:#a7ddf7;--tab:#a7d9f6;--deep:#55a8d5;--ink:#62add2;--ink-deep:#2f708f;--soft:#d7eefc}
.notice p,.notice h3,.notice strong,.disclaimer,.disclaimer strong,.disclaimer strong:first-child{color:var(--ink)}
.notice strong,.disclaimer strong{font-weight:700}
.notice h3,.disclaimer strong:first-child{font-weight:700}
.process .panel-inner{height:450px}.process-canvas{height:430px}
.process-lines{overflow:hidden}
.process-lines path{display:none}.process-lines .curve-path{display:block;fill:none;stroke:#8bd2f7;stroke-width:3;stroke-linecap:round;stroke-dasharray:1 6}
.step.primary{background:#56a8d5}.step.small,.usage-title{background:#a6d8f5}.step.card{background:#d8eefc}
.p1{left:55px;top:8px;width:168px;height:54px;padding:15px 22px}
.p2{left:65px;top:104px;width:148px;height:38px;padding:9px 18px}
.p3{left:18px;top:181px;width:240px;min-height:126px;padding-top:13px}
.p4{left:65px;top:380px;width:148px;height:38px;padding:9px 18px}
.p5{left:322px;top:8px;width:235px;min-height:137px;padding-top:12px}
.p6{left:365px;top:235px;width:148px;height:38px;padding:9px 18px}
.p7{left:351px;top:365px;width:176px;height:55px;padding:15px 22px}
/* exact round-dot runs from the reference */
.p1:after,.p2:after,.p3:after,.p5:after,.p6:after{content:"";position:absolute;left:50%;transform:translateX(-50%);width:6px;height:6px;border-radius:50%;background:#83cef5;box-shadow:none}
.p1:after{top:65px;box-shadow:0 15px 0 #83cef5}
.p2:after{top:49px;box-shadow:0 13px 0 #83cef5,0 26px 0 #83cef5,0 39px 0 #83cef5}
.p3:after{top:136px;box-shadow:0 15px 0 #83cef5,0 30px 0 #83cef5}
.p5:after{top:149px;box-shadow:0 18px 0 #83cef5,0 36px 0 #83cef5,0 54px 0 #83cef5,0 72px 0 #83cef5}
.p6:after{top:48px;box-shadow:0 18px 0 #83cef5,0 36px 0 #83cef5,0 54px 0 #83cef5,0 72px 0 #83cef5}
.extra{left:570px;top:110px;width:135px;font-size:15px;line-height:1.42;color:#34728f}
.extra b{font-size:19px;line-height:1.25;margin-bottom:7px;color:#286986}
.extra .more{margin-top:31px}.extra .more b{font-size:17px;margin-bottom:5px}
/* USAGE: same content width as NOTICE/PROCESS, with more vertical breathing room */
.usage .section-content{width:776px;max-width:calc(100% - 84px);padding-top:22px;padding-bottom:30px}
.usage-grid{width:100%;grid-template-columns:1fr 1fr;gap:38px}
.usage-card{min-height:252px;padding:7px;border:3px solid var(--line);background:rgba(167,221,247,.22)}
.usage-card .inside{height:236px;padding:0 20px 14px}
.usage-title{margin-top:2px;padding:9px 31px;font-size:17px;line-height:1.35}
.usage-main{font-size:14px;line-height:1.55;margin:11px 0 22px;font-weight:600;color:#34728f}
.usage-small{font-size:11.5px;line-height:1.52;font-weight:500;color:#568ba6}
.usage-strong{font-size:13.5px;line-height:1.48;margin-top:18px;font-weight:700;color:#34728f}
.disclaimer{font-size:14.5px;line-height:1.48;margin-top:10px;color:var(--ink)}
.disclaimer strong:first-child{font-size:20px;color:var(--ink)}
@media(max-width:700px){.process .panel-inner{height:auto}.process-canvas{height:auto}.p1:after,.p2:after,.p3:after,.p5:after,.p6:after{display:none}.usage .section-content{max-width:calc(100% - 28px)}}


/* ===== V6 precision pass ===== */
/* NOTICE: bold changes weight only; only the resale heading uses the darker heading tone */
.notice p,.notice p strong{color:#62add2!important}
.notice h3{color:#347f9f!important}
.notice p strong{font-weight:700}

/* PROCESS: reference-sized boxes + connector system kept behind the cards */
.process .panel-inner{height:466px}
.process-canvas{height:446px}
.process-lines{z-index:0;overflow:hidden}
.process-lines .curve-path{display:block;stroke:#83cef5;stroke-width:2.4;stroke-linecap:butt;stroke-dasharray:4 4}
.step,.extra{z-index:2}
.p1{left:55px;top:8px;width:168px;height:58px;padding:16px 22px}
.p2{left:65px;top:106px;width:148px;height:40px;padding:10px 18px}
.p3{left:18px;top:188px;width:240px;min-height:134px;padding-top:14px}
.p4{left:65px;top:395px;width:148px;height:40px;padding:10px 18px}
.p5{left:322px;top:8px;width:235px;min-height:142px;padding-top:13px}
.p6{left:365px;top:244px;width:148px;height:40px;padding:10px 18px}
.p7{left:351px;top:379px;width:176px;height:58px;padding:16px 22px}
/* smaller, tight round dots. They originate from the card edge, so content-height changes do not create stray dots below the next box. */
.p1:after,.p2:after,.p3:after,.p5:after,.p6:after{width:4px;height:4px;background:#83cef5;top:calc(100% + 9px);z-index:-1}
.p1:after{box-shadow:0 13px 0 #83cef5}
.p2:after{box-shadow:0 11px 0 #83cef5,0 22px 0 #83cef5,0 33px 0 #83cef5}
.p3:after{box-shadow:0 13px 0 #83cef5,0 26px 0 #83cef5}
.p5:after{box-shadow:0 15px 0 #83cef5,0 30px 0 #83cef5,0 45px 0 #83cef5,0 60px 0 #83cef5}
.p6:after{box-shadow:0 15px 0 #83cef5,0 30px 0 #83cef5,0 45px 0 #83cef5,0 60px 0 #83cef5}
/* right-side copy: headline + supporting lines; final instruction is one sentence */
.extra{left:570px;top:119px;width:135px;font-size:15px;line-height:1.38;color:#568ba6;font-weight:600}
.extra>b{font-size:20px;line-height:1.2;margin:0 0 7px;color:#286986;font-weight:700}
.extra .more{margin-top:34px;color:#286986;font-size:17px;line-height:1.4;font-weight:700}
.extra .more b,.extra .more div{display:inline;font:inherit;color:inherit;margin:0}
.extra .more b:after{content:' '}

/* USAGE: reference weight and vertical rhythm */
.usage-card .inside{height:246px;padding:0 20px 15px}
.usage-card{min-height:262px}
.usage-main{font-size:14px;line-height:1.58;margin:12px 0 25px;font-weight:700;color:#34728f}
.usage-small{font-size:11.5px;line-height:1.56;font-weight:600;color:#568ba6}
.usage-strong{font-size:13.5px;line-height:1.52;margin-top:18px;font-weight:700;color:#34728f}
.commercial .usage-small{margin-top:2px}
.commercial .usage-strong{margin-top:34px}
/* disclaimer: dark heading, light body; bold body text keeps the same light color */
.disclaimer{color:#62add2!important}
.disclaimer strong{color:#62add2!important}
.disclaimer strong:first-child{color:#347f9f!important;font-size:20px;font-weight:700}

/* ===== V7 final-scale & alignment pass ===== */
/* PROCESS: larger readable type, true vertical centering, and tighter connectors */
.step.primary,.step.small{display:flex;align-items:center;justify-content:center;padding-top:0;padding-bottom:0}
.step.primary{font-size:20px;line-height:1.25}
.step.small{font-size:16.5px;line-height:1.25}
.step.card{display:flex;flex-direction:column;align-items:center;justify-content:center;padding-top:10px;padding-bottom:10px}
.step.card>b{font-size:20px;line-height:1.28}
.step.card span{font-size:16.5px;line-height:1.42;margin-top:4px}
.step.card span b{font-size:16.5px;line-height:1.35}
/* connector dots start closer to each box and end closer to the following box */
.p1:after,.p2:after,.p3:after,.p5:after,.p6:after{top:calc(100% + 6px)}
.p1:after{box-shadow:0 12px 0 #83cef5,0 24px 0 #83cef5}
.p2:after{box-shadow:0 10px 0 #83cef5,0 20px 0 #83cef5,0 30px 0 #83cef5,0 40px 0 #83cef5}
.p3:after{box-shadow:0 12px 0 #83cef5,0 24px 0 #83cef5,0 36px 0 #83cef5}
.p5:after{box-shadow:0 14px 0 #83cef5,0 28px 0 #83cef5,0 42px 0 #83cef5,0 56px 0 #83cef5,0 70px 0 #83cef5}
.p6:after{box-shadow:0 14px 0 #83cef5,0 28px 0 #83cef5,0 42px 0 #83cef5,0 56px 0 #83cef5,0 70px 0 #83cef5}
/* right annotation: same scale family as the 2nd-confirm heading, with intended two-line break */
.extra{left:565px;top:116px;width:145px;font-size:16.5px;line-height:1.38}
.extra>b{font-size:20px;line-height:1.25;margin-bottom:8px}
.extra .more{margin-top:33px;font-size:17px;line-height:1.38}
.extra .more b,.extra .more div{display:block}
.extra .more b:after{content:''}

/* USAGE: enlarge copy and rebalance vertical rhythm to reference */
.usage-card{min-height:272px}
.usage-card .inside{height:256px;padding:0 18px 15px}
.usage-title{font-size:19px;line-height:1.3;padding:10px 31px}
.usage-main{font-size:16px;line-height:1.48;margin:12px 0 23px;font-weight:700}
.usage-small{font-size:13px;line-height:1.48;font-weight:600}
.usage-strong{font-size:15px;line-height:1.48;margin-top:17px;font-weight:700}
.commercial .usage-strong{margin-top:31px}
/* disclaimer: larger body; title dark, body light */
.disclaimer{font-size:16px;line-height:1.5;margin-top:11px}
.disclaimer strong:first-child{font-size:21px;line-height:1.35}
.usage-strong strong{font-weight:800;color:inherit}

/* ===== V8 final micro-alignment pass ===== */
/* PROCESS: close the remaining visual gap between each dotted run and its cards. */
.p1:after,.p2:after,.p3:after,.p5:after,.p6:after{top:calc(100% + 2px)}
.p1:after{box-shadow:0 12px 0 #83cef5,0 24px 0 #83cef5}
.p2:after{box-shadow:0 10px 0 #83cef5,0 20px 0 #83cef5,0 30px 0 #83cef5,0 40px 0 #83cef5}
.p3:after{box-shadow:0 12px 0 #83cef5,0 24px 0 #83cef5,0 36px 0 #83cef5,0 48px 0 #83cef5}
.p5:after{box-shadow:0 14px 0 #83cef5,0 28px 0 #83cef5,0 42px 0 #83cef5,0 56px 0 #83cef5,0 70px 0 #83cef5,0 84px 0 #83cef5}
.p6:after{box-shadow:0 14px 0 #83cef5,0 28px 0 #83cef5,0 42px 0 #83cef5,0 56px 0 #83cef5,0 70px 0 #83cef5,0 84px 0 #83cef5}
/* keep the curved connector tucked under the source/target cards as well */
.process-lines .curve-path{stroke-dashoffset:1}

/* USAGE: the reference centers the small commercial copy lower in the card,
   while keeping the final '작업자 기재 필수' line nearly where it already was. */
.commercial .usage-main{margin-bottom:29px}
.commercial .usage-small{margin-top:0;line-height:1.52}
.commercial .usage-strong{margin-top:27px}

/* V9 final USAGE vertical alignment refinement */
.commercial .usage-main{margin-bottom:23px}
.commercial .usage-strong{margin-top:36px}

/* ===== V10 final USAGE line-centering pass =====
   Commercial card has one-line blocks where the basic card has two/three-line blocks.
   Shift those one-line blocks down by roughly half a line so their baselines sit
   visually between the corresponding basic-card lines, matching the reference. */
.commercial .usage-small{transform:translateY(11px)}
.commercial .usage-strong{transform:translateY(11px)}