@import url('https://fonts.googleapis.com/css2?family=Gothic+A1:wght@400;600;700&family=IBM+Plex+Mono:wght@500&family=Song+Myung&display=swap');
/* WatchCanvas — 은백 시계 조판 견본과 출력 비교. 2차 다듬기 2026-10-26 */
:root{
  /* 색: 역할별 */
  --paper:#eef0f2;--sheet:#e5e9ed;--panel:#f7f8f9;--white:#fff;
  --ink:#18202b;--muted:#4f5d6c;--line:#bfc8d2;--line-soft:#d4dae1;--line-strong:#8795a3;
  --green:#176c59;--green-press:#125444;
  --canvas:#090e17;--canvas-2:#111722;--canvas-line:#3a4655;--light:#f5f7ff;--dim:#aab6c7;
  --mint:#5cf0c4;--gold:#fcc25c;--lavender:#b8a1ff;--coral:#ff6e61;--danger-on-dark:#ff9c91;
  /* 서체 */
  --serif:'Song Myung',Georgia,serif;
  --sans:'Gothic A1',"Apple SD Gothic Neo","Malgun Gothic",sans-serif;
  --mono:'IBM Plex Mono',ui-monospace,monospace;
  /* 크기 6단계 */
  --fs-xs:14px;
  --fs-s:clamp(15px,.15vw + 14px,16px);
  --fs-body:clamp(17px,.1vw + 16.6px,18px);
  --fs-h3:clamp(19px,.3vw + 17px,22px);
  --fs-h2:clamp(32px,1.6vw + 24px,48px);
  --fs-display:clamp(40px,4.6vw + 10px,76px);
  /* 간격·모양 */
  --space-section:clamp(64px,4vw + 48px,112px);
  --gutter:clamp(20px,4vw - 4px,40px);
  --radius-s:4px;--radius-m:12px;--radius-l:20px;
  --shadow-1:0 1px 2px rgba(9,14,23,.06),0 12px 32px -16px rgba(9,14,23,.22);
  --shadow-2:0 1px 2px rgba(9,14,23,.08),0 18px 40px -18px rgba(9,14,23,.32);
  /* 모션: 조판 맞춤 */
  --ease:cubic-bezier(.2,.7,.2,1);
  --t-micro:160ms;--t-enter:560ms;
  --header-h:72px;
}
*{box-sizing:border-box}
html{scroll-behavior:smooth;scroll-padding-top:calc(var(--header-h) + 24px)}
body{margin:0;background:var(--paper);color:var(--ink);font-family:var(--sans);font-size:var(--fs-body);line-height:1.7;word-break:keep-all;overflow-wrap:anywhere;-webkit-font-smoothing:antialiased}
h1,h2,h3,p,figure{margin:0}
h1,h2{font-family:var(--serif);font-weight:400;line-height:1.15;text-wrap:balance}
h1{font-size:var(--fs-display);letter-spacing:-.035em}
h2{font-size:var(--fs-h2);letter-spacing:-.03em}
h3{font-size:var(--fs-h3);line-height:1.45;letter-spacing:-.02em;text-wrap:balance}
p{text-wrap:pretty}
p+p{margin-top:16px}
a{color:inherit;text-underline-offset:5px}
button,input{font:inherit}
button{cursor:pointer}
a:focus-visible,button:focus-visible,summary:focus-visible,input:focus-visible,[tabindex]:focus-visible{outline:2px solid var(--green);outline-offset:2px}
.dark a:focus-visible,.dark button:focus-visible{outline-color:var(--mint)}
main:focus{outline:none}
img{display:block;max-width:100%;height:auto}
svg{display:block}
::selection{background:var(--mint);color:var(--canvas)}
.wrap{width:min(1180px,calc(100% - 2 * var(--gutter)));margin-inline:auto}
.sr-only{position:absolute;width:1px;height:1px;padding:0;margin:-1px;overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap;border:0}
.skip{position:fixed;top:12px;left:12px;z-index:40;background:var(--green);color:#fff;padding:12px 20px;transform:translateY(-180%)}
.skip:focus{transform:none}
.mono{font-family:var(--mono);font-weight:500;font-variant-numeric:tabular-nums}
.muted{color:var(--muted)}

/* 헤더: sticky, 스크롤 뒤에만 1px 선 */
.site-header{position:sticky;top:0;z-index:30;background:var(--paper);border-bottom:1px solid transparent;transition:border-color var(--t-micro) var(--ease)}
.site-header.is-scrolled{border-bottom-color:var(--line)}
.header-inner{display:flex;justify-content:space-between;align-items:center;gap:24px;min-height:var(--header-h)}
.brand{display:inline-flex;align-items:center;gap:12px;text-decoration:none;font-size:22px;letter-spacing:-.05em;font-weight:700;min-height:44px}
.brand-mark{width:32px;height:32px;border:1px solid var(--ink);border-radius:9px;display:grid;place-items:center;font-family:var(--serif);font-size:23px;font-weight:400;letter-spacing:-3px;padding-right:3px}
.site-header nav{display:flex;gap:28px;align-items:center}
.site-header nav a{display:inline-flex;align-items:center;min-height:44px;text-decoration:none;font-size:var(--fs-xs);font-weight:600;background:linear-gradient(currentColor,currentColor) 0 calc(100% - 10px)/0 1px no-repeat;transition:background-size var(--t-micro) var(--ease),color var(--t-micro) var(--ease)}
.site-header nav a:hover{color:var(--green);background-size:100% 1px}
.site-header nav a[aria-current="page"]{color:var(--green);background-size:100% 2px}

/* 공통 라벨·버튼 */
.meta,.eyebrow{font-size:var(--fs-xs);letter-spacing:.08em;font-weight:600;color:var(--muted);line-height:1.5}
.eyebrow{display:flex;align-items:center;gap:14px;margin-bottom:24px}
.eyebrow:before{content:'';width:24px;height:1px;background:currentColor}
.status{display:inline-flex;gap:8px;align-items:center;color:var(--green);font-size:var(--fs-xs);font-weight:700}
.status:before{content:'';width:6px;height:6px;border-radius:50%;background:currentColor}
.btn{display:inline-flex;align-items:center;justify-content:space-between;gap:24px;background:var(--green);color:#fff;border:1px solid var(--green);padding:12px 20px;min-height:48px;text-decoration:none;font-size:var(--fs-s);font-weight:700;border-radius:var(--radius-s);box-shadow:0 1px 2px rgba(9,14,23,.08);transition:background-color var(--t-micro) var(--ease),box-shadow var(--t-micro) var(--ease),transform 120ms var(--ease)}
.btn:hover{background:var(--green-press);box-shadow:var(--shadow-1)}
.btn:active{transform:scale(.98)}
.btn-arrow{font-size:20px;line-height:1;transition:transform var(--t-micro) var(--ease)}
.btn:hover .btn-arrow{transform:translate(2px,-2px)}
.text-link{display:inline-flex;min-height:44px;align-items:center;gap:12px;font-size:var(--fs-s);font-weight:700;color:var(--green)}
.text-link:hover{color:var(--green-press)}
.note{margin-top:16px;font-size:var(--fs-s);color:var(--muted)}

/* 히어로 */
.hero{padding-top:40px;padding-bottom:48px}
.hero-top{display:grid;grid-template-columns:1.75fr 1fr;gap:56px;align-items:end;margin-bottom:32px}
.hero h1{max-width:760px}
.hero-deck>p:not(.hero-note){font-size:var(--fs-body);line-height:1.7;margin-bottom:24px}
.hero-actions{display:flex;align-items:center;gap:20px;flex-wrap:wrap}
.hero-note{margin-top:16px;color:var(--muted);font-size:var(--fs-s);line-height:1.7}
.workbench{display:grid;grid-template-columns:2fr 1fr;border:1px solid var(--line);background:var(--panel);min-height:456px}
.canvas-sheet{position:relative;display:grid;place-items:center;min-height:456px;border-right:1px solid var(--line);padding:56px 40px;background:var(--sheet);align-content:start}
.sheet-index{position:absolute;top:20px;left:24px}
.sheet-axis{position:absolute;top:20px;right:24px}
.sheet-bottom{position:absolute;bottom:16px;left:24px;font-size:var(--fs-xs);color:var(--muted)}
.sheet-tick{position:absolute;width:20px;height:20px;color:#7c8b99}
.sheet-tick:before,.sheet-tick:after{content:'';position:absolute;background:currentColor}
.sheet-tick:before{width:20px;height:1px;top:9px}
.sheet-tick:after{width:1px;height:20px;left:9px}
.sheet-tick.tl{left:64px;top:72px}
.sheet-tick.br{right:64px;bottom:64px}

/* 시계 면(Apple Watch 1:1.22) */
.face{position:relative;width:320px;aspect-ratio:1/1.22;background:var(--canvas);border-radius:24%;color:var(--light);overflow:hidden;container-type:inline-size;box-shadow:0 0 0 1px #273240,var(--shadow-2)}
.face-clock{position:absolute;left:50%;top:39%;transform:translate(-50%,-50%);font-size:23.5cqw;font-family:ui-rounded,'Arial Rounded MT Bold',-apple-system,BlinkMacSystemFont,sans-serif;font-weight:600;letter-spacing:-.07em;line-height:1.1;white-space:nowrap;font-variant-numeric:tabular-nums}
.face-clock.set-type{display:flex}
.face-clock.set-type span{display:inline-block}
.face.mono-face .face-clock{font-family:var(--mono);font-weight:500;font-size:22cqw;letter-spacing:-.075em}
.face-info{position:absolute;left:50%;top:73%;transform:translate(-50%,-50%);width:72%;border-radius:6.5cqw;background:rgba(245,247,255,.075);padding:3.3cqw 4.5cqw;display:flex;align-items:center;justify-content:center;gap:3.5cqw;font-size:7.1cqw;font-weight:600;line-height:1.3;white-space:nowrap}
.face-info svg{width:7cqw;height:7cqw;color:var(--mint);flex-shrink:0}
.face-battery{top:88%;width:48%;flex-direction:column;gap:2.4cqw}
.battery-line{display:flex;align-items:center;gap:3.5cqw}
.progress{width:100%;height:1.3cqw;min-height:2px;background:rgba(245,247,255,.12);border-radius:100px;overflow:hidden}
.progress:after{content:'';display:block;width:76%;height:100%;background:var(--mint);border-radius:100px}
.face-date{z-index:3}
.lav-progress{top:74%;color:var(--lavender);font-size:6cqw}
.lav-progress .progress{width:25%}
.lav-quote{top:88%;width:82%;font-size:7cqw}
.js #demo-date{border:1px dashed var(--mint);padding:calc(3.3cqw - 1px) calc(4.5cqw - 1px);cursor:grab;touch-action:none;user-select:none;-webkit-user-select:none;min-height:44px;transition:background-color 120ms var(--ease),border-color 120ms var(--ease)}
.js #demo-date:hover,.js #demo-date.is-dragging{background:rgba(92,240,196,.12)}
.js #demo-date.is-dragging{cursor:grabbing;border-style:solid}
#demo-date:focus-visible{outline:2px solid var(--mint);outline-offset:4px}
.drag-grip{display:none;position:absolute;right:-6px;top:-6px;width:10px;height:10px;border-radius:50%;background:var(--mint);box-shadow:0 0 0 4px var(--canvas)}
.js #demo-date .drag-grip{display:block}
.axis-line{display:none;position:absolute;background:rgba(92,240,196,.45);pointer-events:none;z-index:1}
.js .axis-line{display:block}
.axis-line.vertical{top:0;bottom:0;left:50%;width:1px}
.axis-line.horizontal{left:0;right:0;top:73%;height:1px}

.hero-side{padding:24px 28px;display:flex;flex-direction:column;justify-content:space-between;gap:16px}
.side-title{margin-bottom:8px}
.annotation-list{margin:0;padding:0;list-style:none}
.annotation-list li{display:grid;grid-template-columns:32px 1fr;gap:8px;padding:8px 0;border-bottom:1px solid var(--line-soft)}
.annotation-list li:last-child{border-bottom:0}
.annotation-list .n{font-family:var(--mono);font-size:var(--fs-xs);color:var(--green);padding-top:1px}
.annotation-list strong{font-size:var(--fs-s);font-weight:700;line-height:1.5}
.annotation-list p{font-size:var(--fs-xs);color:var(--muted);line-height:1.6;margin-top:2px}
.demo-controls{display:none;border-top:1px solid var(--line);padding-top:16px}
.js .demo-controls{display:block}
.control-title{font-size:var(--fs-xs);font-weight:700;margin-bottom:8px}
.range-row{display:grid;grid-template-columns:1fr 48px;column-gap:8px;align-items:center;font-size:var(--fs-xs)}
.range-row output{grid-column:2;grid-row:1;font-family:var(--mono);font-variant-numeric:tabular-nums;text-align:right}
.range-row input{grid-column:1/-1;width:100%;height:44px;accent-color:var(--green);margin:0}
.reset{border:0;background:transparent;color:var(--green);min-height:44px;padding:4px 0;font-size:var(--fs-xs);font-weight:700;text-decoration:underline;text-underline-offset:4px}
.reset:hover{color:var(--green-press)}
.demo-disclaimer{font-size:var(--fs-xs);color:var(--muted);line-height:1.6}
.caption-row{display:flex;justify-content:space-between;gap:24px;padding:16px 0;font-size:var(--fs-xs);color:var(--muted);line-height:1.6}
.scope-note{margin-top:8px;padding-top:16px;border-top:1px solid var(--line);display:flex;gap:32px;align-items:baseline}
.scope-note strong{font-size:var(--fs-s);flex-shrink:0}
.scope-note p{font-size:var(--fs-s);color:var(--muted)}

/* 섹션 공통 */
.section{padding-block:var(--space-section);border-top:1px solid var(--line)}
.section-heading{display:flex;justify-content:space-between;gap:40px;margin-bottom:48px;align-items:end}
.section-heading p{max-width:360px;font-size:var(--fs-s);color:var(--muted)}
.split{display:grid;grid-template-columns:1.15fr 1fr;gap:72px;align-items:center}
.split.reverse{grid-template-columns:1fr 1.15fr}
.feature-copy h2{margin-bottom:24px}
.feature-copy>p{color:var(--muted);font-size:var(--fs-body);max-width:440px}
.feature-copy .text-link{margin-top:16px}
.feature-visual{background:var(--canvas);color:var(--light);padding:32px;position:relative;border-radius:var(--radius-s);box-shadow:var(--shadow-1)}
.visual-label{font-size:var(--fs-xs);color:var(--dim);letter-spacing:.04em;display:flex;justify-content:space-between;gap:16px;margin-bottom:24px}
.color-specimen{display:flex;gap:16px;margin-bottom:24px}
.swatch{height:32px;width:32px;border-radius:50%;background:var(--mint)}
.swatch.gold{background:var(--gold)}
.swatch.coral{background:var(--coral)}
.swatch.lavender{background:var(--lavender)}
.swatch.white{background:var(--light)}
.background-crop{height:264px;overflow:hidden;border:1px solid #364354;border-radius:var(--radius-l)}
.background-crop img{width:100%;margin-top:-125%}
.crop-caption{font-size:var(--fs-xs);color:var(--dim);margin-top:16px;line-height:1.6}
.feature-points{margin-top:32px;border-top:1px solid var(--line)}
.feature-point{display:grid;grid-template-columns:96px 1fr;gap:16px;padding:16px 0;border-bottom:1px solid var(--line);font-size:var(--fs-s)}
.feature-point p{color:var(--muted)}
.clock-plate{display:grid;grid-template-columns:1fr 1fr;gap:32px;align-items:center}
.clock-plate .face{width:100%;max-width:310px}
.analog-clock{position:absolute;width:78%;left:50%;top:46%;transform:translate(-50%,-50%)}
.analog-clock .hand{transform-box:view-box;transform-origin:100px 100px}
.face.gold-face .face-info{top:87%}
.gold-face .face-info svg{color:var(--gold)}
.specimen-side{display:flex;flex-direction:column;gap:24px}
.specimen-font{border-bottom:1px solid #344152;padding-bottom:16px}
.specimen-font .time{font-size:40px;color:var(--light);line-height:1.25;letter-spacing:-.05em;font-variant-numeric:tabular-nums}
.specimen-font .t-round{font-family:ui-rounded,-apple-system,sans-serif;font-weight:600}
.specimen-font .t-classic{font-family:Georgia,serif}
.specimen-font .font-name{font-size:var(--fs-xs);color:var(--dim);margin-top:4px}
.info-list{display:flex;flex-wrap:wrap;gap:8px;margin-top:24px}
.info-list span{font-size:var(--fs-xs);border:1px solid var(--line-strong);padding:4px 12px;border-radius:999px;background:var(--white)}
.position-note{display:flex;align-items:center;gap:24px;margin-top:32px;padding:16px 0;border-top:1px solid var(--line);font-size:var(--fs-s)}
.position-symbol{width:44px;height:44px;flex-shrink:0;border:1px dashed var(--green);position:relative}
.position-symbol:after{content:'+';position:absolute;inset:0;display:grid;place-items:center;color:var(--green);font-size:24px}

/* 검은 띠: 출력 비교 */
.dark{background:var(--canvas);color:var(--light)}
.outputs+.section{border-top:0}
.dark .eyebrow,.dark .section-heading p{color:var(--dim)}
.outputs{padding-block:var(--space-section)}
.output-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:32px}
.output{border-top:1px solid #4c5867;padding-top:16px}
.output-top{display:flex;justify-content:space-between;font-size:var(--fs-xs);color:var(--dim)}
.output-view{height:240px;display:grid;place-items:center;margin-block:24px}
.output-view .face{width:172px;border:1px solid #354456;box-shadow:none}
.output-view .slot{width:172px;height:72px;border:1px dashed #6a7b8e;border-radius:var(--radius-m);display:flex;align-items:center;justify-content:center;color:var(--mint);font-size:16px;position:relative}
.slot-icon{width:22px;height:22px;margin-right:8px}
.slot-label{position:absolute;bottom:-28px;color:var(--dim);font-size:var(--fs-xs);white-space:nowrap}
.ghost{position:absolute;inset:0;opacity:0;pointer-events:none}
.output h3{margin-bottom:8px}
.output p{font-size:var(--fs-s);color:var(--dim);max-width:320px}
.output strong{color:var(--mint);font-weight:600}
.output-footnote{margin-top:40px;border-top:1px solid #4c5867;padding-top:16px;font-size:var(--fs-xs);color:var(--dim);line-height:1.7}

/* 보관 도해·앱 UI 재현 */
.archive-visual{padding:32px;border:1px solid var(--line);background:var(--white);border-radius:var(--radius-s);box-shadow:var(--shadow-1)}
.ui-slab{background:var(--canvas-2);color:var(--light);padding:24px;border-radius:var(--radius-l);font-family:-apple-system,BlinkMacSystemFont,var(--sans);font-size:14px;line-height:1.6}
.ui-slab .ui-bar{display:flex;justify-content:space-between;align-items:center;padding-bottom:16px;font-weight:600}
.ui-title{font-size:18px;font-weight:600}
.ui-green{color:var(--mint)}
.ui-danger{color:var(--danger-on-dark)}
.ui-row{display:flex;justify-content:space-between;align-items:center;gap:16px;border-top:1px solid var(--canvas-line);padding:12px 0}
.ui-row:last-child{padding-bottom:0}
.ui-field{background:var(--canvas);border:1px solid #506074;border-radius:8px;padding:10px 12px;margin:12px 0}
.ui-pills{display:flex;gap:6px;background:#282f3b;border-radius:10px;padding:4px;font-size:13px;justify-content:space-around}
.ui-pills span{padding:6px;text-align:center}
.ui-pills .active{background:#58616d;border-radius:8px}
.ui-static-btn{display:block;background:#0d443d;color:var(--mint);padding:10px 14px;text-align:center;border-radius:var(--radius-m);margin-top:16px;font-size:14px}
.ui-track{height:4px;background:#465360;border-radius:5px;position:relative;margin:12px 0 10px}
.ui-track:before{content:'';position:absolute;left:0;top:0;bottom:0;width:52%;background:var(--mint);border-radius:5px}
.ui-track:after{content:'';width:17px;height:17px;border-radius:50%;background:#fff;position:absolute;top:-7px;left:50%}
.ui-slab .ui-label{font-size:13px;color:var(--dim);margin-top:16px;line-height:1.6}
.ui-menu{margin:14px 0;background:#242d39;border:1px solid #5b6979;border-radius:var(--radius-m);padding:2px 13px}
.ui-menu .ui-row{padding:9px 0}
.ui-menu-label{font-size:13px;color:var(--dim);margin-top:16px}
.ui-caption{font-size:var(--fs-xs);color:var(--muted);margin-top:16px;line-height:1.6}

/* 사용법 4단계 */
.steps{display:grid;grid-template-columns:repeat(4,1fr);gap:32px}
.step{border-top:1px solid var(--line);padding-top:16px}
.step-number{display:block;font-family:var(--serif);font-size:56px;line-height:1;color:var(--muted);font-variant-numeric:tabular-nums}
.step h3{margin:24px 0 8px}
.step p{font-size:var(--fs-s);color:var(--muted)}
.step-chip{margin-top:24px;min-height:72px;background:var(--white);border:1px solid var(--line-soft);border-radius:var(--radius-s);display:flex;align-items:center;justify-content:center;font-size:var(--fs-xs);font-weight:600;gap:8px;padding:8px}
.step-chip .chip-colors{display:flex;gap:8px}
.step-chip .swatch{width:20px;height:20px}
.section-tail{display:flex;align-items:center;justify-content:space-between;gap:24px;margin-top:48px;padding-top:24px;border-top:1px solid var(--line-soft)}
.section-tail p{font-size:var(--fs-s);color:var(--muted)}

/* 기기·데이터 */
.facts-layout{display:grid;grid-template-columns:1fr 1fr;gap:72px}
.fact-column h2{margin-bottom:24px}
.fact-row{border-top:1px solid var(--line);padding:16px 0;display:grid;grid-template-columns:112px 1fr;gap:16px;font-size:var(--fs-s)}
.fact-row p{color:var(--muted)}
.privacy-note{padding-top:16px;font-size:var(--fs-s);color:var(--muted)}
.privacy-note a{color:var(--green);font-weight:600}

/* FAQ */
.faq-wrap{max-width:860px}
.faq-note{font-size:var(--fs-s);color:var(--muted);margin:16px 0 24px}
.faq-list{border-top:1px solid var(--line)}
details{border-bottom:1px solid var(--line)}
summary{list-style:none;cursor:pointer;padding:20px 48px 20px 0;position:relative;font-size:var(--fs-body);font-weight:600;line-height:1.6;min-height:64px;transition:color var(--t-micro) var(--ease)}
summary:hover{color:var(--green)}
summary::-webkit-details-marker{display:none}
summary:after{content:'+';position:absolute;right:8px;top:20px;font-family:var(--mono);font-size:20px;color:var(--green);transition:transform var(--t-micro) var(--ease)}
details[open]>summary:after{content:'−'}
details>p{font-size:var(--fs-s);color:var(--muted);padding-bottom:24px;max-width:680px}

/* 마무리 CTA·푸터 */
.closing{padding-block:calc(var(--space-section) * .7);border-top:1px solid var(--line);display:flex;justify-content:space-between;align-items:center;gap:40px}
.closing h2{margin:16px 0 12px}
.closing p{font-size:var(--fs-s);color:var(--muted)}
.site-footer{background:#e0e5e9;padding:40px 0 24px}
.footer-top{display:flex;justify-content:space-between;gap:32px}
.footer-info p{font-size:var(--fs-xs);color:var(--muted);margin-top:8px}
.footer-links{display:flex;gap:24px;align-items:start;flex-wrap:wrap}
.footer-links a{font-size:var(--fs-xs);display:inline-flex;min-height:44px;align-items:center}
.family{border-top:1px solid #b1bdc7;margin-top:24px;padding-top:16px;display:flex;gap:24px;align-items:center;flex-wrap:wrap;font-size:var(--fs-xs)}
.family a{min-height:44px;display:inline-flex;align-items:center;text-decoration:none}
.family a:hover{color:var(--green);text-decoration:underline}
.family span{color:var(--muted);margin-right:auto}
.copyright{font-size:var(--fs-xs);color:var(--muted);margin-top:16px;display:flex;justify-content:space-between;gap:24px}

/* 가이드 */
.guide-intro{padding:64px 0 40px;display:grid;grid-template-columns:1.5fr 1fr;gap:72px;align-items:end}
.guide-intro h1{font-size:clamp(38px,4vw + 8px,64px)}
.guide-intro .intro-copy{font-size:var(--fs-body);color:var(--muted)}
.guide-note{border-top:1px solid var(--line);padding:16px 0;font-size:var(--fs-s);color:var(--muted)}
.guide-toc{position:sticky;top:var(--header-h);z-index:20;background:var(--paper);border-top:1px solid var(--line);border-bottom:1px solid var(--line)}
.toc-inner{display:flex;gap:8px 24px;flex-wrap:wrap;padding:4px 0}
.guide-toc a{position:relative;font-size:var(--fs-xs);min-height:44px;min-width:44px;display:inline-flex;align-items:center;font-weight:600;text-decoration:none;color:var(--muted);transition:color var(--t-micro) var(--ease)}
.guide-toc a:after{content:'';position:absolute;left:0;right:0;bottom:6px;height:2px;background:var(--green);transform:scaleX(0);transform-origin:left;transition:transform 240ms var(--ease)}
.guide-toc a:hover,.guide-toc a.is-current{color:var(--green)}
.guide-toc a.is-current:after{transform:none}
.guide-step{border-top:1px solid var(--line);padding-block:64px;display:grid;grid-template-columns:72px 1.1fr 1fr;gap:32px;align-items:start}
.guide-step:first-of-type{border-top:0}
.guide-copy h2{font-size:clamp(29px,1vw + 22px,38px);margin-bottom:24px}
.guide-copy p{font-size:var(--fs-body);color:var(--muted);max-width:640px}
.ui-path{margin:16px 0 24px;font-size:var(--fs-xs);line-height:2.4;color:var(--green);font-weight:700}
kbd{font-family:var(--sans);font-size:var(--fs-xs);font-weight:700;color:var(--green);display:inline-block;border:1px solid #9eafa7;border-bottom-width:2px;background:#f6faf8;border-radius:var(--radius-s);padding:1px 8px;line-height:1.7}
.tip{border-left:2px solid var(--green);padding-left:16px;margin-top:24px;font-size:var(--fs-s);line-height:1.75;color:var(--muted)}
.tip strong{display:block;color:var(--ink);margin-bottom:4px}
.guide-visual{max-width:360px;justify-self:end;width:100%}
.guide-screen{max-width:256px;margin-inline:auto;overflow:hidden;border-radius:24px;border:1px solid #58616c;background:var(--canvas);box-shadow:var(--shadow-1)}
.guide-screen img{width:100%}
.guide-visual .ui-caption{text-align:center}
.template-row{display:flex;align-items:center;gap:16px;padding:12px 0;border-top:1px solid var(--canvas-line)}
.template-row .face{width:84px;flex-shrink:0;box-shadow:0 0 0 1px #273240}
.template-row strong{font-size:14px}
.template-row p{color:var(--dim);font-size:13px;margin-top:4px}
.template-row:first-of-type{margin-top:16px}
.guide-apply{padding-block:72px;border-top:1px solid var(--line)}
.guide-apply>.section-heading{margin-bottom:24px}
.guide-apply .output-grid{padding:32px;background:var(--canvas);color:var(--light);gap:28px;border-radius:var(--radius-s)}
.guide-apply .output h3{color:var(--light)}
.guide-branch{display:grid;grid-template-columns:1.5fr 1fr;gap:72px;align-items:start;padding-top:56px;margin-top:48px;border-top:1px solid var(--line)}
.guide-branch h3{font-size:clamp(21px,.6vw + 18px,26px);margin-bottom:16px}
.guide-branch p,.guide-branch li{font-size:var(--fs-body);color:var(--muted)}
.guide-branch>div{max-width:680px}
.guide-branch ol{padding-left:20px;margin:16px 0 0}
.guide-branch li+li{margin-top:12px}
.state-stack{display:flex;flex-direction:column;gap:12px}
.state{background:var(--white);border:1px solid var(--line);border-radius:var(--radius-s);padding:16px 20px;font-size:var(--fs-s);box-shadow:0 1px 2px rgba(9,14,23,.05)}
.state .state-n{font:var(--fs-xs)/1.5 var(--mono);color:var(--green);margin-bottom:4px;display:block}
.state p{font-size:var(--fs-xs);margin-top:4px;color:var(--muted)}
.state:last-child{background:#e0eae5;border-color:#7c9c8d}
.advanced,.troubleshoot{padding-block:var(--space-section);border-top:1px solid var(--line)}
.advanced h2,.troubleshoot h2{margin-bottom:24px}
.advanced details>div{padding:0 0 32px;display:grid;grid-template-columns:1.5fr 1fr;gap:48px}
.advanced details>div p{font-size:var(--fs-s);color:var(--muted)}
.advanced .ui-slab{max-width:360px;justify-self:end;width:100%}
.advanced .ui-slab p{color:var(--dim);font-size:13px}
.troubleshoot .privacy-note{margin-top:8px}
.error-page{padding-block:var(--space-section);min-height:60vh}
.error-page h1{margin:24px 0}
.error-page p{max-width:540px;color:var(--muted);margin-bottom:32px}
.error-actions{display:flex;flex-wrap:wrap;gap:16px 24px;align-items:center}

/* ── 모션 언어: "조판 맞춤" ──
   요소가 기준선(축)에 맞춰 '자리 잡는' 동작. JS(html.js)가 있을 때만, opacity/transform만. */
@media (prefers-reduced-motion:no-preference){
  /* 1. 히어로: 재단 표식 → 축선 → 숫자 활자 → 정보 조각 순서로 맞춤 (≤700ms) */
  .js .sheet-tick{animation:wc-tick 520ms var(--ease) backwards}
  .js .sheet-tick.br{animation-delay:80ms}
  .js .axis-line.vertical{animation:wc-axis-y 600ms 120ms var(--ease) backwards}
  .js .axis-line.horizontal{animation:wc-axis-x 600ms 120ms var(--ease) backwards}
  .js .set-type span{animation:wc-type 420ms var(--ease) backwards}
  .js .set-type span:nth-child(2){animation-delay:60ms}
  .js .set-type span:nth-child(3){animation-delay:120ms}
  .js .set-type span:nth-child(4){animation-delay:180ms}
  .js .set-type span:nth-child(5){animation-delay:240ms}
  .js .canvas-sheet .face-info{animation:wc-place 480ms 300ms var(--ease) backwards}
  .js .canvas-sheet .face-battery{animation-delay:360ms}
  /* 2. 스크롤 등장: 아래 기준선에서 14px 올라와 맞춤, 70ms 스태거 */
  .io .rv{opacity:0;transform:translateY(14px);transition:opacity var(--t-enter) var(--ease),transform var(--t-enter) var(--ease);transition-delay:calc(var(--i,0) * 70ms)}
  .io .rv.in{opacity:1;transform:none}
  /* 3. 시계 조판 견본: 바늘이 9:00에서 10:09까지 돌아가 멈춤 */
  .io .clock-plate .hand{transition:transform 880ms 160ms var(--ease)}
  .io .rv:not(.in) .clock-plate .hand.hour{transform:rotate(-34.5deg)}
  .io .rv:not(.in) .clock-plate .hand.minute{transform:rotate(-414deg)}
  /* 4. 출력 비교: '배경만'은 전체 디자인에서 시계·정보가 빠지는 크로스페이드 */
  .io #outputs .output.rv:not(.in) .ghost{opacity:.9}
  .io #outputs .output .ghost{transition:opacity 620ms 420ms var(--ease)}
  .io #outputs .output.rv:not(.in) .slot{transform:scale(.94)}
  .io #outputs .slot{transition:transform 480ms 260ms var(--ease)}
  /* 5. 사용법: 단계 번호가 활자처럼 내려앉음 */
  .io .step.rv .step-number{transition:transform var(--t-enter) var(--ease),opacity var(--t-enter) var(--ease);transition-delay:calc(var(--i,0) * 70ms + 80ms)}
  .io .step.rv:not(.in) .step-number{transform:translateY(-.25em);opacity:0}
}
@keyframes wc-tick{from{opacity:0;transform:rotate(90deg) scale(.4)}}
@keyframes wc-axis-y{from{opacity:0;transform:scaleY(0)}}
@keyframes wc-axis-x{from{opacity:0;transform:scaleX(0)}}
@keyframes wc-type{from{opacity:0;transform:translateY(-.22em)}}
@keyframes wc-place{from{opacity:0;translate:0 10px}}

/* 반응형 */
@media(max-width:1000px){
  .hero-top{gap:32px;grid-template-columns:1.5fr 1fr}
  .workbench{grid-template-columns:1.6fr 1fr}
  .canvas-sheet{padding-inline:24px}
  .hero-side{padding:24px}
  .split,.split.reverse{gap:40px}
  .feature-visual{padding:24px}
  .clock-plate{gap:16px}
  .specimen-font .time{font-size:30px}
  .steps{gap:24px}
  .facts-layout{gap:40px}
  .guide-step{grid-template-columns:48px 1fr 1fr;gap:24px}
  .guide-branch{gap:40px}
  .guide-intro{gap:32px}
}
@media(max-width:850px){
  .hero-top{grid-template-columns:1fr;gap:24px}
  .hero-deck{max-width:560px}
  .workbench{grid-template-columns:1fr}
  .canvas-sheet{border-right:0;border-bottom:1px solid var(--line);min-height:472px}
  .hero-side{display:grid;grid-template-columns:1fr 1fr;gap:32px;padding:24px}
  .demo-controls{margin:0;padding:0;border:0}
  .annotation-list li:first-child{padding-top:0}
  .split,.split.reverse{grid-template-columns:1fr 1fr;gap:32px}
  .clock-plate{grid-template-columns:1fr}
  .clock-plate .face{max-width:208px;margin:auto}
  .specimen-side{flex-direction:row;gap:16px}
  .specimen-font{flex:1}
  .specimen-font .time{font-size:26px}
  .section-heading p{max-width:280px}
  .output-grid{gap:24px}
  .output-view{height:208px}
  .output-view .face{width:140px}
  .output-view .slot{width:144px}
  .steps{grid-template-columns:1fr 1fr;gap:40px 32px}
  .facts-layout{gap:32px}
  .footer-top{gap:24px}
  .guide-intro{grid-template-columns:1fr;gap:24px;padding-top:48px}
  .guide-step{grid-template-columns:40px 1fr 1fr;gap:24px;padding-block:56px}
  .guide-step .step-number{font-size:40px}
  .guide-branch{grid-template-columns:1.1fr 1fr;gap:32px}
  .guide-apply .output-grid{padding:24px;gap:20px}
  .guide-apply .output-view .face{width:124px}
  .advanced details>div{gap:32px}
  html:not(.js) .hero-side{grid-template-columns:1fr}
}
@media(min-width:641px) and (max-width:850px){
  html:not(.js) .annotation-list{display:grid;grid-template-columns:repeat(3,1fr);gap:24px}
  html:not(.js) .annotation-list li{display:block;border:0;padding:0}
  html:not(.js) .annotation-list .n{display:block;margin-bottom:8px}
}
@media(max-width:640px){
  :root{--header-h:64px}
  .brand{font-size:19px;gap:8px}
  .brand-mark{width:28px;height:28px;font-size:21px}
  .site-header nav{gap:16px}
  .site-header .nav-feature{display:none}
  .hero{padding-top:32px;padding-bottom:40px}
  .eyebrow{margin-bottom:16px}
  .hero-top{gap:16px;margin-bottom:24px}
  h1{letter-spacing:-.025em;line-height:1.18}
  .hero-deck>p:not(.hero-note){margin-bottom:20px}
  .hero-actions{gap:16px}
  .canvas-sheet{min-height:0;padding:48px 20px 44px}
  .canvas-sheet .face{width:244px}
  .sheet-index,.sheet-axis{top:12px}
  .sheet-index{left:16px}.sheet-axis{right:16px}
  .sheet-bottom{left:16px;bottom:10px}
  .sheet-tick.tl{left:24px;top:40px}.sheet-tick.br{right:24px;bottom:32px}
  .hero-side{grid-template-columns:1fr;gap:20px;padding:20px}
  .annotation-list li:first-child{padding-top:8px}
  .demo-controls{border-top:1px solid var(--line);padding-top:16px}
  .demo-controls .range-grid{display:grid;grid-template-columns:1fr 1fr;gap:16px}
  .caption-row{display:block}
  .caption-row span{display:block}
  .scope-note{display:block}
  .scope-note p{margin-top:8px}
  .section-heading{display:block;margin-bottom:32px}
  .section-heading p{margin-top:16px;max-width:100%}
  .split,.split.reverse{grid-template-columns:1fr;gap:32px}
  .split.reverse .feature-copy{order:2}
  .split.reverse .feature-visual{order:1}
  .feature-visual{padding:24px 20px}
  .background-crop{height:232px}
  .feature-point{grid-template-columns:84px 1fr;gap:12px}
  .swatch{height:28px;width:28px}
  .color-specimen{gap:12px}
  .clock-plate{grid-template-columns:1.05fr 1fr;gap:20px}
  .clock-plate .face{width:100%}
  .specimen-side{flex-direction:column;gap:12px}
  .specimen-font{padding-bottom:12px}
  .specimen-font .time{font-size:28px}
  .output-grid{grid-template-columns:1fr;gap:40px}
  .output{display:grid;grid-template-columns:124px 1fr;gap:0 20px}
  .output-top{grid-column:1/-1;margin-bottom:16px}
  .output-view{grid-column:1;grid-row:2/5;height:auto;min-height:152px;margin:0}
  .output-view .face{width:124px}
  .output-view .slot{width:124px;height:64px;font-size:14px}
  .slot-label{bottom:-26px}
  .output h3{grid-column:2;align-self:end}
  .output p{grid-column:2;align-self:start}
  .archive-visual{padding:16px}
  .ui-slab{padding:20px}
  .steps{grid-template-columns:1fr;gap:32px}
  .step{display:grid;grid-template-columns:64px 1fr;gap:4px 16px;align-items:start}
  .step-number{grid-row:1/4;font-size:44px}
  .step h3{margin:4px 0 0}
  .step-chip{margin-top:12px;min-height:56px}
  .section-tail{display:block}
  .section-tail .btn{margin-top:16px}
  .facts-layout{grid-template-columns:1fr;gap:48px}
  .fact-row{grid-template-columns:96px 1fr;gap:12px}
  .closing{display:block}
  .closing .btn{margin-top:24px}
  .footer-top{display:block}
  .footer-links{margin-top:16px;gap:4px 24px}
  .family{gap:4px 24px}
  .family span{flex-basis:100%;margin-right:0}
  .copyright{display:block}
  .copyright span{display:block}
  .guide-intro{padding-top:32px;padding-bottom:24px}
  .guide-toc{position:static}
  .toc-inner{gap:0 16px}
  .guide-step{grid-template-columns:40px 1fr;gap:0 12px;padding-block:40px}
  .guide-copy{display:contents}
  .guide-copy h2{grid-column:2;margin:0}
  .guide-copy p,.guide-copy .ui-path,.guide-copy .tip{grid-column:1/-1;margin:16px 0 0}
  .guide-step .guide-visual{margin-top:32px}
  .guide-step .step-number{font-size:36px}
  .guide-step .guide-visual{grid-column:1/-1;justify-self:center;max-width:320px}
  .guide-screen{max-width:280px}
  .guide-apply{padding-block:48px}
  .guide-apply .output-grid{padding:20px}
  .guide-apply .output{grid-template-columns:112px 1fr;gap:0 16px}
  .guide-apply .output-view .face{width:108px}
  .guide-apply .output-view .slot{width:108px;font-size:13px}
  .guide-branch{grid-template-columns:1fr;gap:24px;padding-top:32px;margin-top:32px}
  .guide-branch .guide-visual{max-width:320px;justify-self:center}
  .advanced details>div{grid-template-columns:1fr;gap:24px}
  .advanced .ui-slab{justify-self:start;max-width:100%}
}
@media(prefers-reduced-motion:reduce){
  html{scroll-behavior:auto}
  *,*:before,*:after{animation:none!important;transition:none!important}
  .io .rv{opacity:1;transform:none}
}
@media print{.site-header,.guide-toc{position:static}}