/* UI/UX · 디자인 시스템 전용 — uiux/index.html(첫 화면) · uiux/system/index.html(상세) 에서만 읽는다.
   예시 시스템(가상의 '주말공방')의 컴포넌트는 c-*, 페이지 틀은 sys-*.
   스튜디오 프레임 팔레트(site.css :root) 위에 예시 토큰을 얹는다. 테두리 없이 면 · 여백 · 그림자로만 나눈다. */
:root{
  --red-600:#C22525;
  --elev-overlay:0 24px 60px rgba(22,21,19,.18);
  --ring:0 0 0 3px #fff,0 0 0 6px rgba(36,82,184,.55);
  --hl:0 0 0 6px rgba(224,49,49,.16);
  --ease:cubic-bezier(.22,1,.36,1);
}
.ic{width:20px;height:20px;flex-shrink:0;display:block}
code{font-family:var(--mono);letter-spacing:.02em}

/* ── 첫 화면 */
.sys-first{padding-top:0}
.sys-sum{display:grid;grid-template-columns:1fr 1fr;gap:20px;margin-top:48px}
.sys-sum .ds-card.wide{grid-column:1/-1}
.sys-canvas{background:#fff;color:var(--ink);border-radius:var(--r-sm);padding:22px;display:grid;gap:16px;align-content:start}
.sys-flow-wrap{margin-top:20px}
.sys-flow-t{font-family:var(--mono);font-size:12px;letter-spacing:.1em;color:rgba(255,255,255,.45);text-transform:uppercase;font-weight:500;margin:0 0 14px 4px}
.sys-more{display:flex;justify-content:center;margin-top:40px}

/* ── 상세 페이지 상단 */
.sys-top{padding-bottom:88px}
.sys-back{display:inline-flex;align-items:center;height:38px;padding:0 16px;margin-bottom:28px;border-radius:999px;background:var(--panel);font-size:14px;font-weight:700;color:var(--ink-mid);transition:background .2s,color .2s}
.sys-back:hover{background:var(--ink);color:#fff}
.sys-hero{display:grid;grid-template-columns:.9fr 1.1fr;gap:20px;margin-top:64px;text-align:left;background:var(--panel);border-radius:40px;padding:24px}
.sys-hero-pane{position:relative;display:flex;align-items:center;justify-content:center;min-height:360px;border-radius:var(--r-lg);background:var(--panel-deep);padding:56px 32px 32px}
.sys-hero-pane.is-code{background:var(--ink);justify-content:flex-start}
.sys-hero-pane .c-class{width:min(290px,100%)}
.sys-cap{position:absolute;left:22px;top:20px;font-family:var(--mono);font-size:11.5px;letter-spacing:.08em;color:var(--ink-mid);background:rgba(255,255,255,.7);padding:5px 11px;border-radius:999px}
.is-code .sys-cap{background:rgba(255,255,255,.1);color:rgba(255,255,255,.7)}

/* 스펙 줄 — 코드처럼 보이지만 줄마다 글줄이라 번역된다 */
.sys-code{width:100%;font-family:var(--mono);font-size:13.5px;line-height:1.75;color:rgba(255,255,255,.82)}
.sys-code .ln{display:grid;grid-template-columns:7.5em 1fr;gap:14px;padding:6px 10px;margin:0 -10px;border-radius:10px;transition:background .35s,color .35s}
.sys-code .ln.head{display:block;color:#FF8A8A;font-weight:700;font-size:15px;padding-bottom:10px}
.sys-code .ln i{font-style:normal;color:rgba(255,255,255,.45);font-family:var(--font);font-size:13px;font-weight:600}
.sys-code .ln span{font-family:var(--font);font-weight:500}

/* 히어로 모션: 스펙 줄이 하나씩 켜지면 화면의 해당 부분이 강조된다 */
.sys-hero.is-motion [data-hl]{transition:box-shadow .4s var(--ease),transform .4s var(--ease),background .4s;border-radius:8px}
.sys-hero.is-motion .c-class[data-hl]{border-radius:var(--r-lg)}
.sys-hero[data-step="1"] [data-ln="1"],.sys-hero[data-step="2"] [data-ln="2"],.sys-hero[data-step="3"] [data-ln="3"],.sys-hero[data-step="4"] [data-ln="4"],.sys-hero[data-step="5"] [data-ln="5"]{background:rgba(255,255,255,.08);color:#fff}
.sys-hero[data-step="1"] [data-hl="1"],.sys-hero[data-step="2"] [data-hl="2"],.sys-hero[data-step="4"] [data-hl="4"]{box-shadow:var(--hl);background:rgba(224,49,49,.06)}
.sys-hero[data-step="3"] [data-hl="3"]{transform:translateY(-8px);box-shadow:var(--shadow-lift)}
.sys-hero[data-step="5"] .c-class{transform:translateY(-4px);box-shadow:var(--shadow-lift),var(--hl)}

/* ── 섹션 틀 (상세) */
.sys-sec{padding:88px 0}
.sys-sec.tint{background:var(--panel);border-radius:40px;margin:0 16px}
.sys-sec.dark{padding:24px 0}
.sys-head{max-width:720px;margin-bottom:40px}
.sys-no{font-family:var(--mono);font-size:13px;letter-spacing:.08em;color:var(--red)}
.sys-head h2{margin-top:14px;font-size:clamp(30px,4.2vw,52px);line-height:1.15;font-weight:800;letter-spacing:-.04em}
.sys-head p{margin-top:16px;font-size:17px;color:var(--ink-mid)}
.sys-box{background:var(--white);border-radius:var(--r-lg);padding:32px}
.sys-box + .sys-fgrid{margin-top:20px}
.sys-box-t{font-size:15px;font-weight:700;color:var(--ink-mid);margin-bottom:20px}
.sys-box-note{margin-top:18px;font-size:14px;color:var(--ink-mid)}
.sys-fgrid{display:grid;grid-template-columns:1.1fr .9fr;gap:20px}
.sys-fgrid.even{grid-template-columns:1fr 1fr}

/* 01 방향성 */
.sys-principles{display:grid;grid-template-columns:repeat(4,1fr);gap:18px}
.sys-pr{background:var(--white);border-radius:var(--r-md);box-shadow:var(--shadow);padding:28px}
.sys-pr .mono{font-size:12px;color:var(--red)}
.sys-pr h4{margin-top:10px;font-size:18px;font-weight:700;letter-spacing:-.02em;line-height:1.4}
.sys-pr p{margin-top:8px;font-size:14.5px;color:var(--ink-mid)}

/* 02 파운데이션 */
.sys-palette{display:grid;grid-template-columns:repeat(8,1fr);gap:10px}
.sys-palette div{aspect-ratio:1/1;border-radius:var(--r-sm);background:var(--c);color:var(--t);padding:12px;display:flex;flex-direction:column;justify-content:flex-end}
.sys-palette .is-white,.sys-tk i{box-shadow:inset 0 0 0 1px rgba(22,21,19,.08)}
.sys-palette b{font-family:var(--mono);font-size:12px;font-weight:700}
.sys-palette span{font-family:var(--mono);font-size:10.5px;opacity:.75}
.sys-tokens{margin-top:24px;background:var(--panel);border-radius:var(--r-md);padding:6px 20px}
.sys-tk{display:grid;grid-template-columns:40px 1.1fr 1fr 1fr;gap:18px;align-items:center;padding:13px 0}
.sys-tk + .sys-tk{box-shadow:0 -1px 0 rgba(22,21,19,.06)}
.sys-tk-head{padding:10px 0 4px;font-size:12px;font-weight:700;color:var(--ink-soft)}
.sys-tk i{width:40px;height:40px;border-radius:12px;background:var(--c)}
.sys-tk code{display:block;font-size:13.5px;font-weight:700}
.sys-tk small{font-family:var(--mono);font-size:11.5px;color:var(--ink-soft)}
.sys-tk p{font-size:14.5px}
.sys-tk p.no{color:var(--ink-mid)}
.sys-tk p::before{content:"";display:inline-block;width:7px;height:7px;border-radius:50%;background:var(--green);margin-right:9px;vertical-align:2px}
.sys-tk p.no::before{background:var(--red)}
.sys-type{display:grid}
.sys-type div{display:flex;justify-content:space-between;align-items:baseline;gap:16px;padding:11px 0}
.sys-type div + div{box-shadow:0 -1px 0 rgba(22,21,19,.06)}
.sys-type code{font-size:11.5px;color:var(--ink-soft);flex-shrink:0}
.c-t{letter-spacing:-.03em;min-width:0}
.c-t.display{font-size:clamp(26px,3vw,38px);font-weight:800;line-height:1.15;letter-spacing:-.045em}
.c-t.title{font-size:20px;font-weight:700;line-height:1.35}
.c-t.body{font-size:15.5px;font-weight:500;line-height:1.6;letter-spacing:-.01em}
.c-t.caption{font-size:13px;font-weight:500;color:var(--ink-mid);letter-spacing:0}
.sys-radius{display:grid;grid-template-columns:repeat(4,1fr);gap:12px}
.sys-radius div{display:flex;flex-direction:column}
.sys-radius i{aspect-ratio:1.2/1;background:var(--panel);border-radius:var(--r) 0 0 0;position:relative;overflow:hidden}
.sys-radius i::after{content:"";position:absolute;inset:30% 0 0 30%;background:var(--panel-deep);border-radius:var(--r) 0 0 0}
.sys-radius code{margin-top:8px;font-size:12px;font-weight:700}
.sys-scale{display:flex;align-items:flex-end;gap:6px;margin-top:26px;height:44px}
.sys-scale i{display:block;width:calc(var(--w) * 1px + 6px);max-width:44px;height:calc(var(--w) / 2 * 1px + 4px);max-height:44px;border-radius:4px;background:var(--red);opacity:calc(.3 + var(--w) / 130)}

/* ── 예시 컴포넌트 (c-*) */
.c-btn{display:inline-flex;align-items:center;justify-content:center;gap:8px;height:48px;padding:0 24px;border-radius:999px;font-size:15px;font-weight:700;white-space:nowrap;transition:transform .15s,box-shadow .2s,background .2s,opacity .3s;cursor:default;user-select:none}
.c-btn.primary{background:var(--ink);color:#fff}
.c-btn.accent{background:var(--red);color:#fff}
.c-btn.soft{background:var(--panel);color:var(--ink)}
.c-btn.ghost{background:transparent;color:var(--ink-mid);text-decoration:underline;text-underline-offset:4px;text-decoration-color:rgba(22,21,19,.25)}
.c-btn.danger{background:var(--red-soft);color:var(--red-600)}
.c-btn.primary:hover,.c-btn.primary.is-hover{background:#33302B}
.c-btn.accent:hover{background:#CC2626}
.c-btn.soft:hover{background:var(--panel-deep)}
.c-btn.is-press{transform:scale(.96);background:#000}
.c-btn.is-focus{box-shadow:var(--ring)}
.c-btn.is-off{background:var(--panel-deep);color:var(--ink-soft)}
.c-btn.is-load{background:#33302B;color:rgba(255,255,255,.8)}
.c-spin{width:16px;height:16px;border-radius:50%;box-shadow:inset 0 0 0 2px rgba(255,255,255,.25);position:relative;animation:c-spin .8s linear infinite}
.c-spin::after{content:"";position:absolute;inset:0;border-radius:50%;box-shadow:inset 2px 0 0 0 #fff}
@keyframes c-spin{to{transform:rotate(360deg)}}
.sys-btns{display:flex;gap:10px;flex-wrap:wrap}
.sys-canvas .sys-btns .c-btn{height:42px;padding:0 18px;font-size:14px}
.sys-states-row{display:grid;grid-template-columns:repeat(6,1fr);gap:10px;margin-top:22px;background:var(--panel);border-radius:var(--r-md);padding:20px 16px}
.sys-states-row div{display:flex;flex-direction:column;align-items:center;gap:10px}
.sys-states-row .c-btn{padding:0 16px;font-size:14px;height:44px}
.sys-states-row small{font-size:12.5px;color:var(--ink-mid);font-weight:600}

.c-badges{display:flex;gap:8px;flex-wrap:wrap}
.c-badge{display:inline-flex;align-items:center;gap:6px;height:26px;padding:0 11px;border-radius:999px;font-size:12px;font-weight:700;background:var(--panel);color:var(--ink-mid);white-space:nowrap}
.c-badge i{width:6px;height:6px;border-radius:50%;background:currentColor}
.c-badge.green{background:var(--green-soft);color:var(--green)}
.c-badge.blue{background:var(--blue-soft);color:var(--blue)}
.c-badge.amber{background:var(--amber-soft);color:var(--amber)}
.c-badge.red{background:var(--red-soft);color:var(--red-600)}
.c-chips{display:flex;gap:8px;flex-wrap:wrap}
.c-chip{height:38px;padding:0 16px;border-radius:999px;background:var(--panel);color:var(--ink-mid);display:inline-flex;align-items:center;font-size:14px;font-weight:600;white-space:nowrap}
.c-chip.on{background:var(--ink);color:#fff}
.c-seg{display:inline-flex;gap:4px;padding:4px;border-radius:999px;background:var(--panel);align-self:flex-start}
.c-seg span{height:36px;padding:0 16px;border-radius:999px;display:inline-flex;align-items:center;font-size:14px;font-weight:600;color:var(--ink-mid);white-space:nowrap}
.c-seg span.on{background:#fff;color:var(--ink);box-shadow:0 2px 8px rgba(22,21,19,.08)}
.c-seg span.off{color:rgba(140,136,128,.75);text-decoration:line-through;text-decoration-color:rgba(140,136,128,.5)}
.c-step{display:inline-flex;align-items:center;gap:4px;padding:4px;border-radius:999px;background:var(--panel)}
.c-step .b{width:40px;height:40px;border-radius:50%;background:#fff;display:flex;align-items:center;justify-content:center}
.c-step .b .ic{width:16px;height:16px}
.c-step b{min-width:36px;text-align:center;font-size:16px;font-weight:700}
.c-tg{width:48px;height:28px;border-radius:999px;background:var(--panel-deep);position:relative;flex-shrink:0}
.c-tg::after{content:"";position:absolute;left:3px;top:3px;width:22px;height:22px;border-radius:50%;background:#fff;box-shadow:0 1px 4px rgba(22,21,19,.18)}
.c-tg.on{background:var(--ink)}
.c-tg.on::after{left:auto;right:3px}
.c-check{display:flex;align-items:center;gap:10px;font-size:14.5px;font-weight:600}
.c-check .box{width:24px;height:24px;border-radius:8px;background:var(--panel-deep);display:flex;align-items:center;justify-content:center;color:#fff}
.c-check .box.on{background:var(--ink)}
.c-check .box .ic{width:15px;height:15px;stroke-width:2.6}
.sys-sel{display:grid;gap:18px}
.sys-sel-row{display:flex;gap:24px;flex-wrap:wrap;align-items:center}
.sys-inputs{display:grid;gap:18px}
.c-field{display:grid;gap:7px}
.c-field label{font-size:13px;font-weight:700;color:var(--ink-mid)}
.c-input{height:50px;border-radius:var(--r-sm);background:var(--panel);padding:0 16px;display:flex;align-items:center;font-size:15px;font-weight:500;color:var(--ink)}
.c-input.is-focus{background:#fff;box-shadow:0 0 0 2px var(--ink)}
.c-caret{display:inline-block;width:1.5px;height:18px;background:var(--ink);margin-left:2px;animation:c-blink 1s steps(1) infinite}
@keyframes c-blink{50%{opacity:0}}
.c-field.is-error .c-input{background:var(--red-soft);box-shadow:0 0 0 2px var(--red)}
.c-field em{display:flex;align-items:center;gap:6px;font-style:normal;font-size:13px;font-weight:600;color:var(--red-600)}
.c-field em .ic{width:16px;height:16px}

/* 클래스 카드 + 썸네일(그림 대신 면으로) */
.c-class{background:#fff;border-radius:var(--r-lg);box-shadow:var(--shadow);overflow:hidden;transition:transform .3s,box-shadow .3s}
.c-class:hover{transform:translateY(-6px);box-shadow:var(--shadow-lift)}
.c-class-body{padding:18px 22px 22px}
.c-class h4{font-size:19px;font-weight:700;letter-spacing:-.025em}
.c-class p{margin-top:2px;font-size:13.5px;color:var(--ink-mid)}
.c-class-foot{display:flex;justify-content:space-between;align-items:baseline;margin-top:14px}
.c-class-foot b{font-size:17px;font-weight:800;letter-spacing:-.02em}
.c-class-foot span{font-size:12.5px;color:var(--ink-mid);font-weight:600}
.c-thumb{position:relative;aspect-ratio:4/3;overflow:hidden}
.c-thumb .c-badge{position:absolute;left:14px;top:14px}
.art-bowl{background:var(--amber-soft)}
.art-bowl::before{content:"";position:absolute;left:24%;right:24%;top:40%;height:34%;background:#fff;border-radius:8px 8px 50% 50% / 8px 8px 100% 100%;box-shadow:0 14px 26px rgba(138,90,0,.14)}
.art-bowl::after{content:"";position:absolute;left:40%;right:40%;top:72%;height:7%;background:#F3DFB5;border-radius:0 0 8px 8px}
.art-candle{background:var(--blue-soft)}
.art-candle::before{content:"";position:absolute;left:36%;right:36%;top:40%;bottom:16%;background:#fff;border-radius:16px 16px 20px 20px;box-shadow:0 14px 26px rgba(36,82,184,.14)}
.art-candle::after{content:"";position:absolute;left:50%;top:22%;width:7%;aspect-ratio:1/1.5;transform:translateX(-50%);background:#F2B33D;border-radius:50% 50% 50% 50% / 60% 60% 40% 40%}
.art-wood{background:var(--green-soft)}
.art-wood::before{content:"";position:absolute;left:20%;right:20%;top:30%;bottom:26%;background:#E9D9C2;border-radius:22px;transform:rotate(-8deg);box-shadow:0 14px 26px rgba(31,122,58,.14)}
.art-wood::after{content:"";position:absolute;right:28%;top:36%;width:7%;aspect-ratio:1;border-radius:50%;background:var(--green-soft);transform:rotate(-8deg)}

/* 04 화면 */
.sys-sgrid{display:grid;grid-template-columns:1.55fr 1fr;gap:20px;align-items:stretch}
.sys-win{border-radius:18px;overflow:hidden;background:#fff;box-shadow:0 24px 60px rgba(22,21,19,.10)}
.sys-win-bar{display:flex;gap:6px;height:30px;align-items:center;padding:0 14px;background:var(--ink)}
.sys-win-bar i{width:8px;height:8px;border-radius:50%;background:rgba(255,255,255,.28)}
.app{padding:0 0 28px}
.app-top{display:flex;align-items:center;gap:24px;height:64px;padding:0 28px;box-shadow:0 1px 0 rgba(22,21,19,.06)}
.app-logo{font-size:17px;font-weight:800;letter-spacing:-.04em;white-space:nowrap}
.app-nav{display:flex;gap:20px;font-size:13.5px;font-weight:600;color:var(--ink-soft);white-space:nowrap}
.app-nav .on{color:var(--ink)}
.app-search{margin-left:auto;display:flex;align-items:center;gap:8px;height:38px;width:190px;padding:0 14px;border-radius:999px;background:var(--panel);font-size:13px;color:var(--ink-soft);white-space:nowrap}
.app-search .ic{width:16px;height:16px}
.app-body{padding:28px 28px 0}
.app-h{font-size:24px;font-weight:800;letter-spacing:-.035em;margin-bottom:16px}
.app-cards{display:grid;grid-template-columns:1fr 1fr;gap:20px;margin-top:22px}
.sys-stage{background:var(--panel-deep);border-radius:18px;padding:32px 20px;display:flex;justify-content:center;align-items:center}
.c-phone{width:290px;max-width:100%;padding:9px;border-radius:44px;background:var(--ink);box-shadow:0 30px 60px rgba(22,21,19,.22)}
.c-phone-in{position:relative;border-radius:36px;overflow:hidden;background:#fff;height:560px;display:flex;flex-direction:column}
.m-status{position:absolute;left:0;right:0;top:0;z-index:2;display:flex;justify-content:space-between;align-items:center;padding:12px 24px 0;font-size:12.5px}
.m-status span{width:22px;height:10px;border-radius:3px;background:var(--ink)}
.m-hero{position:relative;height:200px;flex-shrink:0}
.m-hero::before{top:34%;bottom:12%}
.m-back{position:absolute;left:14px;top:40px;width:36px;height:36px;border-radius:50%;background:rgba(255,255,255,.85);display:flex;align-items:center;justify-content:center;z-index:2}
.m-back .ic{width:18px;height:18px}
.m-body{padding:18px 20px;flex:1;overflow:hidden}
.m-body h4{font-size:21px;font-weight:800;letter-spacing:-.035em}
.m-meta{font-size:13px;color:var(--ink-mid);margin-top:2px}
.m-tabs{display:flex;gap:4px;margin-top:16px;padding:4px;border-radius:999px;background:var(--panel)}
.m-tabs span{flex:1;height:32px;border-radius:999px;display:flex;align-items:center;justify-content:center;font-size:13px;font-weight:600;color:var(--ink-mid)}
.m-tabs .on{background:#fff;color:var(--ink);box-shadow:0 2px 8px rgba(22,21,19,.08)}
.m-text{margin-top:14px;font-size:13.5px;color:var(--ink-mid);line-height:1.6}
.m-info{display:grid;grid-template-columns:repeat(3,1fr);gap:6px;margin-top:14px}
.m-info div{background:var(--panel);border-radius:12px;padding:10px 6px;display:flex;flex-direction:column;align-items:center;gap:4px;font-size:12px;font-weight:600;text-align:center}
.m-info .ic{width:17px;height:17px;color:var(--ink-mid)}
.m-bar{display:flex;align-items:center;justify-content:space-between;gap:12px;padding:12px 16px 18px 20px;background:#fff;box-shadow:0 -10px 24px rgba(22,21,19,.07)}
.m-bar small{display:block;font-size:11.5px;color:var(--ink-mid)}
.m-bar b{font-size:17px;font-weight:800;letter-spacing:-.02em}
.m-bar .c-btn{height:46px;padding:0 24px}

/* 05 사용성 */
.sys-ugrid{display:grid;grid-template-columns:repeat(4,1fr);gap:18px}
.sys-u{background:var(--white);border-radius:var(--r-md);box-shadow:var(--shadow);padding:28px}
.u-fig{display:flex;align-items:center;gap:10px;height:48px;font-size:30px;font-weight:800;letter-spacing:-.04em}
.u-dot{width:14px;height:14px;border-radius:50%;background:var(--green)}
.u-ring{font-family:var(--mono);font-size:15px;font-weight:700;letter-spacing:0;height:36px;padding:0 14px;border-radius:999px;background:var(--ink);color:#fff;display:inline-flex;align-items:center;box-shadow:var(--ring)}
.sys-u h4{margin-top:16px;font-size:17.5px;font-weight:700;letter-spacing:-.02em;line-height:1.4}
.sys-u p{margin-top:6px;font-size:14.5px;color:var(--ink-mid)}

/* 06 AI 문서 · 흐름 (어두운 면 — site.css .ds 위에) */
.sys-dark{padding:72px 0 64px}
.sys-dark .wrap{padding:0 36px}
.sys-fields{display:grid;grid-template-columns:repeat(4,1fr);gap:16px;margin-top:44px}
.sys-fields div{background:#211F1C;border-radius:var(--r-md);padding:22px 24px}
.sys-fields b{display:block;font-size:17px;font-weight:700}
.sys-fields p{margin-top:6px;font-size:14px;color:rgba(255,255,255,.62)}
.sys-fields + .sys-sum{margin-top:16px}
.sys-flow{display:grid;grid-template-columns:.8fr 1fr 1.1fr;gap:20px;background:#211F1C;border-radius:var(--r-md);padding:26px}
.sys-flow-col{display:flex;flex-direction:column;gap:12px}
.sys-flow-k{font-family:var(--mono);font-size:12px;letter-spacing:.06em;color:rgba(255,255,255,.45)}
.sys-ask{background:#fff;color:var(--ink);border-radius:20px 20px 20px 6px;padding:16px 18px;font-size:15.5px;font-weight:600;align-self:flex-start;max-width:100%}
.sys-ask span{display:inline-block}
.sys-trace{list-style:none;display:grid;gap:8px}
.sys-trace li{display:flex;justify-content:space-between;align-items:center;gap:10px;background:rgba(255,255,255,.06);border-radius:12px;padding:10px 14px;font-size:14px;color:rgba(255,255,255,.78)}
.sys-trace code{font-size:12px;color:#FF8A8A;white-space:nowrap}
.c-dialog{background:#fff;color:var(--ink);border-radius:var(--r-lg);box-shadow:var(--elev-overlay);padding:24px}
.c-dialog b{display:block;font-size:19px;font-weight:800;letter-spacing:-.03em}
.c-dialog p{margin-top:6px;font-size:13.5px;color:var(--ink-mid)}
.c-dialog-btns{display:grid;grid-template-columns:1fr 1fr;gap:8px;margin-top:20px}
.c-dialog-btns .c-btn{height:46px;padding:0 12px}

/* 흐름 모션: ① 요청이 타이핑되듯 ② 기준 줄이 하나씩 켜지고 토큰이 붙고 ③ 결과 창이 조립된다 ④ 멈춘 뒤 반복 */
.sys-flow.is-motion .sys-ask{transition:opacity .3s}
.sys-flow.is-motion .sys-ask span{clip-path:inset(0 100% 0 0);transition:clip-path 1s steps(22,end)}
.sys-flow.is-motion.s1 .sys-ask span{clip-path:inset(0 0 0 0)}
.sys-flow.is-motion:not(.s1) .sys-ask{opacity:.35}
.sys-flow.is-motion .sys-trace li{opacity:.3;transition:opacity .4s,background .4s,transform .4s var(--ease)}
.sys-flow.is-motion .sys-trace code{opacity:0;transform:translateX(-8px);transition:opacity .4s,transform .4s var(--ease)}
.sys-flow.is-motion.s2 [data-st="2"],.sys-flow.is-motion.s3 [data-st="3"],.sys-flow.is-motion.s4 [data-st="4"],.sys-flow.is-motion.s5 [data-st="5"]{opacity:1}
.sys-flow.is-motion.s2 [data-st="2"] code,.sys-flow.is-motion.s3 [data-st="3"] code,.sys-flow.is-motion.s4 [data-st="4"] code,.sys-flow.is-motion.s5 [data-st="5"] code{opacity:1;transform:none}
.sys-flow[data-step="2"] [data-st="2"],.sys-flow[data-step="3"] [data-st="3"],.sys-flow[data-step="4"] [data-st="4"],.sys-flow[data-step="5"] [data-st="5"]{background:rgba(224,49,49,.22);transform:translateX(4px)}
.sys-flow.is-motion .c-dialog{opacity:0;transform:translateY(16px) scale(.96);box-shadow:none;border-radius:8px;transition:opacity .45s,transform .6s var(--ease),box-shadow .6s .25s,border-radius .5s .45s}
.sys-flow.is-motion .c-dialog > *{opacity:0;transform:translateY(8px);transition:opacity .4s,transform .4s var(--ease)}
.sys-flow.is-motion.s6 .c-dialog{opacity:1;transform:none;box-shadow:var(--elev-overlay);border-radius:var(--r-lg)}
.sys-flow.is-motion.s6 .c-dialog > *{opacity:1;transform:none}
.sys-flow.is-motion.s6 .c-dialog > :nth-child(1){transition-delay:.2s}
.sys-flow.is-motion.s6 .c-dialog > :nth-child(2){transition-delay:.35s}
.sys-flow.is-motion.s6 .c-dialog > :nth-child(3){transition-delay:.55s}
.sys-flow.is-out,.sys-hero.is-out .sys-code{opacity:.55;transition:opacity .4s}
.is-motion.is-reset,.is-motion.is-reset *{transition:none!important}

@media (prefers-reduced-motion:reduce){.c-spin,.c-caret{animation:none}.c-class,.c-btn{transition:none}}

/* ── 반응형 */
@media (max-width:1100px){
  .sys-principles,.sys-ugrid,.sys-fields{grid-template-columns:1fr 1fr}
  .sys-states-row{grid-template-columns:repeat(3,1fr);row-gap:16px}
  .sys-flow{grid-template-columns:1fr 1fr}
  .sys-flow-col:last-child{grid-column:1/-1}
  .sys-tk{grid-template-columns:40px 1fr 1fr}
  .sys-tk > div{grid-column:2/-1}
  .sys-tk p{grid-column:2}
  .sys-tk p.no{grid-column:3}
  .sys-tk-head{display:none}
  .sys-sgrid{grid-template-columns:1fr}
}
@media (max-width:960px){
  .sys-hero{grid-template-columns:1fr;margin-top:48px;padding:16px;border-radius:30px}
  .sys-hero-pane{min-height:0;padding:60px 22px 26px}
  .sys-sec{padding:64px 0}
  .sys-sec.tint{margin:0 8px;border-radius:30px}
  .sys-fgrid,.sys-fgrid.even,.sys-sum{grid-template-columns:1fr}
  .sys-palette{grid-template-columns:repeat(4,1fr)}
  .ds.sys-dark{margin:0 8px;border-radius:30px;padding:52px 0 44px}
  .sys-dark .wrap{padding:0 26px}
}
@media (max-width:600px){
  .sys-box{padding:22px 18px}
  .sys-principles,.sys-ugrid,.sys-fields,.sys-flow{grid-template-columns:1fr}
  .sys-palette{gap:8px}
  .sys-palette div{padding:8px}
  .sys-palette b{font-size:10.5px}
  .sys-palette span{font-size:9px}
  .sys-tokens{padding:6px 14px}
  .sys-tk{grid-template-columns:36px 1fr;gap:4px 14px}
  .sys-tk i{width:36px;height:36px;grid-row:span 3}
  .sys-tk > div,.sys-tk p,.sys-tk p.no{grid-column:2}
  .sys-tk p{font-size:14px}
  .sys-type div{flex-direction:column;gap:4px}
  .sys-states-row{grid-template-columns:1fr 1fr;padding:18px 12px}
  .app-top{padding:0 18px;gap:12px}
  .app-nav{display:none}
  .app-search{width:auto;flex:1;max-width:170px}
  .app-body{padding:22px 18px 0}
  .app-cards{grid-template-columns:1fr}
  .app-cards .c-class:nth-child(n+2){display:none}
  .sys-dark .wrap{padding:0 18px}
  .sys-code .ln{grid-template-columns:1fr;gap:0}
  .sys-flow{padding:18px}
  .sys-canvas{padding:18px}
}
.sys-sum .ds-card.split{display:grid;grid-template-columns:1.3fr 1fr;gap:28px;align-items:stretch}
.sys-canvas.center{place-content:center;justify-items:center;min-height:180px}
@media (max-width:960px){.sys-sum .ds-card.split{grid-template-columns:1fr}}
.hero.sys-top{padding-top:156px}
.sys-sec:not(.tint) .sys-box{box-shadow:var(--shadow)}

/* 모션 예시 섹션 — 블록과 분리된 독립 구간 */
.fl-sec{background:var(--panel)}
.fl-sec .sec-head p{color:var(--ink-mid)}
.fl-tabs{display:flex;gap:8px;flex-wrap:wrap;margin-bottom:18px}
.fl-tab{height:40px;padding:0 18px;border:0;border-radius:999px;background:var(--white);color:var(--ink-mid);font:600 14px var(--font);cursor:pointer;transition:background .2s,color .2s}
.fl-tab[aria-pressed="true"]{background:var(--ink);color:var(--white)}
.fl-stage{background:var(--ink);border-radius:var(--r-lg);padding:14px}
.fl-stage .sys-flow{min-height:330px}
.fl-pane[hidden]{display:none}
.sys-flow.is-motion .sys-out{opacity:0;transform:translateY(16px) scale(.96);box-shadow:none;border-radius:8px;transition:opacity .45s,transform .6s var(--ease),box-shadow .6s .25s,border-radius .5s .45s}
.sys-flow.is-motion .sys-out > *{opacity:0;transform:translateY(8px);transition:opacity .4s,transform .4s var(--ease)}
.sys-flow.is-motion.s6 .sys-out{opacity:1;transform:none;box-shadow:var(--elev-overlay);border-radius:var(--r-lg)}
.sys-flow.is-motion.s6 .sys-out > *{opacity:1;transform:none}
.sys-flow.is-motion.s6 .sys-out > :nth-child(2){transition-delay:.2s}
.sys-flow.is-motion.s6 .sys-out > :nth-child(3){transition-delay:.35s}
.sys-flow.is-motion.s6 .sys-out > :nth-child(4){transition-delay:.5s}
.c-dialog-btns.one{grid-template-columns:1fr}
.fl-meta{margin-top:0!important}
.fl-row{display:flex;justify-content:space-between;align-items:baseline;margin-top:14px;font-size:14px;color:var(--ink-mid)}
.fl-price{font-size:26px;font-weight:800;letter-spacing:-.03em;color:var(--ink)}
.fl-empty{text-align:center}
.fl-ic{display:block;width:52px;height:52px;margin:0 auto 12px;border-radius:16px;background:var(--panel)}
.fl-label{display:block;font-size:13px;font-weight:700;color:var(--ink-mid)}
.fl-input{display:flex;align-items:center;height:48px;margin-top:8px;padding:0 14px;border-radius:14px;background:#FCEBEB;box-shadow:inset 0 0 0 2px #E03131;font-size:15px;font-weight:600}
.fl-err{display:block;margin-top:8px;font-size:13px;font-weight:700;color:#C22525}