/* 바나나 플랜 웹 도구 공통 스타일 (순공시간 계산기 · 시험 D-day) — 10-04
   색·서체는 랜딩(index.html)·앱(app.html :root)과 같은 값. 새 색을 만들지 않는다. */
:root{
  --paper:#FDFBF5; --ink:#17130F; --ink-2:#3E3830; --ink-3:#675F4E; --ink-4:#8A8371;
  --line:#E0D8BE; --line-soft:#EAE3CD; --card:#FFFFFF;
  --gold:#A9781E; --goal-gold:#F5B400; --danger:#D62F42;
  --gold-wash:#FBF6E8; --gold-wash-2:#F0EDE3;
  --c-study:#6E52C4; --bg-study:#EAE4FA;
  --shadow-xs:0 1px 2px rgba(23,19,15,0.10);
  --shadow-md:0 1px 2px rgba(23,19,15,0.06), 0 8px 18px -8px rgba(23,19,15,0.20), 0 20px 32px -14px rgba(23,19,15,0.22);
  --radius:20px;
  color-scheme:light dark;
}
@media (prefers-color-scheme:dark){
  :root:not([data-theme="light"]){
    --paper:#14110E; --ink:#F3EEE3; --ink-2:#DDD6C8; --ink-3:#B3AB9B; --ink-4:#8F877A;
    --line:#3A342B; --line-soft:#2E2922; --card:#1C1814; --gold:#D9A64A;
    --gold-wash:#2A2313; --gold-wash-2:#25201A;
    --c-study:#A992F0; --bg-study:#2A2340;
    --shadow-xs:0 1px 2px rgba(0,0,0,0.35);
    --shadow-md:0 2px 6px rgba(0,0,0,0.45), 0 12px 28px -10px rgba(0,0,0,0.6);
  }
}
:root[data-theme="dark"]{
  --paper:#14110E; --ink:#F3EEE3; --ink-2:#DDD6C8; --ink-3:#B3AB9B; --ink-4:#8F877A;
  --line:#3A342B; --line-soft:#2E2922; --card:#1C1814; --gold:#D9A64A;
  --gold-wash:#2A2313; --gold-wash-2:#25201A;
  --c-study:#A992F0; --bg-study:#2A2340;
  --shadow-xs:0 1px 2px rgba(0,0,0,0.35);
  --shadow-md:0 2px 6px rgba(0,0,0,0.45), 0 12px 28px -10px rgba(0,0,0,0.6);
}

*{box-sizing:border-box;}
html{-webkit-text-size-adjust:100%;}
body{
  margin:0; min-height:100dvh; color:var(--ink); background:var(--paper);
  background-image:
    radial-gradient(900px 520px at 6% -8%, rgba(255,255,255,0.85), rgba(255,255,255,0) 55%),
    radial-gradient(760px 620px at 108% 104%, rgba(245,180,0,0.08), rgba(245,180,0,0) 62%);
  font-family:'Inter','Apple SD Gothic Neo','Noto Sans KR',sans-serif;
  font-size:16px; line-height:1.55; -webkit-font-smoothing:antialiased;
  overflow-x:hidden;
}
@media (prefers-color-scheme:dark){
  :root:not([data-theme="light"]) body{
    background-image:radial-gradient(760px 620px at 108% 104%, rgba(245,180,0,0.06), rgba(245,180,0,0) 62%);
  }
}
button,input{font:inherit; color:inherit;}
a{color:inherit;}

.wrap{max-width:520px; margin:0 auto; padding:0 16px 48px;}

/* 상단 — 랜딩과 같은 락업 */
.top{display:flex; align-items:center; justify-content:space-between; gap:12px; padding:14px 0 6px;}
.lockup{display:flex; align-items:center; gap:10px; text-decoration:none;}
.lockup img{width:32px; height:32px; border-radius:9px; box-shadow:var(--shadow-xs);}
.wordmark{font-family:'Fraunces',serif; font-weight:700; font-size:18px; color:var(--gold); letter-spacing:-0.01em;}
.toplink{font-size:13px; font-weight:600; color:var(--ink-3); text-decoration:none; padding:8px 0;}
.topr{display:flex; align-items:center; gap:6px;}
.themebtn{width:36px; height:36px; border:1px solid var(--line-soft); border-radius:999px; background:var(--card);
  color:var(--ink-3); cursor:pointer; display:flex; align-items:center; justify-content:center; padding:0; box-shadow:var(--shadow-xs);}
.themebtn svg{width:18px; height:18px;}

h1{font-family:'Nanum Myeongjo',serif; font-weight:800; font-size:28px; line-height:1.25; margin:18px 0 4px; letter-spacing:-0.01em;}
.sub{margin:0 0 18px; color:var(--ink-3); font-size:15px;}

.card{background:var(--card); border:1px solid var(--line-soft); border-radius:var(--radius);
  box-shadow:var(--shadow-md); padding:18px; margin-bottom:14px;}
.label{display:block; font-size:13px; font-weight:600; color:var(--ink-3); margin-bottom:6px;}

/* 세그먼트 */
.seg{display:grid; grid-template-columns:1fr 1fr; gap:4px; padding:4px; border-radius:999px;
  background:var(--gold-wash-2); margin-bottom:16px;}
.seg button{border:none; background:transparent; border-radius:999px; padding:9px 0; font-size:14px;
  font-weight:600; color:var(--ink-3); cursor:pointer;}
.seg button[aria-pressed="true"]{background:var(--card); color:var(--ink); box-shadow:var(--shadow-xs);}

/* 입력 */
.row{display:flex; align-items:center; gap:8px;}
.field{flex:1; min-width:0;}
.inp{width:100%; height:46px; border:1px solid var(--line); border-radius:12px; background:var(--paper);
  padding:0 12px; font-size:16px; outline:none; -webkit-appearance:none; appearance:none;}
.inp:focus{border-color:var(--goal-gold); box-shadow:0 0 0 3px rgba(245,180,0,0.22);}
.inp[type=time],.inp[type=date]{padding:0 10px; font-size:15px; min-width:0;}
.inp.num{text-align:right; font-family:'IBM Plex Mono',monospace;}
.unit{font-size:14px; color:var(--ink-3); flex:none;}
.dur{display:grid; grid-template-columns:1fr auto 1fr auto; align-items:center; gap:8px;}
.gap{height:14px;}
.dash{color:var(--ink-4); flex:none;}
.iconbtn{flex:none; width:40px; height:46px; border:none; background:transparent; color:var(--ink-4);
  font-size:20px; line-height:1; cursor:pointer; border-radius:12px; display:flex; align-items:center; justify-content:center;}
.iconbtn:hover{background:var(--gold-wash-2);}
.addbtn{width:100%; height:44px; border:1.5px dashed var(--line); background:transparent; border-radius:12px;
  color:var(--ink-3); font-weight:600; font-size:14px; cursor:pointer; margin-top:10px;}

/* 버튼 */
.btn{display:inline-flex; align-items:center; justify-content:center; gap:6px; border:none; border-radius:999px;
  height:48px; padding:0 22px; font-weight:700; font-size:15px; cursor:pointer; text-decoration:none; white-space:nowrap;
  background:linear-gradient(180deg,#FFC629,var(--goal-gold)); color:#17130F;
  box-shadow:0 1px 2px rgba(23,19,15,0.12), inset 0 1px 0 rgba(255,255,255,0.5);}
.btn.ghost{background:var(--gold-wash-2); color:var(--ink); box-shadow:none;}
.btns{display:grid; grid-template-columns:1fr 1fr; gap:8px; margin-top:12px;}

/* 결과 */
.result{position:relative; overflow:hidden;}
.result-top{display:flex; align-items:center; gap:14px;}
.bana{width:86px; flex:none;}
.bana svg{width:100%; height:auto;}
.big{font-family:'IBM Plex Mono',monospace; font-weight:500; font-size:40px; line-height:1.1; letter-spacing:-0.02em;}
.big small{font-size:18px; margin:0 4px 0 2px; color:var(--ink-3);}
.cap{font-size:13px; color:var(--ink-3); font-weight:600;}
.note{margin:12px 0 0; font-size:15px; color:var(--ink-2);}
.stats{display:grid; grid-template-columns:1fr 1fr; gap:10px; margin-top:16px;}
.stat{background:var(--gold-wash); border-radius:14px; padding:12px;}
.stat .v{font-family:'IBM Plex Mono',monospace; font-size:20px; font-weight:500;}
.meter{height:6px; border-radius:6px; background:var(--gold-wash-2); margin-top:8px; overflow:hidden;}
.meter i{display:block; height:100%; background:var(--goal-gold); border-radius:6px; transition:width .4s ease;}
.empty{color:var(--ink-4); font-size:14px; text-align:center; padding:8px 0;}

/* 칩 */
.chips{display:flex; flex-wrap:wrap; gap:8px;}
.chip{border:1px solid var(--line); background:var(--card); border-radius:999px; padding:8px 14px;
  font-size:14px; font-weight:600; cursor:pointer; color:var(--ink-2);}
.chip small{font-weight:500; color:var(--ink-4); margin-left:4px; font-family:'IBM Plex Mono',monospace; font-size:12px;}
.chip:disabled{opacity:.45; cursor:default;}

/* D-day 목록 */
.exam{display:flex; align-items:center; gap:12px; padding:14px 0; border-top:1px solid var(--line-soft);}
.exam:first-child{border-top:none; padding-top:0;}
.exam:last-child{padding-bottom:0;}
.exam .nm{font-weight:700; font-size:16px; overflow:hidden; text-overflow:ellipsis; white-space:nowrap;}
.exam .dt{font-size:13px; color:var(--ink-3);}
.exam .dd{margin-left:auto; font-family:'IBM Plex Mono',monospace; font-weight:500; font-size:22px; color:var(--gold); flex:none;}
.exam.past .dd,.exam.past .nm{color:var(--ink-4);}
.exam .x{margin-left:4px;}
.hero-dd{font-family:'IBM Plex Mono',monospace; font-weight:500; font-size:56px; line-height:1; letter-spacing:-0.03em; color:var(--gold);}

/* 바나나 플랜 안내 */
.cta{display:flex; align-items:center; gap:12px; background:var(--gold-wash); border:1px solid var(--line-soft);
  border-radius:var(--radius); padding:14px 16px; text-decoration:none; margin-top:6px;}
.cta img{width:40px; height:40px; border-radius:10px; flex:none;}
.cta b{display:block; font-size:15px;}
.cta span{font-size:13px; color:var(--ink-3);}
.cta .arr{margin-left:auto; color:var(--ink-4); font-size:18px;}

.foot{margin-top:22px; font-size:12px; color:var(--ink-4); text-align:center; line-height:1.7;}
.foot a{color:var(--ink-3);}
.sr{position:absolute; width:1px; height:1px; overflow:hidden; clip:rect(0 0 0 0);}
.toast{position:fixed; left:50%; bottom:24px; transform:translateX(-50%); background:var(--ink); color:var(--paper);
  padding:10px 16px; border-radius:999px; font-size:14px; opacity:0; pointer-events:none; transition:opacity .2s;}
.toast.on{opacity:1;}
@media (prefers-reduced-motion:reduce){ .meter i{transition:none;} }