/* ============================================================================
   공통 컴포넌트 — 모든 화면이 함께 쓴다
   색은 전부 tokens.css의 변수를 참조한다. 여기에 색을 직접 쓰지 않는다.
   ========================================================================= */

*, *::before, *::after { box-sizing: border-box; }

body {
  margin: 0;
  font-family: var(--font-ui);
  font-size: var(--fs-body);
  line-height: 1.6;
  background: var(--bg);
  color: var(--txt);
  -webkit-font-smoothing: antialiased;
}

/* 숫자는 어디서든 등폭·자릿수 정렬 */
.num, .metric-v, td.num, .price {
  font-family: var(--font-num);
  font-variant-numeric: tabular-nums;
  letter-spacing: -.01em;
}

a { color: var(--accent); text-decoration: none; }
a:hover { text-decoration: underline; }

:focus-visible {
  outline: 2px solid var(--accent);
  outline-offset: 2px;
  border-radius: 4px;
}

/* ── 레이아웃: 좌측 품목 레일 + 본문 ─────────────────── */
.shell {
  display: grid;
  grid-template-columns: var(--rail-w) minmax(0, 1fr);
  gap: var(--sp-5);
  max-width: var(--content-max);
  margin: 0 auto;
  /* 하단 여백을 넉넉히 — 모바일 브라우저는 주소창·네비게이션 바가
     화면 아래를 덮으므로 여백이 없으면 마지막 내용이 가려진다.
     safe-area-inset은 노치·홈 인디케이터가 있는 기기용. */
  padding: var(--sp-4);
  padding-bottom: calc(var(--sp-6) * 2 + env(safe-area-inset-bottom, 0px));
  align-items: start;
}

.rail {
  position: sticky;
  top: var(--sp-4);
  background: var(--surface);
  border: 1px solid var(--line);
  border-radius: var(--r-lg);
  padding: var(--sp-3);
}

.rail-label {
  font-size: var(--fs-xs);
  color: var(--txt-3);
  text-transform: uppercase;
  letter-spacing: .06em;
  margin: 0 0 var(--sp-2);
  padding: 0 var(--sp-2);
}

/* 품목 버튼 — 활성 항목은 그 품목의 악센트로 칠한다 */
.item-btn {
  display: flex;
  align-items: center;
  gap: var(--sp-2);
  width: 100%;
  padding: 10px 12px;
  margin-bottom: var(--sp-1);
  background: transparent;
  border: 1px solid transparent;
  border-radius: var(--r-sm);
  color: var(--txt-2);
  font: inherit;
  font-size: var(--fs-body);
  text-align: left;
  cursor: pointer;
  transition: background var(--motion), color var(--motion);
}
.item-btn:hover { background: var(--surface-2); color: var(--txt); }
.item-btn[aria-current="true"] {
  background: var(--accent);
  color: var(--accent-ink);
  font-weight: 650;
}
/* 품목 색 점 — 비활성일 때 그 품목의 색을 미리 보여준다 */
.item-dot {
  width: 8px; height: 8px; border-radius: 50%;
  background: var(--dot, var(--txt-3));
  flex: none;
}
.item-btn[aria-current="true"] .item-dot { background: currentColor; }

.rail-foot {
  margin-top: var(--sp-3);
  padding-top: var(--sp-3);
  border-top: 1px solid var(--line-soft);
  display: flex; align-items: center; gap: var(--sp-2);
  flex-wrap: wrap;
}

/* ── 헤더 ─────────────────────────────────────────────── */
.page-head { margin-bottom: var(--sp-4); }
.page-title {
  font-size: var(--fs-display);
  font-weight: 750;
  letter-spacing: -.02em;
  margin: 0;
  display: flex; align-items: baseline; gap: var(--sp-3);
  flex-wrap: wrap;
}
/* 제목 앞의 얇은 악센트 막대 — 품목 색이 흐르는 자리 */
.page-title::before {
  content: ""; width: 4px; height: 1.1em; border-radius: 2px;
  background: var(--accent); flex: none; align-self: center;
}
.page-sub { color: var(--txt-3); font-size: var(--fs-sm); margin-top: var(--sp-1); }

/* ── 카드 ─────────────────────────────────────────────── */
.card {
  background: var(--surface);
  border: 1px solid var(--line);
  border-radius: var(--r-lg);
  padding: var(--sp-4);
  margin-bottom: var(--sp-4);
}
.card > h2 {
  font-size: var(--fs-title);
  font-weight: 700;
  margin: 0 0 var(--sp-3);
  padding-bottom: var(--sp-2);
  border-bottom: 1px solid var(--line-soft);
  display: flex; align-items: center; gap: var(--sp-2);
}
/* 제목 안에서 스크립트로 채우는 자리 —
   빈 span에도 gap이 걸려 버튼이 글자에 붙어 보인다.
   내용이 있을 때만 자리를 차지하게 한다. */
.card > h2 > span:empty,
.card > h3 > span:empty { display: none; }
.card > h2 .seg,
.card > h3 .seg { margin-left: var(--sp-1); }

.card > h3 {
  font-size: var(--fs-body);
  font-weight: 650;
  margin: var(--sp-4) 0 var(--sp-2);
  padding-left: var(--sp-2);
  border-left: 3px solid var(--accent);
  color: var(--txt);
  display: flex; align-items: center; gap: var(--sp-2);
}
.card > h3:first-of-type { margin-top: 0; }
.card:last-child { margin-bottom: 0; }   /* 컨테이너 padding과 중복 방지 */

/* ── 수치 그리드 ──────────────────────────────────────── */
.metrics {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(132px, 1fr));
  gap: var(--sp-2);
}
.metric {
  background: var(--surface-2);
  border-radius: var(--r-md);
  padding: var(--sp-3);
}
.metric-k { font-size: var(--fs-xs); color: var(--txt-3); margin-bottom: 2px; }
.metric-v {
  font-size: var(--fs-metric);
  font-weight: 700;
  line-height: 1.15;
}
.metric-n { font-size: var(--fs-xs); color: var(--txt-3); margin-top: 2px; }
.up { color: var(--up); } .down { color: var(--down); } .flat { color: var(--flat); }

/* ── 칩 ───────────────────────────────────────────────── */
.chip {
  display: inline-flex; align-items: center; gap: 6px;
  padding: 4px 10px;
  border-radius: 999px;
  border: 1px solid var(--line);
  background: var(--surface-2);
  color: var(--txt-2);
  font-size: var(--fs-xs);
  white-space: nowrap;
}
.chip.g { color: var(--up);   border-color: var(--up-soft);   background: var(--up-soft); }
.chip.r { color: var(--down); border-color: var(--down-soft); background: var(--down-soft); }
.chip.a { color: var(--accent); border-color: var(--accent); background: transparent; }

/* ── 대응 상태 배너 ───────────────────────────────────── */
.action {
  display: flex; align-items: center; gap: var(--sp-4);
  flex-wrap: wrap;
  padding: var(--sp-4);
  border-radius: var(--r-lg);
  border: 1px solid var(--line);
  background: var(--surface);
  border-left: 4px solid var(--st, var(--flat));
  margin-bottom: var(--sp-4);
}
.action-state { font-size: 1.5rem; font-weight: 800; color: var(--st, var(--txt)); letter-spacing: -.01em; }
.action-body { flex: 1; min-width: 220px; }
.action-detail { color: var(--txt); margin-bottom: 6px; }
.act-관망      { --st: var(--st-watch); }
.act-임박      { --st: var(--st-near); }
.act-임박경계  { --st: var(--st-edge); }
.act-발동      { --st: var(--st-fire); }

/* ── 표 ───────────────────────────────────────────────── */
table { width: 100%; border-collapse: collapse; font-size: var(--fs-sm); }
th {
  text-align: left; font-weight: 600; color: var(--txt-3);
  font-size: var(--fs-xs); text-transform: uppercase; letter-spacing: .04em;
  padding: 8px 10px; border-bottom: 1px solid var(--line);
}
td { padding: 9px 10px; border-bottom: 1px solid var(--line-soft); }
tbody tr:last-child td { border-bottom: none; }
tbody tr:hover { background: var(--surface-2); }
td.num, th.num { text-align: right; }

/* ── 폼 ───────────────────────────────────────────────── */
input, select, textarea, button {
  font: inherit;
  border-radius: var(--r-sm);
  border: 1px solid var(--line);
  padding: 9px 11px;
  background: var(--surface-2);
  color: var(--txt);
}
input:focus, select:focus, textarea:focus { border-color: var(--accent); outline: none; }
button {
  background: var(--accent); color: var(--accent-ink);
  border: none; font-weight: 650; cursor: pointer;
  transition: filter var(--motion);
}
button:hover { filter: brightness(1.08); }
button.sec { background: var(--surface-2); color: var(--txt); border: 1px solid var(--line); }
button:disabled { opacity: .5; cursor: not-allowed; }

.row { display: flex; gap: var(--sp-2); align-items: center; flex-wrap: wrap; }
.muted { color: var(--txt-3); font-size: var(--fs-sm); }
.warn  { color: var(--warn); }

/* ── 테마 토글 ────────────────────────────────────────── */
.theme-toggle {
  display: inline-flex; align-items: center; justify-content: center;
  width: 32px; height: 32px; padding: 0;
  background: var(--surface-2); color: var(--txt-2);
  border: 1px solid var(--line); border-radius: var(--r-sm);
  cursor: pointer;
}
.theme-toggle:hover { color: var(--txt); background: var(--surface); }

/* ── 빈 상태 ──────────────────────────────────────────── */
.empty { text-align: center; padding: var(--sp-6) var(--sp-4); }
.empty h2 { font-size: var(--fs-title); margin: 0 0 var(--sp-2); border: none; padding: 0; }
.empty p { color: var(--txt-3); margin: 0; }

/* ── 안내 배너 ────────────────────────────────────────── */
.notice {
  padding: 11px 15px;
  border-radius: var(--r-md);
  border: 1px solid color-mix(in srgb, var(--warn) 35%, transparent);
  background: color-mix(in srgb, var(--warn) 10%, transparent);
  color: var(--warn);
  font-size: var(--fs-sm);
  margin-bottom: var(--sp-4);
}

/* ── 차트 ─────────────────────────────────────────────── */
.chart-box { position: relative; }
.chart-note { color: var(--txt-3); font-size: var(--fs-xs); margin: var(--sp-2) 0 0; }

/* ── 모바일 ───────────────────────────────────────────── */
@media (max-width: 860px) {
  .shell {
    grid-template-columns: 1fr; gap: var(--sp-3);
    padding: var(--sp-3);
    padding-bottom: calc(var(--sp-6) * 2.5 + env(safe-area-inset-bottom, 0px));
  }
  .rail {
    position: static;
    display: flex; align-items: center; gap: var(--sp-2);
    flex-wrap: wrap; padding: var(--sp-2);
  }
  .rail-label { display: none; }
  .item-btn { width: auto; margin: 0; padding: 8px 14px; }
  .rail-foot { margin: 0 0 0 auto; padding: 0; border: none; }
  .page-title { font-size: 1.4rem; }
  .metric-v { font-size: 1.35rem; }
}


/* ── 상품 레일: 상태를 함께 보여주는 형태 ─────────────────
   상품을 눌러봐야만 상태를 아는 구조로는 비교가 안 된다.
   레일에서 가격·대응상태를 함께 읽을 수 있게 한다. */
.item-btn.rich {
  display: block;
  padding: 10px 12px;
}
.item-btn.rich .top {
  display: flex; align-items: center; gap: var(--sp-2);
  margin-bottom: 3px;
}
.item-btn.rich .nm { flex: 1; min-width: 0; overflow: hidden; text-overflow: ellipsis;
                     white-space: nowrap; }
.item-btn.rich .px {
  font-family: var(--font-num); font-variant-numeric: tabular-nums;
  font-size: var(--fs-sm); color: var(--txt-2);
}
.item-btn[aria-current="true"] .px { color: inherit; }
.item-btn.rich .st {
  font-size: var(--fs-xs); color: var(--txt-3);
  display: flex; align-items: center; gap: 5px;
}
.item-btn[aria-current="true"] .st { color: inherit; opacity: .85; }
/* 상태 점 — 대응 단계를 색으로 */
.st-dot { width: 6px; height: 6px; border-radius: 50%; background: var(--flat); flex: none; }
.st-관망 { background: var(--st-watch); }
.st-임박 { background: var(--st-near); }
.st-임박경계 { background: var(--st-edge); }
.st-발동 { background: var(--st-fire); }

/* 키보드 힌트 — 마찰 없는 이동 */
.kbd {
  font-family: var(--font-num); font-size: 10px;
  padding: 1px 5px; border-radius: 4px;
  border: 1px solid var(--line); color: var(--txt-3);
  background: var(--bg-sunken);
}
.item-btn[aria-current="true"] .kbd { border-color: currentColor; color: inherit; }

@media (max-width: 860px) {
  .item-btn.rich { padding: 8px 12px; }
  .item-btn.rich .st { display: none; }   /* 좁은 화면에선 이름·가격만 */
}


/* ── 표시 밀도 ────────────────────────────────────────────
   간결 모드에서는 부가 정보를 감춘다. 핵심 판단에 필요한 것만 남긴다. */
/* 간결히 — 판단에 바로 쓰이는 것만 남긴다.
   원자료 성격의 카드(분석 데이터 요약·논평·Timing Array)와
   카드 안의 설명 문구를 접는다. 근거를 파고들 때 '자세히'로 편다. */
[data-density="compact"] .detail-only { display: none !important; }
[data-density="compact"] .chart-note { display: none; }
[data-density="compact"] .card > p.muted:first-of-type { display: none; }
[data-density="detail"]  .compact-only { display: none !important; }

/* 상세 모드에서는 여백을 조금 줄여 더 많은 정보가 한 화면에 들어오게 */
[data-density="detail"] .card { padding: var(--sp-3); }
[data-density="detail"] td { padding: 6px 9px; }
[data-density="detail"] .metric { padding: 10px; }


/* ── 하단 여백 ────────────────────────────────────────────
   모바일 브라우저는 주소창·네비게이션 바가 화면 아래를 덮는다.
   여백이 없으면 마지막 카드가 가려져 읽을 수 없다.
   shell을 쓰는 화면은 .shell에서, 그 외 화면은 각자 body에서 처리한다.
   (공용 body 규칙을 두면 화면별 인라인 CSS와 순서 충돌이 생긴다) */
main > :last-child, .shell > main > :last-child { margin-bottom: var(--sp-5); }


/* ── Timing Array 히트맵 ──────────────────────────────────
   행=모델, 열=시간 단위. 셀 농도는 그 시점 활동의 '강도'다.

   주의: 색을 방향으로 읽으면 안 된다.
   Aggregate·L-Wave·Empirical·Long Term·Panic·Volatility의 색은
   앞 막대보다 크거나 작다는 뜻일 뿐 상승/하락이 아니다.
   방향 의미를 갖는 것은 Trading Cycle과 Direction Change뿐이다. */
.heat { width: 100%; border-collapse: separate; border-spacing: 2px; font-size: var(--fs-xs); }
.heat th { padding: 4px 6px; font-size: 10px; color: var(--txt-3); border: none;
           text-transform: none; letter-spacing: 0; white-space: nowrap; }
.heat th.model { text-align: left; width: 116px; }
.heat td { padding: 0; border: none; }
.heat .cell {
  height: 22px; border-radius: 3px; cursor: default;
  background: var(--surface-2);
  display: flex; align-items: center; justify-content: center;
  font-family: var(--font-num); font-size: 9px; color: var(--txt-3);
}
/* 강도 — 농도로만 나타낸다(방향 아님) */
.heat .cell[data-h="1"] { background: color-mix(in srgb, var(--txt-3) 14%, transparent); }
.heat .cell[data-h="2"] { background: color-mix(in srgb, var(--accent) 22%, transparent); }
.heat .cell[data-h="3"] { background: color-mix(in srgb, var(--accent) 42%, transparent); }
.heat .cell[data-h="4"] { background: color-mix(in srgb, var(--accent) 65%, transparent);
                          color: var(--txt); }
.heat .cell[data-h="5"] { background: var(--accent); color: var(--accent-ink); font-weight: 700; }
/* Trading Cycle만 방향 의미를 갖는다 */
.heat .cell.tc-red    { background: color-mix(in srgb, var(--down) 55%, transparent); color:#fff }
.heat .cell.tc-up     { background: color-mix(in srgb, var(--up) 55%, transparent); color:#fff }
.heat .cell.tc-yellow { background: color-mix(in srgb, var(--warn) 60%, transparent); color:#1a1200 }
.heat .today { outline: 2px solid var(--accent); outline-offset: -2px; }
.heat-wrap { overflow-x: auto; }
.heat-legend { display: flex; gap: var(--sp-3); flex-wrap: wrap; align-items: center;
               margin-top: var(--sp-2); font-size: var(--fs-xs); color: var(--txt-3); }
.heat-legend .sw { display: inline-block; width: 12px; height: 12px; border-radius: 3px;
                   vertical-align: -2px; margin-right: 4px; }


/* ── 도움말 ───────────────────────────────────────────────
   용어를 모른 채로는 화면을 읽을 수 없다. 필요할 때만 꺼내 본다. */
.help-i {
  display: inline-flex; align-items: center; justify-content: center;
  width: 16px; height: 16px; margin-left: 6px;
  border-radius: 50%; border: 1px solid var(--line);
  background: var(--surface-2); color: var(--txt-3);
  font-size: 10px; font-weight: 700; cursor: pointer; flex: none;
  font-family: var(--font-ui);
}
.help-i:hover { color: var(--accent); border-color: var(--accent); }
.help-back {
  position: fixed; inset: 0; z-index: 90;
  background: rgba(0,0,0,.55); display: flex;
  align-items: center; justify-content: center; padding: var(--sp-4);
}
.help-box {
  background: var(--surface); border: 1px solid var(--line);
  border-radius: var(--r-lg); box-shadow: var(--shadow);
  max-width: 520px; width: 100%; max-height: 80vh; overflow: auto;
  padding: var(--sp-5);
}
.help-box h3 { margin: 0 0 var(--sp-3); font-size: var(--fs-title); border: none; padding: 0; }
.help-box p { color: var(--txt-2); line-height: 1.7; margin: 0 0 var(--sp-3); }
.help-box .src { color: var(--txt-3); font-size: var(--fs-xs); margin-top: var(--sp-4);
                 padding-top: var(--sp-3); border-top: 1px solid var(--line-soft); }


/* ── 달력 보기 ────────────────────────────────────────────
   타이밍 타겟이 달의 어디에 놓이는지, 며칠 뒤인지 한눈에 보기 위한 것.
   목록은 순서를 보여주지만 '간격'은 달력이라야 읽힌다. */
.cal { display: grid; grid-template-columns: repeat(7, 1fr); gap: 3px; }
.cal .dow {
  text-align: center; font-size: 10px; color: var(--txt-3);
  padding: 2px 0 4px;
}
.cal .dow.sun { color: var(--down); }
.cal .dow.sat { color: var(--st-watch); }
.cal .day {
  min-height: 46px; border-radius: var(--r-sm);
  background: var(--surface-2); padding: 4px 5px;
  display: flex; flex-direction: column; gap: 2px;
}
.cal .day.empty { background: transparent; }
.cal .day .d {
  font-family: var(--font-num); font-size: 10px; color: var(--txt-3);
  display: flex; align-items: center; justify-content: space-between;
}
/* 어느 시간대의 타겟인지 — D/W/M */
.tfb {
  font-family: var(--font-num); font-size: 9px; font-weight: 700;
  color: var(--accent); letter-spacing: .5px;
}
.ev-d .tfb { margin-left: 5px; }
.cal .day.today { outline: 2px solid var(--accent); outline-offset: -2px; }
.cal .day.today .d { color: var(--accent); font-weight: 700; }
/* 그날의 무게 — 겹친 모델이 많을수록 짙게 */
.cal .day[data-w="1"] { background: color-mix(in srgb, var(--accent) 14%, transparent); }
.cal .day[data-w="2"] { background: color-mix(in srgb, var(--accent) 30%, transparent); }
.cal .day[data-w="3"] { background: color-mix(in srgb, var(--accent) 50%, transparent); }
.cal .tag {
  font-size: 9px; line-height: 1.3; padding: 1px 4px; border-radius: 3px;
  background: var(--surface); color: var(--txt-2); white-space: nowrap;
  overflow: hidden; text-overflow: ellipsis;
}
.cal .tag.dc { background: color-mix(in srgb, var(--st-near) 30%, transparent); color: var(--txt); }
.cal .tag.pc { background: color-mix(in srgb, var(--down) 30%, transparent); color: var(--txt); }
.cal .tag.ag { background: color-mix(in srgb, var(--accent) 40%, transparent); color: var(--txt); }
.cal-month { font-weight: 650; margin: var(--sp-3) 0 var(--sp-2); font-size: var(--fs-sm); }
@media (max-width: 560px) {
  .cal .day { min-height: 38px; padding: 3px; }
  .cal .tag { font-size: 8px; }
}


/* ── 카드 배치 조작 ───────────────────────────────────────
   평소에는 눈에 띄지 않게 두고, 카드에 마우스를 올릴 때만 드러낸다.
   자주 쓰는 기능이 아니므로 화면을 어지럽히지 않는 편이 낫다. */
/* 배치 도구는 항상 카드 제목의 맨 오른쪽에 온다.
   카드마다 위치가 달라지면 찾는 데 시간이 걸린다. */
.card-tools { margin-left: auto; order: 99; display: flex; gap: 2px;
              opacity: 0; transition: opacity var(--motion); }
.card:hover .card-tools, .card-tools:focus-within { opacity: 1; }
.ct {
  width: 22px; height: 22px; padding: 0; border-radius: 5px;
  background: var(--surface-2); color: var(--txt-3);
  border: 1px solid var(--line); font-size: 11px; line-height: 1; cursor: pointer;
}
.ct:hover { color: var(--txt); border-color: var(--accent); }
.hidden-bar {
  display: flex; align-items: center; gap: var(--sp-2); flex-wrap: wrap;
  padding: var(--sp-3); margin-bottom: var(--sp-4);
  background: var(--surface-2); border-radius: var(--r-md);
  font-size: var(--fs-sm);
}
/* 터치 기기에서는 항상 보이게 — 호버가 없다 */
@media (hover: none) {
  .card-tools { opacity: 1; }
}


/* ── 시점 집중도 표 ───────────────────────────────────────
   제목과 값의 정렬을 맞춘다. 숫자 열은 오른쪽, 막대 열은 왼쪽.
   막대는 고정 폭 트랙 안에서 자라게 해 행마다 길이 비교가 된다. */
.conc { width: 100%; font-size: var(--fs-sm); }
.conc th { white-space: nowrap; }
.conc td { vertical-align: middle; }
.conc th.num, .conc td.num { text-align: right; }
.conc th.bar-col, .conc td.bar-col { text-align: left; width: 42%; }
.conc td:last-child, .conc th:last-child { text-align: left; }
/* 공개 화면 — 시점과 집중도 둘뿐이라 막대가 대부분을 차지해야 균형이 맞는다.
   날짜 열은 글자 폭만큼만 두고 나머지를 막대에 준다. */
.conc-pub th.num, .conc-pub td.num { width: 1%; white-space: nowrap;
                                     padding-right: var(--sp-3); }
.conc-pub th.bar-col, .conc-pub td.bar-col { width: 70%; }

.conc tr.top td { background: color-mix(in srgb, var(--accent) 12%, transparent); }
.conc tr.top td:first-child { font-weight: 700; color: var(--accent); }

/* 트랙 — 모든 행에서 같은 길이의 바탕. 막대만 비율로 자란다 */
.conc-track {
  display: inline-block; vertical-align: middle;
  width: calc(100% - 36px); min-width: 60px; height: 8px;
  background: var(--surface-2); border-radius: 4px; overflow: hidden;
  margin-right: 6px;
}
.conc-bar {
  display: block; height: 100%; border-radius: 4px;
  background: var(--accent); min-width: 3px;
}
.conc-v {
  font-family: var(--font-num); font-variant-numeric: tabular-nums;
  font-size: var(--fs-xs); color: var(--txt-3);
  display: inline-block; width: 26px; text-align: right; vertical-align: middle;
}


/* ── 세그먼트 버튼 ────────────────────────────────────────
   눌린 쪽이 한눈에 보여야 한다. 색만 살짝 바꾸면 어느 쪽이 켜졌는지
   헷갈린다 — 배경·글자색·굵기·그림자를 함께 준다. */
.seg {
  display: inline-flex; border: 1px solid var(--line);
  border-radius: var(--r-sm); overflow: hidden; flex: none;
  background: var(--surface-2);
}
.seg-b {
  background: transparent; color: var(--txt-3); border: none; border-radius: 0;
  padding: 6px 16px; font-size: var(--fs-sm); font-weight: 500;
  cursor: pointer; transition: background var(--motion), color var(--motion);
  position: relative;
}
.seg-b + .seg-b { border-left: 1px solid var(--line); }
.seg-b:hover:not([aria-pressed="true"]) { color: var(--txt); background: var(--surface); }
.seg-b[disabled] { opacity: .4; cursor: default; }

/* 켜진 쪽 — 강조색 배경에 진한 글자, 살짝 들린 느낌 */
.seg-b[aria-pressed="true"] {
  background: var(--accent); color: var(--accent-ink);
  font-weight: 700; box-shadow: inset 0 -2px 0 rgba(0, 0, 0, .18);
}
.seg-b[aria-pressed="true"]:hover { background: var(--accent); }


/* 표 사이에 끼운 현재가 줄 — 값이 아니라 기준선이므로 다르게 보인다 */
tr.now td {
  background: color-mix(in srgb, var(--accent) 10%, transparent);
  border-top: 1px solid var(--accent);
  border-bottom: 1px solid var(--accent);
  font-weight: 600;
}
tr.now td:first-child { color: var(--accent); }


/* 트리거 표식 — 전환점과 나란히 놓이므로 색으로 갈라 본다 */
.chip.t {
  background: color-mix(in srgb, var(--warn) 22%, transparent);
  color: var(--warn);
  border-color: color-mix(in srgb, var(--warn) 40%, transparent);
}


.rmap td{font-family:var(--font-num);font-variant-numeric:tabular-nums;
  text-align:right;white-space:nowrap}
.rmap td.faint{opacity:.42}

.nowrow td{background:color-mix(in srgb,var(--accent) 14%,transparent);
  border-top:1px solid var(--accent);border-bottom:1px solid var(--accent);
  text-align:center;font-weight:650;font-family:var(--font-num)}

/* 태그를 여러 개 늘어놓는 자리 — 시간 타겟처럼 값이 여럿일 때 */
.chips { display: flex; flex-wrap: wrap; gap: 4px; margin: var(--sp-2) 0; }

/* ── 레벨 태그 ────────────────────────────────────────────
   성격마다 색을 달리해 훑을 때 바로 갈리게 한다. 파스텔로 옅게 두어
   숫자를 가리지 않는다 — 태그는 값을 거드는 것이지 주인공이 아니다.
   시간대는 짧을수록 옅고 길수록 진하다(무게 차이). */
.tag {
  display: inline-block; padding: 1px 7px; margin-right: 4px;
  border-radius: 4px; font-family: var(--font-ui);
  font-size: 10.5px; font-weight: 600; line-height: 1.6;
  border: 1px solid transparent; white-space: nowrap;
}
/* 기본은 어두운 화면 — 배경을 낮추고 글자를 밝게 둔다 */
.tag.tf-daily   { background:#16394b; color:#9fd4ee; border-color:#245a76 }
.tag.tf-weekly  { background:#173d2c; color:#9fd9ba; border-color:#255e44 }
.tag.tf-monthly { background:#2b2752; color:#bdb4ee; border-color:#403a78 }
.tag.t-trg      { background:#4a3113; color:#f0c088; border-color:#6d4820 }
/* 트리거도 시간대마다 무게가 다르다. 주황 계열 안에서 짙기를 달리한다 —
   전환점(파랑·초록·보라)과는 색으로 갈리고, 시간대는 짙기로 갈린다. */
.tag.t-trg.tf-daily   { background:#4a3113; color:#f0c088; border-color:#6d4820 }
.tag.t-trg.tf-weekly  { background:#573611; color:#f6c88e; border-color:#7d5220 }
.tag.t-trg.tf-monthly { background:#66380c; color:#ffd199; border-color:#8f5a1c }
.tag.t-fib      { background:#3d2c3f; color:#d6b3d8; border-color:#59415c }

/* 밝은 화면 — 파스텔 배경에 짙은 글자 */
[data-theme="light"] .tag.tf-daily   { background:#cfe8f7; color:#1c4a63; border-color:#a9d4ec }
[data-theme="light"] .tag.tf-weekly  { background:#cfe6d8; color:#1f5138; border-color:#a8d2bb }
[data-theme="light"] .tag.tf-monthly { background:#d8d4ef; color:#3a3273; border-color:#bab3e0 }
[data-theme="light"] .tag.t-trg      { background:#f8dcc4; color:#7a4310; border-color:#ecc09a }
[data-theme="light"] .tag.t-trg.tf-weekly  { background:#f7d2ad; color:#6b3a0b; border-color:#e6b183 }
[data-theme="light"] .tag.t-trg.tf-monthly { background:#f4c795; color:#5c3007; border-color:#dfa268 }
[data-theme="light"] .tag.t-fib      { background:#eee0ef; color:#5f3a62; border-color:#ddc6de }

/* 시스템이 밝은 화면이고 따로 지정하지 않았을 때 */
@media (prefers-color-scheme: light) {
  :root:not([data-theme]) .tag.tf-daily   { background:#cfe8f7; color:#1c4a63; border-color:#a9d4ec }
  :root:not([data-theme]) .tag.tf-weekly  { background:#cfe6d8; color:#1f5138; border-color:#a8d2bb }
  :root:not([data-theme]) .tag.tf-monthly { background:#d8d4ef; color:#3a3273; border-color:#bab3e0 }
  :root:not([data-theme]) .tag.t-trg      { background:#f8dcc4; color:#7a4310; border-color:#ecc09a }
  :root:not([data-theme]) .tag.t-fib      { background:#eee0ef; color:#5f3a62; border-color:#ddc6de }
}

/* 겹친 것이 많을수록 진하게 — 단단한 자리가 훑을 때 바로 잡힌다.
   색으로 방향을 말하지 않는다. 농도는 '얼마나 겹쳤나'일 뿐이다. */
.rmap tr.lv.d2 td { background: color-mix(in srgb, var(--txt-3) 6%, transparent); }
.rmap tr.lv.d3 td { background: color-mix(in srgb, var(--txt-3) 12%, transparent); }
.rmap tr.lv.d4 td { background: color-mix(in srgb, var(--txt-3) 18%, transparent); }
.rmap tr.lv.d5 td { background: color-mix(in srgb, var(--txt-3) 24%, transparent); }
.rmap tr.lv.faint td { opacity: .5; }
.rmap tr.lv td:first-child { white-space: nowrap; }
.rmap td .chip { margin-right: 4px; }

/* 황금비율 표식 — 참고치라 가장 옅게 */
.chip.f {
  background: color-mix(in srgb, var(--txt-3) 18%, transparent);
  color: var(--txt-3);
  border-color: color-mix(in srgb, var(--txt-3) 30%, transparent);
}

/* ── 전환점 지도 표 ───────────────────────────────────────
   한 칸에 값·트리거 표식·거리가 함께 들어간다.
   한 줄로 이으면 "59.6108.07%"처럼 붙어 읽히지 않으므로 줄을 나눈다. */
.rmap td.num { line-height: 1.35; padding-top: 6px; padding-bottom: 6px; }
.rmap .val { display: block; }
.rmap .dist {
  display: block;                    /* 값 아래 줄로 */
  color: var(--txt-3); font-size: var(--fs-xs);
  font-variant-numeric: tabular-nums; margin-top: 2px;
}
.rmap .trig {
  display: inline-block; margin-left: 6px; padding: 0 5px;
  border-radius: 4px; font-family: var(--font-ui); font-size: 10px;
  font-weight: 600; vertical-align: 1px;
  background: color-mix(in srgb, var(--warn) 24%, transparent);
  color: var(--warn);
}


/* 카드 안의 소제목 — 한 카드가 두 부분으로 나뉠 때 경계를 보인다.
   오른쪽에 그 부분에만 걸리는 버튼을 둘 수 있다. */
.card h3.sub-head {
  display: flex; align-items: center; gap: var(--sp-2);
  margin: 0 0 var(--sp-3); padding-bottom: var(--sp-2);
  border-bottom: 1px solid var(--line-soft);
  /* 제목을 키우고 강조색 표식을 앞에 둬 영역 시작이 눈에 띄게 한다 */
  font-size: var(--fs-base); font-weight: 700; color: var(--txt);
}
.card h3.sub-head::before {
  content: ''; flex: none;
  width: 3px; height: 14px; border-radius: 2px;
  background: var(--accent); margin-right: 2px;
}
.card h3.sub-head + * { margin-top: 0; }
/* 두 번째 부분은 위쪽에 여백을 준다 */
.card h3.sub-head ~ h3.sub-head { margin-top: var(--sp-5); }


/* ── 카드 제목의 버튼 배치 ────────────────────────────────
   제목 → (i) 도움말 → 그 영역의 기능 버튼 → ··· → 배치 도구(맨 오른쪽).
   기능 버튼을 오른쪽 끝에 두면 배치 도구와 섞여 무엇이 무엇인지 헷갈린다.
   배치 도구는 어느 카드에서나 같은 자리에 있어야 찾기 쉽다. */
.card h2 .act,
.card h3.sub-head .act {
  margin-left: 0;                    /* 도움말 바로 옆에 붙는다 */
  flex: none;
}
/* 기능 버튼 다음의 빈 공간이 배치 도구를 오른쪽으로 민다 */
.card h2 .act:last-of-type { margin-right: auto; }


/* ── 황금비율 시간 타겟 ────────────────────────────────────
   한 줄에 하나씩, 막대 길이가 남은 일수다.
   짧을수록 가까운 시점 — 무엇이 임박했는지 훑기만 해도 잡힌다. */
.gr-bars { margin: var(--sp-3) 0 var(--sp-2); }
.gr-row {
  display: flex; align-items: center; gap: var(--sp-2);
  padding: 3px 0; font-size: var(--fs-sm);
}
.gr-d {
  flex: none; width: 84px; font-family: var(--font-num);
  font-size: var(--fs-xs); color: var(--txt-2);
}
.gr-track {
  flex: 1; height: 8px; min-width: 40px;
  background: var(--surface-2); border-radius: 4px; overflow: hidden;
}
.gr-fill {
  display: block; height: 100%; border-radius: 4px;
  background: color-mix(in srgb, var(--txt-3) 55%, transparent);
}
.gr-n {
  flex: none; width: 46px; text-align: right;
  font-family: var(--font-num); font-size: var(--fs-xs); color: var(--txt-3);
}
/* 2주 안 — 지금 챙겨야 할 것 */
.gr-row.soon .gr-fill { background: var(--warn); }
.gr-row.soon .gr-n { color: var(--warn); font-weight: 700; }
/* 지난 것 — 자리는 남기되 눈에 덜 띄게 */
.gr-row.past { opacity: .45; }
.gr-row.past .gr-fill { background: var(--txt-3); }

/* 공개 화면의 추이 — 차트 셋이 붙어 있어 어디까지가 한 그림인지 알기 어렵다.
   간격을 벌리고 선을 그어 나눈다. */
.card > h3 + .chart-box { margin-bottom: var(--sp-4); }
.card > h3 ~ h3 {
  margin-top: var(--sp-6);
  padding-top: var(--sp-5);
  border-top: 1px solid var(--line);
  border-left: 3px solid var(--accent);
}

/* 소항목 — 사이를 벌리고 선을 그어 나눈다.
   붙어 있으면 어디까지가 한 영역인지 알 수 없다. */
.card .sub { position: relative; }
.card .sub + .sub {
  margin-top: var(--sp-6);
  padding-top: var(--sp-5);
  border-top: 1px solid var(--line);
}

/* 소항목의 배치 도구 — 그 항목에 마우스를 올렸을 때만 보인다.
   카드 전체를 기준으로 하면 어느 항목의 것인지 헷갈린다. */
.sub .card-tools { opacity: 0; }
.sub:hover .card-tools,
.sub .card-tools:focus-within { opacity: 1; }
/* 소제목 안에서는 맨 오른쪽 — 기능 버튼과 자리가 갈린다 */
/* 기능 버튼 다음의 빈 공간이 배치 도구를 오른쪽 끝으로 민다 */
.sub-head .card-tools { margin-left: auto; order: 99; }


/* 홈 화면 추가 안내 — 아이폰에만 뜬다. 화면 아래에 얇게 두어 가리지 않는다. */
.install-hint {
  position: fixed; left: var(--sp-3); right: var(--sp-3);
  bottom: calc(var(--sp-3) + env(safe-area-inset-bottom, 0px));
  display: flex; align-items: center; gap: var(--sp-3);
  padding: var(--sp-3); z-index: 60;
  background: var(--surface-2); color: var(--txt-2);
  border: 1px solid var(--line); border-radius: var(--r-md);
  box-shadow: 0 6px 20px rgb(0 0 0 / .25);
  font-size: var(--fs-sm);
}
.install-hint span { flex: 1; }
.install-hint b { color: var(--accent); }

/* 홈 화면에서 열었을 때 — 위쪽 상태바에 가려지지 않게 */
@media (display-mode: standalone) {
  body { padding-top: env(safe-area-inset-top, 0px); }
}


/* 기록 표에서 바로 막는 버튼 — 줄에 마우스를 올렸을 때만 보인다.
   늘 보이면 주소를 읽는 데 방해가 된다. */
.ipx {
  padding: 0 6px; margin-left: 6px;
  font-size: 10px; line-height: 1.6;
  background: transparent; color: var(--txt-3);
  border: 1px solid var(--line); border-radius: 4px;
  cursor: pointer; opacity: 0; transition: opacity var(--motion);
  vertical-align: middle;
}
tr:hover .ipx { opacity: 1; }
.ipx:hover { color: var(--danger, #f87171); border-color: currentColor; }


/* 주소 옆 지역 표시 — 주소를 읽는 데 방해되지 않게 작고 옅게 */
.geo {
  font-size: 10.5px; color: var(--txt-3);
  font-family: var(--font-ui); white-space: nowrap;
}