/* 위젯 허브 — 아이폰 세로 화면 1순위. 색은 포켓·출퇴근과 같은 계열로 맞춘다
   (같은 위젯 한 칸에서 번갈아 뜨므로 색이 튀면 다른 앱처럼 보인다). */

:root {
  --bg: #0f1115;
  --card: #171a21;
  --line: #242833;
  --fg: #e8ebf2;
  --dim: #8b93a7;
  --faint: #5b6377;
  --gold: #e0a53c;
  --ok: #3fb950;
  --warn: #d9534f;
}

* { box-sizing: border-box; }

body {
  margin: 0;
  padding: 0 12px calc(16px + env(safe-area-inset-bottom));
  background: var(--bg);
  color: var(--fg);
  font: 15px/1.45 -apple-system, BlinkMacSystemFont, "Apple SD Gothic Neo",
        "Malgun Gothic", system-ui, sans-serif;
  -webkit-text-size-adjust: 100%;
}

/* ── 머리말 ───────────────────────────────────────────────────────────── */

.top { padding: calc(10px + env(safe-area-inset-top)) 0 8px; }
.title { display: flex; align-items: center; gap: 8px; }
.top h1 { margin: 0; font-size: 19px; font-weight: 650; letter-spacing: -.01em; }

.badge {
  padding: 3px 9px; border-radius: 999px;
  background: var(--gold); color: #1a1206;
  font-size: 12px; font-weight: 700;
}
.badge.manual { background: transparent; color: var(--gold); box-shadow: inset 0 0 0 1px var(--gold); }

.mode { font-size: 11px; color: var(--dim); }
.meta {
  display: flex; align-items: center; gap: 10px;
  margin-top: 7px; color: var(--dim); font-size: 11px;
}
.meta #clock { margin-left: auto; font-variant-numeric: tabular-nums; }
.dot { width: 8px; height: 8px; border-radius: 50%; background: var(--dim); }
.dot.live { background: var(--ok); }
.dot.bad { background: var(--warn); }

/* ── 화면 고르기 ──────────────────────────────────────────────────────── */

.picker { display: flex; gap: 6px; overflow-x: auto; padding: 2px 0 6px; }
.picker::-webkit-scrollbar { display: none; }
.picker button {
  flex: 0 0 auto; appearance: none; cursor: pointer;
  border: 1px solid var(--line); border-radius: 9px;
  background: #1e222c; color: var(--dim);
  font: inherit; font-size: 13px; padding: 8px 13px;
}
.picker button.on { background: var(--gold); color: #1a1206; font-weight: 650; border-color: transparent; }
.picker button.auto { border-style: dashed; }

.hint { margin: 0 0 10px; font-size: 11px; color: var(--faint); }

/* ── 현재 화면 (자식 대시보드를 그대로) ───────────────────────────────── */

.frame {
  border: 1px solid var(--line); border-radius: 14px; overflow: hidden;
  background: var(--card); margin-bottom: 12px;
}
.frame iframe {
  display: block; width: 100%; height: 68vh; min-height: 420px;
  border: 0; background: var(--bg);
}

/* ── 시간표 ───────────────────────────────────────────────────────────── */

.panel {
  background: var(--card); border: 1px solid var(--line);
  border-radius: 14px; padding: 12px 14px; margin-bottom: 12px;
}
.panel summary {
  cursor: pointer; font-size: 13px; font-weight: 600; color: var(--dim);
  list-style: none;
}
.panel summary::-webkit-details-marker { display: none; }
.panel summary::before { content: "＋ "; color: var(--gold); }
.panel[open] summary::before { content: "－ "; }

.note { margin: 10px 0 0; font-size: 11px; color: var(--dim); line-height: 1.6; }
.note b { color: var(--fg); }
.note.ok { color: var(--ok); }
.note.bad { color: var(--warn); }
.note code {
  background: #1e222c; padding: 1px 5px; border-radius: 4px; font-size: 10px;
}

.sched { width: 100%; border-collapse: collapse; margin-top: 10px; font-size: 13px; }
.sched th {
  text-align: left; font-size: 10px; font-weight: 500; color: var(--faint);
  padding: 0 6px 4px 0;
}
.sched td { padding: 3px 6px 3px 0; }
.sched input, .sched select, .fb select {
  width: 100%; background: #1e222c; color: var(--fg);
  border: 1px solid var(--line); border-radius: 7px;
  padding: 7px 8px; font: inherit; font-size: 13px;
}
.sched td:nth-child(1), .sched td:nth-child(2) { width: 74px; }
.sched td:last-child { width: 30px; }
.sched .del {
  appearance: none; border: 0; background: transparent; cursor: pointer;
  color: var(--faint); font-size: 16px; padding: 4px;
}
.sched .del:hover { color: var(--warn); }

.btns { display: flex; gap: 8px; align-items: center; margin-top: 12px; flex-wrap: wrap; }
.btns button {
  appearance: none; cursor: pointer; border: 0; border-radius: 9px;
  background: var(--gold); color: #1a1206; font: inherit; font-size: 13px;
  font-weight: 650; padding: 9px 14px;
}
.btns button.ghost {
  background: #1e222c; color: var(--fg); border: 1px solid var(--line); font-weight: 400;
}
.fb { display: flex; align-items: center; gap: 6px; font-size: 12px; color: var(--dim); }
.fb select { width: auto; }

footer {
  display: flex; gap: 10px; align-items: baseline;
  color: var(--faint); font-size: 11px;
}
footer .hint2 { margin-left: auto; }
footer a { color: var(--dim); }
footer .down { color: var(--warn); }
/* Preview uses the Scriptable row counts, columns and dark palette. */
[hidden]{display:none!important}body{max-width:860px;margin:auto;padding-top:18px}.top{margin-bottom:20px}.panel{padding:20px;margin-bottom:18px}h2{font-size:15px;margin:0 0 16px}h2 small{font-weight:400;color:var(--dim);font-size:11px}.section-head{display:flex;justify-content:space-between;align-items:baseline;gap:12px}.section-head select{background:var(--bg);color:var(--fg);border:1px solid var(--line);border-radius:8px;padding:7px}.preview-stage{display:flex;align-items:center;justify-content:center;background:radial-gradient(ellipse at center,#343b48,#20242d);min-height:220px;padding:26px 12px;border-radius:16px;margin-top:12px}.widget{background:#0f1115;border-radius:23px;box-shadow:0 10px 30px #0005;padding:12px 13px;color:#e8eaf0;display:flex;flex-direction:column;overflow:hidden;width:360px;height:172px;max-width:100%;font-size:12px}.widget.small{width:172px;height:172px}.widget.large{height:364px}.widget-head{display:flex;align-items:center;justify-content:space-between;margin-bottom:8px;font-size:10px}.widget-head b{background:#e0a53c;color:#1a1206;padding:2px 6px;border-radius:5px}.widget-head span{color:#8b93a7;font-variant-numeric:tabular-nums}.quote-row{display:flex;gap:6px;align-items:center;height:20px}.quote-name{flex:1;color:#e8eaf0;white-space:nowrap;overflow:hidden;text-overflow:ellipsis;font-weight:500}.quote-price{width:68px;text-align:right;color:#8b93a7;font-size:11px}.quote-pct{width:54px;text-align:right;font-size:12px}.up{color:#f0483e}.down{color:#3d7bf0}.spark{width:52px;height:16px;flex:none}.spark polyline{fill:none;stroke:currentColor;stroke-width:1.6}.widget-stamp{margin-top:auto;color:#8b93a7;font-size:9px;line-height:1.4;font-variant-numeric:tabular-nums}.widget.small .quote-row{height:19px;font-size:11px}.widget.small .quote-pct{width:48px;font-size:11px}.widget.small .widget-stamp{font-size:8px}.widget.large .quote-row{height:26px;font-size:13px}.widget.large .spark{width:62px;height:20px}.widget.large .quote-price{width:74px;font-size:12px}.widget.large .quote-pct{width:58px;font-size:13px}.transit-row{display:flex;gap:5px;align-items:center;height:23px;white-space:nowrap}.transit-row b{font-size:13px}.transit-row .location{color:#8b93a7;font-size:10px;overflow:hidden;text-overflow:ellipsis;flex:1}.transit-row small{font-size:9px}.widget.small .transit-row b{font-size:11px}.warning{color:#e0a53c;font-size:10px}.error{padding:12px 15px;border:1px solid #704130;border-radius:12px;background:#30211c;color:#ffbd98;font-size:13px}.btns a{color:var(--dim);font-size:12px;margin-left:auto}button:disabled{opacity:.4;cursor:default}.timeline{display:flex;overflow-x:auto;gap:5px;padding-bottom:8px}.segment{flex:1 0 100px;border-top:3px solid #424958;padding:9px 7px;background:#1e222c;border-radius:0 0 7px 7px}.segment small{display:block;font-size:10px;color:var(--dim);white-space:nowrap}.segment strong{font-size:12px;display:block;margin-top:5px}.segment.current{border-color:var(--gold)}.sched input,.sched select{min-width:0;padding:7px 2px}.sched td:nth-child(1),.sched td:nth-child(2){width:80px}footer{padding-bottom:20px}footer a{margin-left:auto}.picker button:focus-visible,button:focus-visible,a:focus-visible{outline:2px solid #e0a53c;outline-offset:3px}@media(max-width:440px){body{padding-left:10px;padding-right:10px}.panel{padding:14px}.preview-stage{padding:20px 8px}.quote-price{width:57px}.spark{width:38px}.quote-pct{width:49px}.title{flex-wrap:wrap}.btns a{margin-left:0}.section-head select{max-width:135px}}
#widgetRows>.warning{display:block;font-size:8px;line-height:10px;margin:2px 0;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}.widget-stamp{flex-shrink:0}.widget.medium .quote-row{height:19px}
.symbol-form label{display:block;font-size:12px;color:var(--dim);margin-bottom:6px}.symbol-form>div{display:flex;gap:8px}.symbol-form input{flex:1;min-width:0;background:var(--bg);color:var(--fg);border:1px solid var(--line);border-radius:8px;padding:11px;font:inherit}.symbol-form button,.watch-row button{border:0;border-radius:8px;padding:8px 13px;background:var(--gold);color:#1a1206;cursor:pointer}.watchlist{margin-top:14px}.watch-row{display:flex;align-items:center;gap:10px;padding:10px 0;border-bottom:1px solid var(--line);font-size:12px}.watch-row>span:first-child{flex:1;min-width:0;overflow-wrap:anywhere}.watch-row small{color:var(--dim);font-size:10px}.watch-price{font-variant-numeric:tabular-nums;white-space:nowrap;color:var(--dim)}.symbol-results .watch-row{background:#1e222c;padding:10px;border-radius:8px;margin-top:6px}
.widget-refresh{background:transparent;border:0;color:#8b93a7;font-size:10px;padding:3px;cursor:pointer}

/* Codex: distinguish browser refresh from Scriptable launch. */
.widget-refresh{background:#242833;border-radius:7px;font-size:12px;padding:8px 10px;min-height:36px;color:#e0a53c}

.widget.medium.us-market .quote-row{height:16px;font-size:11px}.widget.medium.us-market .spark{height:12px}.widget.medium.us-market .widget-head{margin-bottom:3px}.search-shortcut{display:inline-block;color:var(--gold);font-size:13px;margin:0 0 12px}#usSearchPanel{scroll-margin-top:20px}