/* semku 공통 스타일
 *
 * 원칙: 웹폰트 0(시스템 폰트만 — 한글 FOUT·CWV 사고 회피), 모바일 우선,
 * 결과가 화면의 주인공, 적용한 규칙은 결과 옆에 상시 노출.
 * 색은 페이지별 --accent 하나만 바꾼다.
 */

:root {
  --bg: #f7f7f5;
  --card: #ffffff;
  --ink: #1a1d21;
  --ink-soft: #5b6169;
  /* 4.5:1 이상을 페이지별 강조 배경(민트·보라·앰버) 위에서도 만족하는 값.
     이전 #878d95는 흰 배경에서 3.35:1로 힌트·출처·상태 문구 11곳이 AA 미달이었다. */
  --ink-faint: #666d76;
  --line: #e3e5e8;        /* 장식 테두리(카드·접힘·푸터) — 1.4.11 대상이 아니다 */
  --ctrl-line: #82888f;   /* 조작 가능한 컨트롤 경계. WCAG 1.4.11(3:1) — #e3e5e8은 1.26:1 */
  --line-soft: #eef0f2;
  --accent: #2563eb;
  --accent-bg: #eff4ff;
  --accent-line: #c7d8fe;
  --warn: #b3402e;
  --warn-bg: #fdf0ed;
  --radius: 12px;
  --sans: -apple-system, BlinkMacSystemFont, "Apple SD Gothic Neo", "Pretendard",
    "Malgun Gothic", "Noto Sans KR", system-ui, sans-serif;
  --num: ui-monospace, SFMono-Regular, "SF Mono", Menlo, monospace;
}

@media (prefers-color-scheme: dark) {
  :root:not([data-theme="light"]) {
    --bg: #16181b;
    --card: #1e2126;
    --ink: #e9ebee;
    --ink-soft: #a7aeb7;
    --ink-faint: #99a1aa;
    --line: #2f343a;
    --ctrl-line: #6a727c; /* 다크 컨트롤 경계도 3:1 이상 */
    --line-soft: #262a2f;
    --accent: #7ba6f7;
    --accent-bg: #1c2436;
    --accent-line: #2f4676;
    --warn: #e08277;
    --warn-bg: #33211e;
  }
}
:root[data-theme="dark"] {
  --bg: #16181b; --card: #1e2126; --ink: #e9ebee; --ink-soft: #a7aeb7;
  --ink-faint: #99a1aa; --line: #2f343a; --ctrl-line: #6a727c; --line-soft: #262a2f;
  --accent: #7ba6f7; --accent-bg: #1c2436; --accent-line: #2f4676;
  --warn: #e08277; --warn-bg: #33211e;
}

* { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; color-scheme: light dark; }
body {
  margin: 0;
  background: var(--bg);
  color: var(--ink);
  font-family: var(--sans);
  font-size: 16px;
  line-height: 1.55;
}

.wrap { max-width: 480px; margin: 0 auto; padding: 14px 16px 48px; }
@media (min-width: 720px) { .wrap { max-width: 600px; padding-top: 24px; } }

/* ── 헤더 ── */
.site { display: flex; align-items: baseline; gap: 8px; margin-bottom: 14px; }
.site a { color: var(--ink); text-decoration: none; font-weight: 700; letter-spacing: -0.01em; }
.site .tag { font-size: 12px; color: var(--ink-faint); }

h1 { font-size: 21px; font-weight: 700; margin: 0 0 4px; letter-spacing: -0.02em; }
.lede { margin: 0 0 14px; font-size: 14px; color: var(--ink-soft); }

/* ── 탭 ── */
.tabs { display: flex; gap: 4px; background: var(--line-soft); border-radius: 10px; padding: 3px; margin-bottom: 12px; }
.tabs button {
  flex: 1; border: 0; background: transparent; color: var(--ink-soft);
  font: inherit; font-size: 15px; font-weight: 600; padding: 9px 0;
  border-radius: 8px; cursor: pointer;
}
.tabs button[aria-selected="true"] { background: var(--card); color: var(--ink); box-shadow: 0 1px 2px rgba(0,0,0,.06); }
.tabs button:focus-visible { outline: 2px solid var(--accent); outline-offset: 1px; }

/* ── 입력 카드 ── */
.card { background: var(--card); border: 1px solid var(--line); border-radius: var(--radius); padding: 14px; margin-bottom: 10px; }
.field { display: block; margin-bottom: 12px; }
.field:last-child { margin-bottom: 0; }
.field > .label { display: block; font-size: 13px; color: var(--ink-soft); margin-bottom: 5px; }
.field input {
  width: 100%; padding: 11px 12px; font: inherit; font-size: 16px;
  color: var(--ink); background: var(--card);
  border: 1px solid var(--ctrl-line); border-radius: 9px;
}
.field select {
  width: 100%; padding: 11px 12px; font: inherit; font-size: 16px;
  color: var(--ink); background: var(--card);
  border: 1px solid var(--ctrl-line); border-radius: 9px; appearance: none;
  background-image: linear-gradient(45deg, transparent 50%, var(--ink-faint) 50%),
    linear-gradient(135deg, var(--ink-faint) 50%, transparent 50%);
  background-position: right 16px center, right 11px center;
  background-size: 5px 5px, 5px 5px; background-repeat: no-repeat;
}
.field select:focus-visible { outline: 2px solid var(--accent); outline-offset: -1px; border-color: var(--accent); }
.field input:focus-visible { outline: 2px solid var(--accent); outline-offset: -1px; border-color: var(--accent); }
.field input[inputmode="decimal"], .field input[inputmode="numeric"] { text-align: right; font-variant-numeric: tabular-nums; }
.hint { display: block; margin-top: 4px; font-size: 12px; color: var(--ink-faint); }
.row { display: flex; gap: 10px; }
.row > * { flex: 1; min-width: 0; }

/* ── 토글 칩 ── */
.chips { display: flex; flex-wrap: wrap; gap: 7px; margin-top: 12px; }
.chip {
  display: inline-flex; align-items: center; gap: 6px;
  border: 1px solid var(--ctrl-line); border-radius: 999px;
  padding: 7px 12px; font-size: 13.5px; color: var(--ink-soft);
  background: var(--card); cursor: pointer; user-select: none;
}
.chip input { position: absolute; opacity: 0; width: 0; height: 0; }
.chip:has(input:checked) { border-color: var(--accent); color: var(--accent); background: var(--accent-bg); font-weight: 600; }
.chip:has(input:focus-visible) { outline: 2px solid var(--accent); outline-offset: 2px; }

/* ── 결과 ── */
[hidden] { display: none !important; }  /* 속성만으로 숨김이 보장되게 — .adslot 등 display 지정 요소 대비 */

.result {
  display: block;            /* output 기본값 inline이면 배경·테두리가 줄 조각으로 그려진다 */
  background: var(--accent-bg); border: 1px solid var(--accent-line);
  border-radius: var(--radius); padding: 16px; margin-bottom: 10px;
}
.result .num {
  font-size: 34px; font-weight: 700; color: var(--accent);
  font-variant-numeric: tabular-nums; letter-spacing: -0.02em; line-height: 1.15;
}
.result .num.sm { font-size: 26px; }
.result .rule { margin-top: 6px; font-size: 13.5px; color: var(--ink-soft); }
.result .rule strong { color: var(--ink); font-weight: 600; }
.result .alt { margin-top: 3px; font-size: 13px; color: var(--ink-faint); }
.result .src { margin-top: 8px; padding-top: 8px; border-top: 1px solid var(--accent-line); font-size: 12px; color: var(--ink-faint); }
.result[data-state="error"] { background: var(--warn-bg); border-color: var(--warn); }
.result[data-state="error"] .num { font-size: 17px; color: var(--warn); font-weight: 600; }
/* 승인 상한 안 조합도 수백 자리 금액을 만든다 — 표시값은 컨테이너 안에서 줄바꿈으로 수용한다(숫자를 자르거나 축약하지 않는다 — 축약 표기는 승인 문구가 없다). */
.result .num, .result .rlabel, .result .rule, .result .alt, .result .src { overflow-wrap: anywhere; }

/* ── 다음 행동 ── */
.next { background: var(--card); border: 1px solid var(--line); border-radius: var(--radius); padding: 12px 14px; margin-bottom: 10px; }
.next a { color: var(--accent); font-weight: 600; text-decoration: none; font-size: 14.5px; }
.next a:hover { text-decoration: underline; }

/* ── 접힘 설명 ── */
details { background: var(--card); border: 1px solid var(--line); border-radius: var(--radius); padding: 12px 14px; margin-bottom: 10px; }
details summary { cursor: pointer; font-size: 14.5px; color: var(--ink-soft); font-weight: 600; }
details summary::-webkit-details-marker { color: var(--ink-faint); }
details p { font-size: 14px; color: var(--ink-soft); margin: 10px 0 0; }

/* ── FAQ(접힘 — 결과·규칙이 먼저, FAQ는 하단) ── */
.faq { margin-top: 20px; }
.faq > summary { font-size: 15px; font-weight: 700; color: var(--ink); }
.faq dt { font-size: 14.5px; font-weight: 600; margin-top: 14px; }
.faq dd { margin: 5px 0 0; font-size: 14px; color: var(--ink-soft); }

/* ── 광고 자리(D0 비활성 — 결과 아래 고정 높이) ── */
.adslot { min-height: 100px; margin: 16px 0; border: 1px dashed var(--line); border-radius: 10px;
  display: flex; align-items: center; justify-content: center; color: var(--ink-faint); font-size: 12px; }

/* ── 푸터 ── */
footer { margin-top: 28px; padding-top: 14px; border-top: 1px solid var(--line); font-size: 12.5px; color: var(--ink-faint); }
footer p { margin: 0 0 8px; }
footer nav a { color: var(--ink-soft); text-decoration: none; margin-right: 12px; }
footer nav a:hover { text-decoration: underline; }

/* ── 홈 도구 목록 ── */
.tools { display: grid; gap: 10px; margin: 16px 0; }
.tool { display: block; background: var(--card); border: 1px solid var(--line); border-radius: var(--radius);
  padding: 14px; text-decoration: none; color: inherit; }
.tool:hover { border-color: var(--accent); }
.tool b { display: block; font-size: 16px; margin-bottom: 3px; }
.tool span { font-size: 13.5px; color: var(--ink-soft); }
.tool[aria-disabled="true"] { opacity: .62; cursor: default; }
.tool[aria-disabled="true"]:hover { border-color: var(--line); }

@media (prefers-reduced-motion: reduce) { * { transition: none !important; animation: none !important; } }

/* ── 홈 ── */
.home-head { display: flex; align-items: baseline; justify-content: space-between; gap: 12px; flex-wrap: wrap; margin-bottom: 16px; }
.topnav { display: flex; gap: 12px; flex-wrap: wrap; }
.topnav a { font-size: 13px; color: var(--ink-soft); text-decoration: none; }
.topnav a:hover { color: var(--accent); text-decoration: underline; }

.block { margin-top: 26px; }
.block h2 { font-size: 17px; margin: 0 0 8px; letter-spacing: -0.01em; }
.block p { font-size: 14.5px; color: var(--ink-soft); margin: 0 0 10px; }
.statusline { font-family: var(--num); font-size: 12px; color: var(--ink-faint); }
.example { background: var(--card); border: 1px solid var(--line); border-radius: 10px; padding: 11px 13px; font-size: 13.5px; }
.cta { display: inline-block; background: var(--accent); color: #fff; font-weight: 600; font-size: 15px;
  text-decoration: none; padding: 11px 16px; border-radius: 10px; }
.cta:hover { filter: brightness(1.06); }

.rules { margin: 12px 0 10px; padding: 0; }
.rules dt { font-size: 13px; font-weight: 700; color: var(--ink); margin-top: 12px; }
.rules dd { margin: 3px 0 0; font-size: 14px; color: var(--ink-soft); }

.tool code { font-family: var(--num); font-size: 12px; color: var(--ink-faint); font-weight: 400; }
.tool .state { display: block; margin-top: 7px; font-style: normal; font-family: var(--num);
  font-size: 11.5px; color: var(--ink-faint); }
.tool .state.on { color: var(--accent); }
.note { font-size: 13px; color: var(--ink-faint); margin-top: 10px; }

/* ── 홈 v5 도구 카드 ── */
.tool h2 { display: block; font-size: 16px; font-weight: 700; margin: 0 0 3px; letter-spacing: -0.01em; color: var(--ink); }
@media (min-width: 720px) { .tools-2col { grid-template-columns: 1fr 1fr; } }

/* ── 결과 텍스트 복사(벤치마크 반영 #3) ── */
.copyrow { display: flex; align-items: center; gap: 10px; flex-wrap: wrap; margin: 0 0 10px; }
/* 복사줄·초기화줄 버튼은 같은 모양이다 — 한 곳에서만 정의한다(초기화줄은 §5 절에 있다). */
.copyrow button, .resetrow button { font: inherit; font-size: 13.5px; font-weight: 600; color: var(--ink-soft);
  background: var(--card); border: 1px solid var(--ctrl-line); border-radius: 9px; padding: 8px 12px; cursor: pointer; }
.copyrow button:hover, .resetrow button:hover { border-color: var(--accent); color: var(--accent); }
.copyrow button:focus-visible, .resetrow button:focus-visible { outline: 2px solid var(--accent); outline-offset: 1px; }
.copystate { font-size: 12.5px; color: var(--ink-faint); }
.copyfallback { width: 100%; font-family: var(--num); font-size: 12px; color: var(--ink);
  background: var(--card); border: 1px solid var(--ctrl-line); border-radius: 9px; padding: 10px; resize: vertical; }

/* ── 고급 조건·단위 붙은 입력(/bokri) ── */
.adv > summary { font-size: 13.5px; }
.adv .field { margin-top: 12px; }
.withunit { display: flex; align-items: center; gap: 8px; }
.withunit input { flex: 1; min-width: 0; }
.withunit .unit { font-size: 13px; color: var(--ink-soft); white-space: nowrap; }

/* ── 원금·수익 분해 차트(콘텐츠 팩 증보 5) ── */
.chartbox { background: var(--card); border: 1px solid var(--line); border-radius: var(--radius);
  padding: 14px; margin-bottom: 10px; }
.charthead { font-size: 13px; font-weight: 700; color: var(--ink-soft); margin-bottom: 8px; }
.chartscroll { overflow-x: auto; }
.chartscroll svg { display: block; width: 100%; min-width: 520px; height: auto; }

.chartscroll .grid { stroke: var(--line-soft); stroke-width: 1; }
.chartscroll .axis { stroke: var(--line); stroke-width: 1; }
.chartscroll .ytick, .chartscroll .xtick { fill: var(--ink-faint); font-size: 10px;
  font-family: var(--num); font-variant-numeric: tabular-nums; }
.chartscroll .axistitle { fill: var(--ink-soft); font-size: 11px; font-family: var(--sans); }
.chartscroll .c-base { fill: var(--ink-soft); }
.chartscroll .c-contrib { fill: var(--accent-line); }
.chartscroll .c-profit { fill: var(--accent); }
.chartscroll .c-loss { fill: var(--warn-bg); stroke: var(--warn); stroke-width: 1; stroke-dasharray: 3 2; }
.chartscroll .c-total { stroke: var(--ink); stroke-width: 2; }

.legend { display: flex; flex-wrap: wrap; gap: 6px 14px; list-style: none;
  margin: 10px 0; padding: 0; font-size: 12.5px; color: var(--ink-soft); }
.legend li { display: flex; align-items: center; gap: 6px; }
.sw { display: inline-block; width: 11px; height: 11px; border-radius: 3px; }
.sw.c-base { background: var(--ink-soft); }
.sw.c-contrib { background: var(--accent-line); }
.sw.c-profit { background: var(--accent); }
.sw.c-total { height: 3px; border-radius: 2px; background: var(--ink); }

.tablescroll { overflow-x: auto; margin-top: 10px; }
.dtable { border-collapse: collapse; width: 100%; font-size: 12.5px;
  font-variant-numeric: tabular-nums; white-space: nowrap; }
.dtable th, .dtable td { border-bottom: 1px solid var(--line-soft); padding: 7px 10px; text-align: right; }
.dtable thead th { color: var(--ink-soft); font-weight: 600; border-bottom-color: var(--line); }
.dtable tbody th { text-align: left; font-weight: 600; color: var(--ink-soft); }

.notice { background: var(--warn-bg); border: 1px solid var(--warn); border-radius: 10px;
  padding: 11px 13px; margin: 0 0 10px; font-size: 13.5px; color: var(--ink); }

/* ── 프리셋·저장 목록(/dday) ── */
button.chip.preset { font: inherit; font-size: 13.5px; }
button.chip.preset:hover:not(:disabled) { border-color: var(--accent); color: var(--accent); }
button.chip.preset:disabled { opacity: .55; cursor: default; }

.savedbox { margin-top: 16px; }
.savedlist { list-style: none; margin: 0; padding: 0; }
.savedlist li { display: flex; align-items: center; gap: 10px; flex-wrap: wrap;
  padding: 9px 0; border-bottom: 1px solid var(--line-soft); }
.savedlist li:last-child { border-bottom: 0; }
.saveditem { flex: 1; min-width: 0; font-size: 14px; }
.linkbtn { font: inherit; font-size: 13px; color: var(--ink-soft); background: transparent;
  border: 1px solid var(--ctrl-line); border-radius: 8px; padding: 5px 10px; cursor: pointer; }
.linkbtn:hover { border-color: var(--accent); color: var(--accent); }
.linkbtn:focus-visible { outline: 2px solid var(--accent); outline-offset: 1px; }

.copyrow button:disabled { opacity: .5; cursor: default; }
.copyrow button:disabled:hover { border-color: var(--ctrl-line); color: var(--ink-soft); }

/* ── 초기화·되돌리기(콘텐츠 팩 §5) ── */
/* 버튼 모양은 .copyrow button과 한 블록에서 함께 정의한다(위 복사 절). */
.resetrow { display: flex; align-items: center; gap: 10px; flex-wrap: wrap; margin: 0 0 10px; }

/* ── 모드 선택·입력 그룹(/pyeongdan) ── */
.modes { margin: 0 0 12px; }

.grp { padding-top: 12px; }
.grph { display: flex; align-items: center; gap: 8px; font-size: 13px; font-weight: 700;
  color: var(--ink-soft); margin: 0 0 10px; letter-spacing: -0.01em; }
.badge { font-size: 11.5px; font-weight: 600; color: var(--warn); background: var(--warn-bg);
  border: 1px solid var(--warn); border-radius: 999px; padding: 2px 8px; letter-spacing: 0; }

/* 결과 라벨(승인 틀: 라벨 줄 → 숫자 줄 → 조건 줄들) */
.result .rlabel { font-size: 13.5px; font-weight: 600; color: var(--ink-soft); margin-bottom: 2px; }
.result .lines { white-space: pre-line; }

/* 매수 내역 여러 줄 */
.buyrow { display: flex; align-items: flex-end; gap: 10px; margin-bottom: 10px; }
.buyrow .field { flex: 1; min-width: 0; margin-bottom: 0; }
.rowdel { flex: 0 0 auto; font: inherit; font-size: 13px; color: var(--ink-faint);
  background: var(--card); border: 1px solid var(--ctrl-line); border-radius: 9px;
  padding: 10px 10px; cursor: pointer; }
.rowdel:hover { color: var(--warn); border-color: var(--warn); }
.rowdel:focus-visible { outline: 2px solid var(--accent); outline-offset: 1px; }

.ghost { font: inherit; font-size: 13.5px; font-weight: 600; color: var(--ink-soft);
  background: transparent; border: 1px dashed var(--ctrl-line); border-radius: 9px;
  padding: 9px 12px; width: 100%; cursor: pointer; }
.ghost:hover { border-color: var(--accent); color: var(--accent); }
.ghost:focus-visible { outline: 2px solid var(--accent); outline-offset: 1px; }