/* s5x-board.css — s5 창 셋 안쪽(diagram · 수리 r4). 토큰·.ix5x·.st-w = s5x.css. 글은 처음부터 보임 · 움직이는 것 = 고리·그은 줄·막대·선·확인 */
.win{--wb-pad:20px;--wb-py:14px;--wb-c3:160px;--wb-off:.46;
  --wb-strike:3040ms;--wb-gate:3600ms;--wb-rail:2200ms;--wb-res:1800ms;--wb-chk:2400ms;
  position:relative;box-sizing:border-box;min-width:0;display:grid;grid-template-columns:max-content minmax(0, 1fr);
  background:var(--s5x-ink);color:var(--s5x-tx);border:1px solid var(--s5x-l12);border-radius:16px;overflow:clip;
  font-size:16px;letter-spacing:-.01em;text-align:left;word-break:keep-all;overflow-wrap:break-word}
:where(.win) :where(p, ul, ol, h4, fieldset, legend){margin:0;padding:0}
:where(.win) :where(ul, ol){list-style:none}
:where(.win) fieldset{border:0;min-width:0}
.win > *{grid-column:1 / -1;min-width:0}
.win b{font-weight:600}
/* 창 머리 한 줄 = 문서 이름 + 칸 색인(폰은 고리 없이 이름·밑줄) */
.win > .win-top{grid-column:1;grid-row:1;display:flex;align-items:center;min-height:44px;padding:0 8px 0 var(--wb-pad);border-bottom:1px solid var(--s5x-l12)}
.win > .ix5x{grid-column:2;grid-row:1;grid-template-columns:repeat(4, max-content);justify-content:end;column-gap:20px;padding:0 var(--wb-pad) 0 0}
.win-doc{font-size:14px;font-weight:600;line-height:1.4;color:var(--s5x-tx3);white-space:nowrap}
.win-h{display:flex;flex-wrap:wrap;align-items:baseline;justify-content:space-between;column-gap:16px;row-gap:2px;width:100%;min-height:52px;padding:13px var(--wb-pad);border-bottom:1px solid var(--s5x-l12)}
.win legend.win-h{float:left}
.win .units > legend ~ *{clear:both}
.win-h h4{font-size:16px;font-weight:600}
.win-note{font-size:15px;color:var(--s5x-tx3)}
.win .cols, .win .row, .win .res{display:grid;grid-template-columns:20px minmax(0, 1fr) var(--wb-c3);column-gap:16px;align-items:center;padding-inline:var(--wb-pad)}
.win .cols{min-height:36px;font-size:14px;font-weight:600;line-height:1.4;color:var(--s5x-tx3)}
.win .cols > :first-child{grid-column:2}
.win .row, .win .res{position:relative;isolation:isolate;min-height:var(--s5x-row, 52px);padding-block:var(--wb-py);border-top:1px solid var(--s5x-l08);scroll-margin-top:calc(var(--hd-h, 64px) + 24px)}
.win .item{min-width:0;font-size:16px}
.win .rec{min-width:0;font-size:15px;color:var(--s5x-tx3)}
.win .txt{grid-column:2 / -1;display:grid;grid-template-columns:subgrid;align-items:center;min-width:0}
/* 고리(줄·결과·역·확인 칩 — 색인 띠 고리는 s5x.css 부품 그대로) */
.win :is(.row, .res, .stn, .chk) > .ring{position:relative;display:block;width:12px;height:12px;border:1px dashed var(--s5x-tx3);border-radius:999px;background:var(--s5x-ink)}
.win :is(.row, .res) > .ring{justify-self:center;align-self:start;margin-top:6px}
.win :is(.row, .stn) > .ring::after{content:'';position:absolute;inset:-1px;border:1px solid var(--s5x-tx);border-radius:999px}
/* 들를지 1차 검토에서 정하는 역(목록 밖 사이트만 · stations.ts other) = 점선 그대로 */
.win .stn:is([data-k="hosting"], [data-k="registrar"]) > .ring::after{content:none}
.win .row::before, .win .rail::before{content:'';position:absolute;inset:0;z-index:-1;border-left:2px solid var(--s5x-on);background:var(--s5x-on-bg);opacity:0}
.win .rail{position:relative;isolation:isolate;scroll-margin-top:calc(var(--hd-h, 64px) + 24px);padding:16px var(--wb-pad) 20px;border-top:1px solid var(--s5x-l12)}
.win .row:target::before, .win .rail:target::before,
.s5x:has(a.ref[href="#s5x-u-copy"]:is(:hover, :focus-visible)) #s5x-u-copy::before,
.s5x:has(a.ref[href="#s5x-rail"]:is(:hover, :focus-visible)) #s5x-rail::before,
.s5x:has(a.ref[href="#s5x-a6"]:is(:hover, :focus-visible)) #s5x-a6::before{opacity:1}
/* 그은 줄 = 글자 폭만(A 일곱째 · B 뺀 단위) — 기록 칸·빈 자리는 긋지 않음. 폰(두 줄 글)은 text-decoration */
.win :is(.is-out, .u) .item{position:relative;justify-self:start}
.win :is(.is-out, .u) .item::after{content:'';position:absolute;left:0;right:0;top:12px;height:1px;background:var(--s5x-tx);transform:scaleX(0);transform-origin:0 50%}
.win .is-out{opacity:var(--wb-off)}
.win .is-out .item::after{transform:none}
.win .is-out .rec{color:var(--s5x-tx)}
/* A 근거 창 */
.win .gate{position:relative;isolation:isolate;padding:18px var(--wb-pad) 20px calc(var(--wb-pad) + 36px);border-top:1px solid var(--s5x-l12)}
.win :is(.gate, .res)::before{content:'';position:absolute;inset:0 auto 0 0;width:2px;background:var(--s5x-on);transform-origin:50% 0}
.win :is(.gate, .res)::after{content:'';position:absolute;inset:0;z-index:-1;background:var(--s5x-on-bg)}
.win .gate-l{font-weight:600}
.win .bins{display:flex;flex-wrap:wrap;gap:8px;margin:12px 0 14px}
.win .bins > li{display:inline-flex;align-items:center;min-height:32px;padding:0 12px;border:1px solid var(--s5x-l24);border-radius:999px;font-size:14px;font-weight:600;line-height:1.3}
.win .gate-f{font-size:15px;line-height:1.6;color:var(--s5x-tx2)}
/* B 범위 창 — 맨 앞 = 엔진 색 점 · 끝 = 스위치(체크가 줄 전체를 덮음 = 누름 줄 전체) */
.win .u{--wb-c3:36px;cursor:pointer}
.win .u > .dot{grid-column:1;justify-self:center;align-self:start;width:8px;height:8px;margin-top:8px;border-radius:999px;background:var(--dc)}
.win .u > .item{grid-column:2}
.win .u > .cb{position:absolute;inset:0;z-index:1;width:100%;height:100%;margin:0;border:0;background:none;appearance:none;cursor:pointer}
.win .u > .sw{grid-column:3;justify-self:end;position:relative;box-sizing:border-box;width:36px;height:20px;border:1px solid var(--s5x-tx);border-radius:999px;background:var(--s5x-tx)}
.win .u > .sw::after{content:'';position:absolute;top:3px;left:3px;width:12px;height:12px;border-radius:999px;background:var(--s5x-ink);transform:translateX(16px)}
.win .u > .cb:not(:checked) + .sw{border-style:dashed;border-color:var(--s5x-tx3);background:none}
.win .u > .cb:not(:checked) + .sw::after{background:var(--s5x-tx3);transform:none}
.win .u > .cb:focus-visible{outline:2px solid var(--s5x-on);outline-offset:-3px} /* 포커스 = 줄 전체(덮개 입력) */
.win .u .aux{display:inline-block;margin-left:8px;font-size:15px;color:var(--s5x-tx3);white-space:nowrap}
.win .u[data-k="orig"]{--dc:var(--s5x-e1)} .win .u[data-k="copy"]{--dc:var(--s5x-e2)} .win .u[data-k="search"]{--dc:var(--s5x-e3)}
.win .u[data-k="cache"]{--dc:var(--s5x-e4)} .win .u[data-k="repost"]{--dc:var(--s5x-e5)}
.win .u:has(.cb:not(:checked)) > :not(.cb){opacity:var(--wb-off)} /* 줄은 1(포커스 테 대비) */
.win .u:has(.cb:not(:checked)) .item::after{transform:none}
.win .u:has(.cb:not(:checked)) .aux{color:var(--s5x-tx)}
.win .scope-sum{display:flex;gap:12px;padding:14px var(--wb-pad) 16px calc(var(--wb-pad) + 36px);border-top:1px solid var(--s5x-l12);font-size:15px;line-height:1.6;color:var(--s5x-tx2)}
.win .scope-sum b{flex:none;color:var(--s5x-tx)}
.win .sl{display:flex;flex-wrap:wrap;min-width:0;overflow:clip}
.win .sl > span{margin:0 20px 0 -20px;padding-left:20px;position:relative;white-space:nowrap}
.win .sl > span::before{content:'·';content:'·' / '';position:absolute;left:0;width:20px;text-align:center}
.units:has(#s5x-u-orig .cb:not(:checked)) .sl [data-k="orig"], .units:has(#s5x-u-copy .cb:not(:checked)) .sl [data-k="copy"],
.units:has(#s5x-u-search .cb:not(:checked)) .sl [data-k="search"], .units:has(#s5x-u-cache .cb:not(:checked)) .sl [data-k="cache"],
.units:has(#s5x-u-repost .cb:not(:checked)) .sl [data-k="repost"]{display:none}
.win .rail-h{padding-left:36px;margin-bottom:14px;font-size:14px;font-weight:600;line-height:1.4;color:var(--s5x-tx3)}
.win .stns-w{position:relative;padding-left:4px}
.win .rail-line{position:absolute;left:10px;top:5px;width:calc((100% - 4px) * .75);height:1px;background:var(--s5x-l24)}
.win .stns{position:relative;display:grid;grid-template-columns:repeat(4, minmax(0, 1fr))}
.win .stn{display:flex;flex-direction:column;align-items:flex-start;gap:10px;min-width:0;padding-right:8px}
.win .stn > span{font-size:15px;font-weight:600;line-height:1.4}
.win:has(#s5x-u-search .cb:not(:checked)):has(#s5x-u-cache .cb:not(:checked)) .stn[data-k="search"]{opacity:var(--wb-off)}
.win .rail-n{margin-top:12px;padding-left:36px;font-size:15px;line-height:1.6;color:var(--s5x-tx2)}
/* C 기간·비용 창 */
.win .var .item b{display:block}
.win .var .how{display:block;margin-top:2px;font-size:15px;color:var(--s5x-tx2)}
.win a.ref{justify-self:start;display:inline-flex;align-items:center;min-height:44px;white-space:nowrap;font-size:14px;font-weight:600;line-height:1.35;color:var(--s5x-tx);text-decoration:none}
.win a.ref > span{display:inline-flex;align-items:center;min-height:32px;padding:0 10px;border:1px solid var(--s5x-l24);border-radius:999px}
.win a.ref:focus-visible{outline:2px solid var(--s5x-on);outline-offset:3px;border-radius:999px}
.s5x:has(#s5x-u-copy .cb:not(:checked)) .var[data-k="copy"] :is(.ring, b, .how){opacity:var(--wb-off)}
.s5x:has(#s5x-u-copy .cb:not(:checked)) .var[data-k="copy"] .how{color:var(--s5x-tx)}
.win .res{border-top-color:var(--s5x-l12)}
.win .res > .ring{border-style:solid;border-color:var(--s5x-on)}
.win .res :is(.item, .rec){font-weight:600;color:var(--s5x-tx)}
.win .chks{padding:16px var(--wb-pad) 20px calc(var(--wb-pad) + 36px);border-top:1px solid var(--s5x-l08)}
.win .chks > p{font-size:15px;line-height:1.6;color:var(--s5x-tx2)}
.win .chks > ul{display:flex;flex-wrap:wrap;gap:8px;margin-top:12px}
.win .chk{display:inline-flex;align-items:center;gap:8px;min-height:36px;padding:0 14px 0 9px;border:1px solid var(--s5x-l24);border-radius:999px;font-size:14px;font-weight:600;line-height:1.3;white-space:nowrap}
.win .chk > .ring{width:16px;height:16px}
.win .chk > .ring::after{content:'';position:absolute;inset:-1px;border-radius:999px;background:var(--s5x-on)}
.win .chk svg{position:absolute;z-index:1;inset:1px;width:12px;height:12px;overflow:visible}
.win .chk svg path{fill:none;stroke:var(--s5x-ink);stroke-width:1.5px;stroke-linecap:round;stroke-linejoin:round;vector-effect:non-scaling-stroke}
@media (hover:hover) {
  .win a.ref:hover{color:var(--s5x-on)}
  .win a.ref:hover > span{border-color:var(--s5x-on)}
  .win .u:hover .item b{color:var(--s5x-on)}
}
/* 좁은 창 — 수리(10-24): 화면 폭 대신 창 받침 폭(@container s5w · 1180↑ 세 칸 한 줄 창 397px · 폰 창 284~300px) */
@container s5w (max-width:560px) {
  .win > *{--wb-pad:16px}
  .win .row, .win .res{--wb-py:12px}
  .win a.ref{min-height:48px}
  .win .gate{padding-block:14px 16px}
  .win .bins{margin:10px 0 12px}
  .win > .ix5x{column-gap:12px}
  .win .ix5x > li > .ring{display:none}
  .win .cols{display:none}
  .win .row:not(.u, .var){--wb-c3:88px}
  .win .res{--wb-c3:max-content}
  .win .var{grid-template-columns:20px max-content minmax(0, 1fr);grid-template-areas:'r n c' '. h h';row-gap:2px}
  .win .var > .ring{grid-area:r}
  .win .var > .item{display:contents}
  .win .var .item b{grid-area:n}
  .win .var .how{grid-area:h;margin-top:0}
  .win .var > .ref{grid-area:c;margin:-12px 0 -12px -8px}
  /* 두 줄로 접히는 글도 끝까지 긋기 */
  .win :is(.is-out, .u) .item::after{content:none}
  .win :is(.is-out, .u) .item{text-decoration:line-through 1px transparent}
  .win .is-out .item, .win .u:has(.cb:not(:checked)) .item{text-decoration-color:var(--s5x-tx)}
  .win.is-armed:not(.is-run) .is-out .item{text-decoration-color:transparent}
  /* 요청 차례 = 데스크톱과 같은 가로 선(역 넷 한 줄) */
  .win .rail-h{margin-bottom:12px}
  .win .stn{padding-right:4px}
  .win .stn > span{font-size:14px}
  .win .rail-n{margin-top:10px}
  /* 폰: 줄 밖 글 묶음(관문·범위 줄·요청 차례·확인)은 고리 열 왼쪽 끝에서 시작(36 들여쓰기 0 → 줄 수 줄임) */
  .win :is(.gate, .scope-sum, .chks){padding-left:var(--wb-pad)}
  .win :is(.rail-h, .rail-n){padding-left:0}
  .win .chks > ul{gap:6px}
  .win .chk{padding:0 10px 0 8px;gap:6px}
}
/* 시퀀스 — 무장(js · 화면 아래 · 모션 허용)일 때만 시작 판 */
.win.is-armed:not(.is-run) .row > .ring::after, .win.is-armed:not(.is-run) :is(.gate, .res)::after{opacity:0}
.win.is-armed:not(.is-run) .is-out{opacity:1}
.win.is-armed:not(.is-run) .is-out .item::after{transform:scaleX(0)}
.win.is-armed:not(.is-run) :is(.gate, .res)::before{transform:scaleY(0)}
.win.is-armed:not(.is-run) .u .dot{transform:scale(.6)}
.win.is-armed:not(.is-run) .rail-line{clip-path:inset(0 100% 0 0)}
.win.is-armed:not(.is-run) .stn > span{opacity:.56}
.win.is-armed:not(.is-run) .chk > .ring::after{transform:scale(0)}
@media (prefers-reduced-motion:no-preference) {
  .win .row{--d:calc(var(--i, 0) * var(--s5x-beat))}
  .win.is-run .rail-line{clip-path:inset(0);transition:clip-path var(--s5x-draw) linear var(--wb-rail)}
  .win.is-run .row > .ring::after{transition:opacity 150ms linear calc(var(--d) + 320ms)}
  .win.is-run .is-out{transition:opacity 300ms linear var(--wb-strike)}
  .win.is-run .is-out .item::after{transition:transform 400ms var(--ease-ui) var(--wb-strike)}
  .win.is-run :is(.gate, .res)::before{transition:transform 300ms var(--ease-ui) var(--t0)}
  .win.is-run :is(.gate, .res)::after{transition:opacity 300ms linear var(--t0)}
  .win .gate{--t0:var(--wb-gate)} .win .res{--t0:var(--wb-res)}
  .win.is-run .u .dot{transition:transform 200ms var(--ease-ui) calc(var(--d) + 40ms)}
  .win.is-run .stn > span{transition:opacity 150ms linear calc(var(--wb-rail) + var(--k, 0) * var(--s5x-draw) / 3)}
  .win .chk{--t:var(--wb-chk)}
  .win .chk:nth-child(2){--t:calc(var(--wb-chk) + var(--s5x-c1))}
  .win .chk:nth-child(3){--t:calc(var(--wb-chk) + var(--s5x-c1) + var(--s5x-c2))}
  .win.is-run .chk > .ring::after{transition:transform 200ms var(--ease-ui) var(--t)}
  .win :is(.u > :not(.cb), .var :is(.ring, b, .how), .stn), .win :is(.row, .rail)::before{transition:opacity 150ms linear}
  .win .u .item::after, .win .u > .sw::after{transition:transform 150ms var(--ease-ui)}
  .win .u .item b, .win a.ref{transition:color 150ms linear}
  .win a.ref > span{transition:border-color 150ms linear}
}
@media (prefers-reduced-motion:no-preference) {
  @container s5w (max-width:560px) {
    .win.is-run .is-out .item{transition:text-decoration-color 400ms linear var(--wb-strike)}
    .win .u .item{transition:text-decoration-color 150ms linear}
  }
}
html.is-still .win *, html.is-still .win *::before, html.is-still .win *::after{transition:none !important}