/* ai-bills 공통 스타일
 *
 * 신규 페이지들이 공유합니다. 기존 두 페이지(/, /sonnet5-price-increase/)는
 * 아직 인라인 <style>을 쓰고 있으니, 디자인을 바꿀 땐 세 곳을 함께 보세요.
 *
 * 주의: input/select의 font-size는 반드시 16px 이상이어야 합니다.
 *       그 미만이면 iOS 사파리가 포커스 시 화면을 강제로 확대합니다.
 */

:root{
  --bg:#ffffff; --fg:#16181d; --muted:#606770; --line:#e3e6ea;
  --accent:#1a5fd0; --accent-soft:#eef3fd;
  --warn:#b3300f; --warn-bg:#fdf1ee; --warn-line:#f3c7ba;
  --good:#0f7a52; --good-bg:#eef8f3;
  --radius:10px;
}
@media (prefers-color-scheme: dark){
  :root{
    --bg:#14161a; --fg:#e8eaed; --muted:#9aa2ad; --line:#2a2e35;
    --accent:#6ea3f5; --accent-soft:#1b2534;
    --warn:#ff9d7e; --warn-bg:#2c1b16; --warn-line:#5a3226;
    --good:#5fd3a3; --good-bg:#16281f;
  }
}

*{box-sizing:border-box}
body{
  margin:0; padding:0; background:var(--bg); color:var(--fg);
  font-family:-apple-system,BlinkMacSystemFont,"Apple SD Gothic Neo","Pretendard",
    "Malgun Gothic",system-ui,sans-serif;
  line-height:1.7; font-size:16px;
}
.wrap{max-width:820px; margin:0 auto; padding:24px 18px 80px}
.wrap.wide{max-width:960px}

.crumb{font-size:.85rem; color:var(--muted); margin-bottom:18px}
.crumb a{color:var(--accent); text-decoration:none}
.crumb a:hover{text-decoration:underline}

h1{font-size:1.7rem; margin:0 0 12px; letter-spacing:-.025em; line-height:1.35}
h2{font-size:1.25rem; margin:40px 0 12px; letter-spacing:-.015em}
h3{font-size:1.02rem; margin:26px 0 8px}
p{margin:0 0 14px}
.lead{font-size:1.05rem; color:var(--muted); margin-bottom:24px}

.stamp{
  display:inline-flex; align-items:center; gap:7px; font-size:.82rem;
  color:var(--good); background:var(--good-bg); border-radius:99px;
  padding:4px 12px; font-weight:600; margin-bottom:16px;
}
.dot{width:7px;height:7px;border-radius:50%;background:var(--good);
     display:inline-block; animation:pulse 2s infinite}
@keyframes pulse{0%,100%{opacity:1}50%{opacity:.35}}

.alert{
  background:var(--warn-bg); border:1px solid var(--warn-line);
  border-left:4px solid var(--warn); border-radius:var(--radius);
  padding:16px 18px; margin:22px 0;
}
.alert strong{color:var(--warn)}
.good-box{
  background:var(--good-bg); border:1px solid var(--line);
  border-left:4px solid var(--good); border-radius:var(--radius);
  padding:16px 18px; margin:22px 0;
}
.good-box strong{color:var(--good)}

.panel{
  background:var(--accent-soft); border:1px solid var(--line);
  border-radius:var(--radius); padding:20px; margin:22px 0;
}
.grid{display:grid; grid-template-columns:repeat(auto-fit,minmax(160px,1fr)); gap:14px}
.grid.wide{grid-template-columns:repeat(auto-fit,minmax(220px,1fr))}
label{display:block; font-size:.83rem; color:var(--muted); margin-bottom:5px; font-weight:600}
input[type=number],select{
  width:100%; padding:9px 11px; border:1px solid var(--line);
  border-radius:7px; background:var(--bg); color:var(--fg);
  font-size:16px; /* 16px 미만이면 iOS가 화면을 강제 확대함 */
  font-family:inherit;
}
input:focus,select:focus{outline:2px solid var(--accent); outline-offset:-1px}
.checkrow{display:flex; align-items:center; gap:8px; margin-top:14px; font-size:.9rem;
          flex-wrap:wrap}
.checkrow input{width:16px;height:16px;accent-color:var(--accent)}
.checkrow label{margin:0; color:var(--fg); font-weight:500}

.result{
  margin-top:16px; padding:14px 16px; background:var(--bg);
  border:1px solid var(--line); border-radius:8px;
}
.result div{display:flex; justify-content:space-between; padding:5px 0;
            font-size:.95rem; gap:12px}
.result .big{
  border-top:1px solid var(--line); margin-top:8px; padding-top:10px;
  font-weight:700; font-size:1.05rem;
}
.result .big.save{color:var(--good)}
.result .big.cost{color:var(--warn)}
.num{font-variant-numeric:tabular-nums; white-space:nowrap}

table{width:100%; border-collapse:collapse; margin:14px 0; font-size:.9rem}
th,td{padding:9px 10px; text-align:right; border-bottom:1px solid var(--line)}
th{font-size:.78rem; color:var(--muted); text-transform:uppercase;
   letter-spacing:.03em; font-weight:700; white-space:nowrap}
th:first-child,td:first-child{text-align:left}
tbody tr:hover{background:var(--accent-soft)}
.hl td{background:var(--warn-bg); font-weight:600}
.ok td{background:var(--good-bg); font-weight:600}
.scroll{overflow-x:auto; -webkit-overflow-scrolling:touch}

blockquote{
  margin:18px 0; padding:12px 18px; border-left:3px solid var(--accent);
  background:var(--accent-soft); border-radius:0 8px 8px 0; font-size:.95rem;
}
ul,ol{margin:0 0 16px; padding-left:22px}
li{margin-bottom:6px}
.note{font-size:.87rem; color:var(--muted); margin:10px 0}
.tag{
  display:inline-block; font-size:.68rem; padding:1px 6px; border-radius:4px;
  background:var(--line); color:var(--muted); margin-left:6px; font-weight:600;
  vertical-align:middle;
}
.tag.new{background:var(--warn-bg); color:var(--warn)}
.tag.old{background:var(--good-bg); color:var(--good)}

.cta{
  display:block; margin:32px 0; padding:18px 20px; text-align:center;
  background:var(--accent); color:#fff; border-radius:var(--radius);
  text-decoration:none; font-weight:700; font-size:1rem;
}
.cta:hover{opacity:.9}
.cta span{display:block; font-weight:400; font-size:.85rem; opacity:.85; margin-top:4px}

.related{
  border:1px solid var(--line); border-radius:var(--radius);
  padding:6px 4px; margin:28px 0;
}
.related a{
  display:block; padding:12px 15px; color:var(--accent);
  text-decoration:none; font-weight:600; font-size:.95rem; border-radius:7px;
}
.related a:hover{background:var(--accent-soft)}
.related a span{display:block; font-weight:400; font-size:.84rem;
                color:var(--muted); margin-top:3px}

footer{
  margin-top:48px; padding-top:20px; border-top:1px solid var(--line);
  font-size:.85rem; color:var(--muted)
}
a{color:var(--accent)}