/* =====================================================================
 * NOW WORK 설정 화면 '화면 · 효과' 카드 — nw-settings.css (디자인팀 ui-designer · 2026-11-02)
 * 짝: nw-settings.js. 넣는 곳: index.html CSS 맨 끝 (nw-themes.css → nw-motion.css → nw-settings.css).
 * 색은 앱·테마 토큰만 (괄호 안은 토큰이 없을 때 = 테마 2 라이트 값). 앱 .card 를 같이 달아 테마별 카드 모양(5 = 2px)을 그대로 받음.
 * 누르는 칸: 최소 44px, 테마의 --tap(1·2·4 = 48px, 5 = 56px)을 따름.
 * 칸 폭에 맞춰 배치(@container): 좁은 칸(폰·태블릿 상세 칸 약 324px) = 테마 2열·나머지 한 줄씩,
 *   넓은 칸(620px 이상) = 테마 4열, (760px 이상) = 밝기·움직임·진동 나란히. @container 를 모르는 오래된 WebView 는 좁은 칸 배치 그대로.
 * ===================================================================== */
.nws{container-type:inline-size;--nws-tap:max(44px,var(--tap,48px));color:var(--text,#121829)}
.nws *,.nws *::before,.nws *::after{box-sizing:border-box}
.nws-head{display:flex;align-items:baseline;flex-wrap:wrap;gap:4px 10px;margin:24px 0 10px}
.nws-head h3{margin:0;font-size:16px;font-weight:700}
.nws-now{font-size:13px;color:var(--text3,#5C6680);min-width:0}
:where(.nws-card){background:var(--surface,#fff);border:1px solid var(--line,#D6DCE9);border-radius:var(--radius-card,16px);padding:16px}
.nws-card{display:grid;gap:20px;min-width:0}
.nws-vh{position:absolute!important;width:1px;height:1px;margin:-1px;padding:0;overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap;border:0;opacity:0}
.nws-grp{border:0;margin:0;padding:0;min-width:0;display:grid;gap:8px}
.nws-grp[hidden]{display:none!important}
.nws-lg{padding:0;margin:0 0 2px;font-size:15px;font-weight:700;color:var(--text,#121829);display:flex;flex-wrap:wrap;align-items:baseline;gap:2px 8px}
.nws-sub{font-size:13px;font-weight:500;color:var(--text3,#5C6680)}
.nws-hint{margin:0;font-size:13px;line-height:1.5;color:var(--text3,#5C6680)}
.nws-hint b{color:var(--text,#121829)}
.nws-state{color:var(--text2,#3F4860)}

/* ---- 테마 타일 (라디오 카드) ---- */
.nws-tiles{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:8px}
.nws-tile{display:block;min-width:0;cursor:pointer;-webkit-tap-highlight-color:transparent}
.nws-tb{display:flex;flex-direction:column;gap:7px;height:100%;min-height:var(--nws-tap);padding:10px;border:1px solid var(--line-strong,#7B85A0);border-radius:var(--radius-btn,12px);background:var(--surface,#fff);color:var(--text,#121829);transition:border-color .12s,background-color .12s}
.nws-mini{display:block;position:relative;height:38px;border-radius:6px;background:var(--nws-a);box-shadow:inset 0 0 0 1px rgba(127,127,127,.4);overflow:hidden}
.nws-mini::before{content:"";position:absolute;left:8px;right:8px;top:7px;bottom:7px;border-radius:4px;background:var(--nws-b);box-shadow:0 0 0 1px rgba(127,127,127,.25)}
.nws-mini::after{content:"";position:absolute;left:14px;top:14px;width:42%;height:10px;border-radius:5px;background:var(--nws-c)}
.nws-mini i{position:absolute;right:14px;top:14px;width:10px;height:10px;border-radius:2px;background:var(--nws-d)}
.nws-tn{display:flex;align-items:center;gap:6px;min-width:0;font-size:14px;line-height:1.3}
.nws-tn b{font-weight:700;min-width:0;word-break:keep-all;overflow-wrap:anywhere}
.nws-no{flex:none;display:inline-grid;place-items:center;min-width:20px;height:20px;padding:0 4px;border-radius:5px;border:1px solid var(--line-strong,#7B85A0);font-size:12px;font-weight:700;color:var(--text2,#3F4860);font-variant-numeric:tabular-nums}
.nws-def{display:inline-block;vertical-align:1px;font-size:11px;font-weight:700;color:var(--text2,#3F4860);border:1px solid var(--line,#D6DCE9);border-radius:999px;padding:0 6px;line-height:18px}
/* 고른 표시 = 모양으로도: 빈 동그라미 ○ → 꽉 찬 동그라미 + ✓ */
.nws-ck{flex:none;margin-left:auto;width:20px;height:20px;border-radius:50%;border:2px solid var(--line-strong,#7B85A0);display:inline-grid;place-items:center;font-size:12px;font-weight:900;line-height:1}
.nws-td{font-size:12.5px;line-height:1.45;color:var(--text2,#3F4860);word-break:keep-all;overflow-wrap:anywhere}
.nws-tile input:checked+.nws-tb{border:2px solid var(--pri,#2B45BD);padding:9px;background:var(--pri-soft,#E6EBFB)}
.nws-tile input:checked+.nws-tb .nws-ck{background:var(--pri,#2B45BD);border-color:var(--pri,#2B45BD);color:var(--on-pri,#fff)}
.nws-tile input:checked+.nws-tb .nws-ck::after{content:"✓"}
.nws-tile input:checked+.nws-tb .nws-td{color:var(--text,#121829)}
.nws-tile input:focus-visible+.nws-tb{outline:3px solid var(--focus,var(--pri,#2B45BD));outline-offset:2px}
@media (hover:hover) and (pointer:fine){.nws-tile:hover .nws-tb{border-color:var(--pri,#2B45BD)}}

/* ---- 고르기 칸 (밝기·움직임·진동) ---- */
.nws-seg{display:grid;grid-auto-flow:column;grid-auto-columns:minmax(0,1fr);gap:4px;padding:4px;border:1px solid var(--line-strong,#7B85A0);border-radius:calc(var(--radius-btn,12px) + 4px);background:var(--surface2,#EBEFF7)}
.nws-seg label{display:block;min-width:0;cursor:pointer;-webkit-tap-highlight-color:transparent}
.nws-seg span{display:flex;align-items:center;justify-content:center;gap:6px;min-height:var(--nws-tap);padding:2px 8px;border-radius:var(--radius-btn,12px);font-size:14px;font-weight:600;line-height:1.25;text-align:center;color:var(--text2,#3F4860);transition:background-color .12s,color .12s}
.nws-seg svg{width:18px;height:18px;flex:none}
.nws-seg input:checked+span{background:var(--surface,#fff);color:var(--side-on-fg,var(--pri,#1D2F8F));font-weight:800;box-shadow:inset 0 0 0 2px var(--pri,#2B45BD),var(--elev,none)}
.nws-seg input:checked+span::before{content:"✓";font-weight:900}
.nws-seg input:checked+span svg{display:none}
.nws-seg input:focus-visible+span{outline:3px solid var(--focus,var(--pri,#2B45BD));outline-offset:2px}
@media (hover:hover) and (pointer:fine){.nws-seg label:hover input:not(:checked)+span{color:var(--text,#121829);background:var(--side-hover,rgba(127,127,127,.12))}}

/* ---- 단추 ---- */
.nws-btn{justify-self:start;display:inline-flex;align-items:center;min-height:44px;padding:0 16px;border:1px solid var(--line-strong,#7B85A0);border-radius:var(--radius-btn,12px);background:var(--surface,#fff);color:var(--text,#121829);font:inherit;font-size:14px;font-weight:700;cursor:pointer}
.nws-btn.plain{border-color:var(--line,#D6DCE9);color:var(--text2,#3F4860)}
.nws-btn[hidden]{display:none!important}
.nws-btn:focus-visible{outline:3px solid var(--focus,var(--pri,#2B45BD));outline-offset:2px}
.nws-foot{display:flex;flex-wrap:wrap;align-items:center;gap:6px 12px;padding-top:14px;border-top:1px solid var(--line2,var(--line,#D6DCE9))}
.nws-rest{display:grid;gap:20px}
.nws-missing{padding:12px;border:1px dashed var(--line-strong,#7B85A0);border-radius:12px;font-size:13px;color:var(--text2,#3F4860)}

/* ---- 좁은 칸 (폰 카드 안 약 300px): 밝기 그림은 빼고 글자만, 한 줄 유지 ---- */
@container (max-width:360px){.nws-seg span{padding:2px 4px;gap:3px}.nws-seg svg{display:none}.nws-card{padding:14px}}
/* ---- 넓은 칸 ---- */
@container (min-width:620px){.nws-tiles{grid-template-columns:repeat(4,minmax(0,1fr))}}
@container (min-width:760px){.nws-rest{grid-template-columns:repeat(auto-fit,minmax(220px,1fr));align-items:start}}

/* ---- 테마 5 햇빛 고대비: 선 2px·굵은 글자 (nw-themes.css C절과 같은 규칙) ---- */
:where(html[data-nw-theme="5"]) .nws-tb,:where(html[data-nw-theme="5"]) .nws-seg,:where(html[data-nw-theme="5"]) .nws-btn,:where(html[data-nw-theme="5"]) .nws-no{border-width:2px}
:where(html[data-nw-theme="5"]) .nws-tb{padding:9px}
:where(html[data-nw-theme="5"]) .nws-tile input:checked+.nws-tb{border-width:3px;padding:8px;box-shadow:inset 0 -4px 0 var(--accent,#FFC800)}
:where(html[data-nw-theme="5"]) .nws-seg span{font-size:15px;font-weight:700}
:where(html[data-nw-theme="5"]) .nws-seg input:checked+span{background:var(--side-on);color:var(--side-on-fg);box-shadow:inset 0 0 0 3px var(--pri)}
:where(html[data-nw-theme="5"]) .nws-td,:where(html[data-nw-theme="5"]) .nws-hint{font-size:14px;color:var(--text2)}
:where(html[data-nw-theme="5"]) .nws-lg{font-size:16px;font-weight:800}

@media (prefers-reduced-motion:reduce){.nws-tb,.nws-seg span{transition:none}}
:where(html[data-nw-motion="lite"]) .nws-tb,:where(html[data-nw-motion="lite"]) .nws-seg span{transition:none}