/* 현재 시간 전체화면 — 무대(미리보기 = 전체 화면 요소)·콘솔·카드 두 장. 무대 색은 화면 색 고정값(사이트 테마와 무관), 숫자 크기는 무대 컨테이너 단위(cqw·cqh). */
.fsc-work{container:fsc / inline-size;overflow:hidden}

/* ---------- 무대 ---------- */
.fsc-stage{--sbg:#0d0a07;--sfg:#f7ead1;--shand:#ea7a40;position:relative;container-type:size;width:100%;aspect-ratio:var(--ar,1.7778);display:flex;align-items:center;justify-content:center;overflow:hidden;background:var(--sbg);color:var(--ufg,var(--sfg));filter:brightness(var(--bri,1));user-select:none;-webkit-user-select:none}
.fsc-stage[data-theme="white"]{--sbg:#faf6ee;--sfg:#1a1208;--shand:#c44a00}
.fsc-stage[data-theme="amber"]{--sbg:#000;--sfg:#ffa940;--shand:#ff6a3d}
.fsc-stage[data-theme="green"]{--sbg:#030d07;--sfg:#5ee59a;--shand:#e8fff1}
.fsc-face{display:flex;flex-direction:column;align-items:center;justify-content:center;min-width:0;max-width:100%}
.fsc-stage:not(.no-band) .fsc-face{margin-bottom:12cqh}

.fsc-dig,.fsc-measure{margin:0;font-family:var(--sans);font-weight:700;font-variant-numeric:tabular-nums lining-nums;letter-spacing:var(--gap,0);line-height:1;white-space:nowrap}
.fsc-dig{font-size:calc(min(var(--fw,20) * 1cqw, var(--fh,46) * 1cqh) * var(--sc,1))}
.fsc-measure{position:absolute;left:0;top:0;font-size:100px;visibility:hidden;pointer-events:none}
.fsc-ap{font-size:.3em;font-weight:650;letter-spacing:0;opacity:.85}
.fsc-ap[data-pos="pre"]{margin-right:.35em}
.fsc-ap[data-pos="post"]{margin-left:.35em}
.fsc-dig .fsc-ap:empty{display:none}
.fsc-min{width:calc(min(var(--fw,20) * 1cqw, var(--fh,46) * 1cqh) * var(--sc,1) * var(--em,4.4));height:max(2px,.8cqh);margin-top:2.4cqh;border-radius:99px;overflow:hidden;background:color-mix(in srgb,currentColor 18%,transparent)}
.fsc-min i{display:block;height:100%;background:currentColor;opacity:.75;transform-origin:left center;transform:scaleX(0)}
.fsc-stage[data-style="analog"] .fsc-dig,.fsc-stage[data-style="analog"] .fsc-min,.fsc-stage.no-sec .fsc-min{display:none}

.fsc-ana{display:none;width:calc(min(88cqw, var(--ah,64) * 1cqh) * var(--sc,1));height:auto;aspect-ratio:1;overflow:visible}
.fsc-stage[data-style="analog"] .fsc-ana{display:block}
.fsc-ana .rim{fill:color-mix(in srgb,currentColor 5%,transparent);stroke:currentColor;stroke-opacity:.3;stroke-width:1.2}
.fsc-ana line{stroke:currentColor;stroke-linecap:round}
.fsc-ana .mn{stroke-width:1;opacity:.45}
.fsc-ana .mj{stroke-width:2.6}
.fsc-ana text{fill:currentColor;font-family:var(--sans);font-weight:700;text-anchor:middle;dominant-baseline:central}
.fsc-ana .nums text{font-size:15px}
.fsc-ana .ap{font-size:10px;font-weight:650;opacity:.7}
.fsc-ana .hh line{stroke-width:6.5}
.fsc-ana .mh line{stroke-width:4}
.fsc-ana .sh{transform-box:view-box;transform-origin:100px 100px}
.fsc-ana .sh line{stroke:var(--shand);stroke-width:1.6}
.fsc-ana .sh circle{fill:var(--shand)}
.fsc-ana .pin{fill:var(--sbg)}
.fsc-stage.no-sec .fsc-ana .sh{display:none}

.fsc-date{margin:2.6cqh 0 0;font-family:var(--sans);font-weight:600;font-size:calc(min(4.6cqw, 6.4cqh) * (.55 + .45 * var(--sc,1)));line-height:1.2;opacity:.78;white-space:nowrap}
.fsc-stage.no-date .fsc-date{display:none}

/* 하루 띠: 0~24시 중 지금 위치 */
.fsc-day{position:absolute;left:7cqw;right:7cqw;bottom:5cqh;display:grid;gap:max(3px,.9cqh);font-family:var(--sans)}
.fsc-stage.no-band .fsc-day{display:none}
.fsc-daytxt{justify-self:end;max-width:100%;overflow:hidden;text-overflow:ellipsis;font-size:max(10px,min(2.6cqh,3.4cqw));font-weight:600;opacity:.72;font-variant-numeric:tabular-nums;white-space:nowrap}
.fsc-band{position:relative;height:max(4px,min(1.3cqh,1.7cqw));border-radius:99px;background:color-mix(in srgb,currentColor 16%,transparent)}
.fsc-band .fill{position:absolute;inset:0;border-radius:inherit;background:currentColor;opacity:.5;transform-origin:left center;transform:scaleX(0)}
.fsc-band .now{position:absolute;top:50%;left:0;width:max(8px,min(2.4cqh,3cqw));height:max(8px,min(2.4cqh,3cqw));border-radius:50%;background:currentColor;box-shadow:0 0 0 max(2px,.5cqh) var(--sbg);transform:translate(-50%,-50%)}
.fsc-ax{position:relative;height:1.3em;font-size:max(9px,min(2.1cqh,2.8cqw));opacity:.5;font-variant-numeric:tabular-nums}
.fsc-ax span{position:absolute;top:0;transform:translateX(-50%)}
.fsc-ax span:nth-child(1){left:0;transform:none}
.fsc-ax span:nth-child(2){left:25%}
.fsc-ax span:nth-child(3){left:50%}
.fsc-ax span:nth-child(4){left:75%}
.fsc-ax span:nth-child(5){left:100%;transform:translateX(-100%)}

/* 전체 화면: 조작 줄은 움직이면 보이고 2.6초 뒤 숨는다 */
.fsc-stage:fullscreen{width:100%;height:100%;aspect-ratio:auto}
.fsc-stage:-webkit-full-screen{width:100%;height:100%;aspect-ratio:auto}
.fsc-stage.is-full{position:fixed;inset:0;z-index:1000;width:100vw;height:100vh;height:100dvh;aspect-ratio:auto}
html.fsc-noscroll{overflow:hidden}
.fsc-stage.is-idle{cursor:none}
.fsc-fbar{position:absolute;top:3cqh;left:3%;right:3%;width:fit-content;margin:0 auto;display:none;flex-wrap:wrap;align-items:center;justify-content:center;gap:6px 14px;padding:8px 12px;border:1px solid color-mix(in srgb,currentColor 22%,transparent);border-radius:10px;background:color-mix(in srgb,var(--sbg) 88%,currentColor);font-family:var(--sans);font-size:13px}
.fsc-stage.is-on.is-ui .fsc-fbar{display:flex}
.fsc-fbg{display:inline-flex;align-items:center;gap:4px}
.fsc-fbg small{margin-right:2px;font-size:12px;opacity:.75}
.fsc-fbar button{min-width:40px;height:40px;padding:0 10px;border:1px solid color-mix(in srgb,currentColor 30%,transparent);border-radius:8px;background:transparent;color:inherit;font:600 14px var(--sans);cursor:pointer}
.fsc-fbar button:hover{background:color-mix(in srgb,currentColor 12%,transparent)}
.fsc-fbar button:focus-visible{outline:2px solid currentColor;outline-offset:2px}
.fsc-fbs{font-size:12px;opacity:.75}
.fsc-fbs:empty{display:none}
@container (max-width:520px){ .fsc-fbar{gap:6px 10px;padding:6px 8px} .fsc-fbs{flex-basis:100%;text-align:center} }

/* ---------- 주 조작 줄 ---------- */
.fsc-main{display:flex;flex-wrap:wrap;align-items:center;gap:10px 14px;padding:14px 18px;border-bottom:1px solid var(--soft)}
.fsc-fullbtn kbd{margin-left:2px;padding:1px 6px;border:1px solid color-mix(in srgb,var(--on-fill) 45%,transparent);border-radius:3px;font:700 11px var(--mono)}
.fsc-style button{height:var(--v2-ctl);padding:0 16px}
.fsc-hint{flex:1 1 220px;margin:0;font-family:var(--sans);font-size:12.5px;line-height:1.55;color:var(--muted)}

/* ---------- 콘솔 ---------- */
.fsc-con{display:grid;grid-template-columns:minmax(0,1.15fr) minmax(0,1fr);gap:18px 26px;padding:16px 18px;border-bottom:1px solid var(--soft)}
.fsc-fields{display:grid;gap:14px;align-content:start}
.fsc-fields .v2-label{display:block;margin:0 0 6px}
.fsc-sws{display:flex;flex-wrap:wrap;gap:10px 16px}
.fsc-sws .v2-switch:has(input:disabled){opacity:.45;cursor:not-allowed}
#fscTheme .sw{display:inline-block;width:12px;height:12px;margin-right:6px;border-radius:50%;vertical-align:-1px;box-shadow:0 0 0 1px rgba(127,127,127,.55)}
#fscTheme [data-v="black"] .sw{background:radial-gradient(circle,#f7ead1 0 32%,#0d0a07 36%)}
#fscTheme [data-v="white"] .sw{background:radial-gradient(circle,#1a1208 0 32%,#faf6ee 36%)}
#fscTheme [data-v="amber"] .sw{background:radial-gradient(circle,#ffa940 0 32%,#000 36%)}
#fscTheme [data-v="green"] .sw{background:radial-gradient(circle,#5ee59a 0 32%,#030d07 36%)}
.fsc-sls{display:grid;gap:12px;align-content:start}
.fsc-sl{display:grid;grid-template-columns:74px minmax(0,1fr) 48px;align-items:center;gap:10px}
.fsc-sl .v2-label{margin:0}
.fsc-sl input[type="range"]{width:100%;min-width:0;margin:0;accent-color:var(--fill)}
.fsc-sl output{font:600 12.5px var(--sans);font-variant-numeric:tabular-nums;text-align:right;color:var(--ink)}
.fsc-col{grid-template-columns:74px auto minmax(0,1fr)}
.fsc-col input[type="color"]{width:46px;height:30px;padding:2px;border:1px solid var(--line);border-radius:var(--radius);background:var(--paper);cursor:pointer}
.fsc-col .v2-btn{justify-self:start}

/* ---------- 카드: 읽히는 거리 | 시계 점검 ---------- */
.fsc-cards{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1fr)}
.fsc-card{min-width:0;padding:16px 18px}
.fsc-card + .fsc-card{border-left:1px solid var(--soft)}
#fscScreen{width:100%;height:var(--v2-ctl);padding:0 10px;border:1px solid var(--line);border-radius:var(--radius);background:var(--paper);color:var(--ink);font:600 14px var(--sans)}
.fsc-dbar{position:relative;height:14px;margin:16px 0 4px;border-radius:2px;background:var(--wash);overflow:hidden}
.fsc-dbar i{position:absolute;top:0;bottom:0;left:0;width:0;transition:width 400ms cubic-bezier(.2,.7,.2,1)}
.fsc-dbar .min{background:color-mix(in srgb,var(--fill) 30%,transparent)}
.fsc-dbar .rec{z-index:1;background:var(--fill)}
.fsc-dax{position:relative;height:16px;font:500 11px var(--sans);color:var(--muted);font-variant-numeric:tabular-nums}
.fsc-dax span{position:absolute;top:0;transform:translateX(-50%);white-space:nowrap}
.fsc-dax span:nth-child(1){left:0;transform:none}
.fsc-dax span:nth-child(2){left:25%}
.fsc-dax span:nth-child(3){left:50%}
.fsc-dax span:nth-child(4){left:75%}
.fsc-dax span:nth-child(5){left:100%;transform:translateX(-100%)}
.fsc-dtxt{margin:10px 0 0;font-family:var(--sans);font-size:13.5px;line-height:1.65}
.fsc-ctxt{min-height:3.1em;margin:6px 0 8px;font-family:var(--sans);font-size:14px;font-weight:650;line-height:1.55}
.fsc-cline{position:relative;height:48px;margin:0 4px 8px}
.fsc-cline::before{content:"";position:absolute;left:0;right:0;top:20px;height:2px;background:var(--line)}
.fsc-cline .band{position:absolute;top:15px;left:50%;width:0;height:12px;border-radius:2px;background:var(--accent-wash);transition:left 400ms cubic-bezier(.2,.7,.2,1),width 400ms cubic-bezier(.2,.7,.2,1)}
.fsc-cline .srv{position:absolute;top:12px;left:50%;width:2px;height:18px;background:var(--ink);transform:translateX(-50%)}
.fsc-cline .dev{position:absolute;top:21px;left:50%;width:12px;height:12px;border-radius:50%;background:var(--accent);transform:translate(-50%,-50%);transition:left 400ms cubic-bezier(.2,.7,.2,1)}
.fsc-cline span{position:absolute;font:500 11px var(--sans);color:var(--muted);white-space:nowrap;font-variant-numeric:tabular-nums}
.fsc-cline .l,.fsc-cline .r,.fsc-cline .c{top:32px}
.fsc-cline .lo,.fsc-cline .hi{top:0}
.fsc-cline .l,.fsc-cline .lo{left:0}
.fsc-cline .r,.fsc-cline .hi{right:0}
.fsc-cline .c{left:50%;transform:translateX(-50%)}
.fsc-cacts{display:flex;flex-wrap:wrap;align-items:center;gap:10px 16px}
.fsc-cacts .v2-switch:has(input:disabled){opacity:.45;cursor:not-allowed}
.fsc-tz{margin:12px 0 0;font:500 12px var(--sans);color:var(--muted)}

@container fsc (max-width:640px){
  .fsc-stage{aspect-ratio:4 / 3}
  .fsc-con,.fsc-cards{grid-template-columns:minmax(0,1fr)}
  .fsc-card + .fsc-card{border-top:1px solid var(--soft);border-left:0}
}
@container fsc (max-width:420px){
  .fsc-main,.fsc-con,.fsc-card{padding-right:14px;padding-left:14px}
  .fsc-sl{grid-template-columns:66px minmax(0,1fr) 44px}
  .fsc-col{grid-template-columns:66px auto minmax(0,1fr)}
}
@media (prefers-reduced-motion:reduce){
  .fsc-dbar i,.fsc-cline .band,.fsc-cline .dev{transition:none}
}