/* ══════════ 지하철 위젯 — 스타일 ═══════════════════════════════════════════
   ★★ 판(위젯 보드)이 정의하는 것은 여기서 다시 정의하지 않는다.
      `.w` `.w-h` `.w-b` `.w-msg` `.w-sk` `.sk` `.sw-row` `.sw-line` `.sw-dir`
      `.sw-t` `.sw-next` `.sw-dest` `.sw-chips` `.dot` 은 **판의 자산**이다
      (talent/디자이너/mockups/portal_widget_board_v1.html).
      → 이 파일은 두 부분뿐이다:
          A. 판에 **없는** 것 = 이 위젯만 쓰는 조각(등록 흐름 2걸음·멈춤 안내·내 방면 표시)
          B. 판이 없을 때를 위한 **시안 전용 폴백** (맨 아래, `.subw-standalone` 안에서만)
      ⛔ A 를 판의 이름으로 짓지 말 것. 판이 나중에 같은 이름을 만들면 서로 덮어쓴다.
   ══════════════════════════════════════════════════════════════════════════ */

/* ═══ A. 이 위젯만 쓰는 조각 (판에 없는 것) ═══════════════════════════════ */

/* 제목 줄의 [역] 버튼 — 편집 화면을 연다. 판의 `.sw-chips` 오른쪽에 붙는다. */
.subw .sw-editbtn{
  font:inherit;font-size:11px;line-height:1;cursor:pointer;flex:none;
  padding:3px 8px;border-radius:999px;
  border:1px solid var(--hs-line,rgba(255,255,255,.18));
  background:transparent;color:var(--hs-ink-lo,rgba(255,255,255,.72))}
.subw .sw-editbtn:hover{background:rgba(255,255,255,.13);color:#fff}
.subw .sw-editbtn:focus-visible{outline:2px solid #00A4EB;outline-offset:2px}

/* ⛔ 방면 고정 별(.sw-pin)은 2026-08-17 에 없앴다 — 방면은 이제 **등록할 때** 정한다.
   조작 지점이 둘이면 어느 쪽이 진짜인지 사람이 알 수 없다. 되살리지 말 것.
   바꾸는 입구는 [역] 버튼 → 등록 목록의 항목 이름을 누르는 것 하나뿐이다. */

/* 펼침 판에서 "이게 내가 등록해 둔 방면"이라는 표시.
   ⚠ 버튼이 아니라 표시다 — 여기서는 바꿀 수 없다(바꾸는 곳은 한 곳뿐이라야 한다). */
.subw .sw-mark{
  flex:none;font-size:10px;font-weight:700;letter-spacing:.02em;
  padding:1px 6px;border-radius:999px;margin-left:6px;
  color:#0B0E13;background:#FFB020}

/* 자동 갱신 멈춤 안내 — 왜 안 도는지 밝힌다.
   조용히 멈춰 있으면 사람은 "고장"으로 읽고, 새로고침을 연타해 예산이 더 탄다. */
.subw .sw-idle{
  display:flex;align-items:center;gap:8px;margin-top:auto;padding-top:7px;
  font-size:11px;color:var(--hs-ink-lo,rgba(255,255,255,.72));opacity:.8}
.subw .sw-idle button{
  font:inherit;font-size:11px;padding:2px 8px;border-radius:999px;cursor:pointer;
  border:1px solid var(--hs-line,rgba(255,255,255,.18));
  background:rgba(255,255,255,.06);color:inherit}
.subw .sw-idle button:hover{background:rgba(255,255,255,.14)}

/* ── 편집 화면 (역 고르기) ──────────────────────────────────────────────
   타일 안에서 열린다 → 판이 준 높이를 넘지 않도록 결과 목록만 스크롤시킨다. */
.subw .sw-editbox{display:flex;flex-direction:column;min-height:0;flex:1;gap:7px}
.subw .sw-mine{list-style:none;margin:0;padding:0;display:flex;flex-wrap:wrap;gap:5px}
.subw .sw-mine li{
  display:flex;align-items:center;gap:2px;font-size:11.5px;
  background:rgba(255,255,255,.13);border-radius:999px;padding:2px 3px 2px 9px}
/* 등록 항목의 이름 — 누르면 방면을 다시 고른다(방향을 바꾸는 유일한 입구).
   ⚠ 누를 수 있다는 것이 보여야 한다 → 밑줄을 점선으로 깔아 둔다. */
.subw .sw-mineb{
  font:inherit;font-size:11.5px;line-height:1.4;background:none;border:0;cursor:pointer;
  color:inherit;padding:1px 0;
  border-bottom:1px dashed var(--hs-line,rgba(255,255,255,.34))}
.subw .sw-mineb:hover{color:#fff;border-bottom-color:currentColor}
.subw .sw-mineb:focus-visible{outline:2px solid #00A4EB;outline-offset:2px}
.subw .sw-del{
  font:inherit;font-size:12px;line-height:1;background:none;border:0;cursor:pointer;
  color:var(--hs-ink-lo,rgba(255,255,255,.72));padding:2px 5px;border-radius:999px}
.subw .sw-del:hover{color:#E05C4A}

/* ── 2걸음: 방면 고르기 ────────────────────────────────────────────────── */
.subw .sw-pickhd{display:flex;align-items:baseline;gap:7px;flex:none}
.subw .sw-back{
  font:inherit;font-size:15px;line-height:1;cursor:pointer;flex:none;
  background:none;border:0;padding:0 4px 0 0;
  color:var(--hs-ink-lo,rgba(255,255,255,.72))}
.subw .sw-back:hover{color:#fff}
.subw .sw-back:focus-visible{outline:2px solid #00A4EB;outline-offset:2px}
.subw .sw-pickn{font-size:13.5px;font-weight:600}
.subw .sw-pickt{font-size:11px;color:var(--hs-ink-lo,rgba(255,255,255,.72))}
/* 그 방면의 다음 차 미리보기 — 고르는 사람이 "이쪽이 맞나"를 바로 안다. */
.subw .sw-picketa{
  flex:none;font-size:11px;font-variant-numeric:tabular-nums;
  color:var(--hs-ink-lo,rgba(255,255,255,.72))}
.subw .sw-search{
  width:100%;box-sizing:border-box;font:inherit;font-size:12.5px;flex:none;
  color:var(--hs-ink,#fff);background:rgba(255,255,255,.10);
  border:1px solid var(--hs-line,rgba(255,255,255,.18));border-radius:8px;padding:6px 10px}
.subw .sw-search::placeholder{color:var(--hs-ink-lo,rgba(255,255,255,.55))}
.subw .sw-search:focus{outline:2px solid #00A4EB;outline-offset:-1px}
.subw .sw-res{
  list-style:none;margin:0;padding:0;flex:1;min-height:0;overflow-y:auto;
  -webkit-overflow-scrolling:touch}
.subw .sw-res li{
  display:flex;align-items:center;gap:7px;padding:5px 0;font-size:12px;
  border-bottom:1px solid rgba(255,255,255,.10)}
.subw .sw-res li:last-child{border-bottom:0}
.subw .sw-resn{flex:none}
.subw .sw-resl{
  font-size:10.5px;color:var(--hs-ink-lo,rgba(255,255,255,.6));
  min-width:0;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
/* 실시간이 없는 역은 고르기 **전에** 알린다 — 등록해 놓고 빈 화면을 보게 두지 않는다. */
.subw .sw-nort{font-size:10.5px;color:#FFB020;flex:none}
.subw .sw-add{
  margin-left:auto;flex:none;font:inherit;font-size:11px;font-weight:600;cursor:pointer;
  padding:3px 9px;border-radius:999px;border:1px solid transparent;
  background:#00A4EB;color:#fff}
.subw .sw-add:disabled{
  background:rgba(255,255,255,.10);color:var(--hs-ink-lo,rgba(255,255,255,.5));cursor:default}
.subw .sw-note{
  margin:0;font-size:10.5px;line-height:1.5;flex:none;
  color:var(--hs-ink-lo,rgba(255,255,255,.6))}

/* ═══ B. 시안 전용 폴백 ════════════════════════════════════════════════════
   판이 없는 곳(시안 파일)에서 타일이 보이게 하는 최소한의 옷이다.
   ⛔ 값은 판 시안에서 **그대로 옮겨 적은 것**이고, 정본은 판이다.
     판에 얹을 때는 `.subw-standalone` 을 안 붙이면 이 절 전체가 죽는다. */
.subw-standalone{
  --hs-ink:#EAF0F6;
  /* ⚠ 판 시안은 보조색을 .68 로 잡고 그 위에 `opacity:.75~.8` 을 **또** 걸어 둔 자리가 있다
     (`.w-h .st` · `.sw-dest`). 두 값이 곱해지면 실효 .51~.54 가 되어, 배경 영상이 밝은
     프레임일 때 **3.64:1 · 3.91:1 로 AA(4.5) 미달**이었다(2026-08-17 계산 실측).
     여기서는 .86 으로 올리고 아래에서 겹치는 opacity 를 걷어냈다.
     ⚠ 이건 시안 폴백의 처치다 — **판의 값은 디자이너가 정한다**(보고에 올렸다). */
  --hs-ink-lo:rgba(234,240,246,.86);
  --hs-line:rgba(255,255,255,.14);
  position:relative;border-radius:14px;overflow:hidden;
  background:rgba(8,11,16,.78);
  border:1px solid var(--hs-line);
  box-shadow:0 10px 30px rgba(0,0,0,.32);
  display:flex;flex-direction:column;color:var(--hs-ink);
  font-family:"Pretendard",-apple-system,"Segoe UI",Roboto,"Malgun Gothic",sans-serif;
  -webkit-font-smoothing:antialiased}
.subw-standalone .w-h{
  flex:none;display:flex;align-items:center;gap:8px;min-height:20px;padding:16px 16px 0;
  font-size:11.5px;font-weight:600;letter-spacing:.02em;color:var(--hs-ink-lo)}
.subw-standalone .w-h .sp{flex:1}
.subw-standalone .w-h .st{
  font-size:10.5px;font-weight:400;font-variant-numeric:tabular-nums}
.subw-standalone .w-h .dot{
  width:6px;height:6px;border-radius:50%;background:#4CC38A;flex:none}
.subw-standalone .w-h .dot.stale{background:#E0A227}
.subw-standalone .w-h .dot.err{background:#E05C4A}
.subw-standalone .w-b{
  flex:1;min-height:0;padding:12px 16px 16px;display:flex;flex-direction:column}
.subw-standalone.stale .w-b{opacity:.62}

.subw-standalone .sw-row{
  display:flex;align-items:center;gap:10px;padding:7px 0;min-height:38px}
.subw-standalone .sw-row + .sw-row{border-top:1px solid rgba(255,255,255,.10)}
.subw-standalone .sw-line{width:8px;height:8px;border-radius:50%;flex:none}
.subw-standalone .sw-dir{
  font-size:12.5px;color:var(--hs-ink-lo);width:96px;flex:none;
  overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
/* 시간이 곧 값이다 → 이 타일에서 가장 큰 글자. 강조는 색이 아니라 크기·굵기다. */
.subw-standalone .sw-t{
  font-size:19px;font-weight:700;font-variant-numeric:tabular-nums;letter-spacing:-.02em;
  flex:none}
.subw-standalone .sw-t u{
  text-decoration:none;font-size:11.5px;font-weight:600;margin-left:2px;opacity:.75}
/* 3분 이내(또는 곧 도착)는 색으로 알린다 — 신호등은 의미 있는 색이다. 색은 하나만 쓴다. */
.subw-standalone .sw-t.soon{color:#FFB020}
.subw-standalone .sw-next{
  font-size:12px;color:var(--hs-ink-lo);font-variant-numeric:tabular-nums;
  margin-left:2px;flex:none}
.subw-standalone .sw-dest{
  margin-left:auto;font-size:11.5px;color:var(--hs-ink-lo);
  overflow:hidden;text-overflow:ellipsis;white-space:nowrap;max-width:35%}
.subw-standalone .sw-chips{display:flex;gap:4px}
.subw-standalone .sw-chips button{
  font:inherit;font-size:11px;padding:2px 8px;border-radius:999px;cursor:pointer;
  border:1px solid var(--hs-line);background:transparent;color:var(--hs-ink-lo)}
.subw-standalone .sw-chips button[aria-pressed="true"]{
  background:rgba(255,255,255,.16);color:#fff;font-weight:600}

/* 빈·실패 상태 — ⛔ 타일을 지우지 않는다. 자리는 그대로, 속만 바꾼다. */
.subw-standalone .w-msg{
  flex:1;display:flex;flex-direction:column;align-items:flex-start;justify-content:center;
  gap:8px;font-size:12.5px;line-height:1.55;color:var(--hs-ink-lo)}
.subw-standalone .w-msg b{font-size:13px;font-weight:600;color:var(--hs-ink)}
.subw-standalone .w-msg button{
  font:inherit;font-size:12px;padding:5px 11px;border-radius:7px;cursor:pointer;
  border:1px solid var(--hs-line);background:rgba(255,255,255,.06);color:var(--hs-ink)}
.subw-standalone .w-msg button:hover{background:rgba(255,255,255,.13)}
/* 로딩 = 뼈대. 시머(반짝임)를 쓰지 않는다 — 움직이는 배경 위의 또 하나의 움직임은 잡음이다. */
.subw-standalone .w-sk{
  flex:1;display:flex;flex-direction:column;gap:10px;justify-content:center}
.subw-standalone .sk{background:rgba(255,255,255,.13);border-radius:5px;height:12px}
.subw-standalone .sk.w7{width:70%} .subw-standalone .sk.w5{width:50%}
.subw-standalone .sk.w9{width:88%}

@media (prefers-reduced-transparency:reduce){ .subw-standalone{background:#0B0E13} }
@media (prefers-reduced-motion:reduce){ .subw *{transition:none !important} }