/* 니혼고로 스타일. 디자인 가이드 v2.0 §1 그대로. 색은 아래 6개(+빨강)만 쓴다. */
:root{
  --bg:#FFFFFF; --text:#111318; --sub:#6B7080; --line:#E6E7EC;
  --accent:#4B50B8; --accent-soft:#EEEFFA; --diff:#D92D20;
  --font-ko: -apple-system, BlinkMacSystemFont, "Apple SD Gothic Neo", "Noto Sans KR", sans-serif;
  --font-jp: "Hiragino Sans", "Hiragino Kaku Gothic ProN", "Noto Sans JP", var(--font-ko);
  --fs: 1;
  --t-kana: calc(96px * var(--fs)); --t-jp: calc(44px * var(--fs)); --t-jp-s: calc(32px * var(--fs));
  --t-title: calc(28px * var(--fs)); --t-h: calc(20px * var(--fs)); --t-body: calc(17px * var(--fs));
  --t-small: calc(14px * var(--fs));
  --s1:4px; --s2:8px; --s3:12px; --s4:16px; --s5:24px; --s6:32px; --s7:48px;
  --pad:20px; --r-card:20px; --r-btn:16px; --r-pill:999px;
}
*{box-sizing:border-box;}
html,body{height:100%;}
body{margin:0;background:var(--bg);color:var(--text);font:400 var(--t-body)/1.5 var(--font-ko);
  -webkit-text-size-adjust:100%;-webkit-tap-highlight-color:transparent;}
.jp{font-family:var(--font-jp);font-weight:500;line-height:1.3;}
.diff{color:var(--diff);font-weight:700;}
.sub{color:var(--sub);}
.small{font-size:var(--t-small);}
h1,h2,h3,p{margin:0;}
.title{font-size:var(--t-title);font-weight:700;}
.h{font-size:var(--t-h);font-weight:600;}

/* 화면 틀 */
.screen{min-height:100dvh;display:flex;flex-direction:column;
  padding:calc(env(safe-area-inset-top) + 12px) calc(env(safe-area-inset-right) + var(--pad))
          0 calc(env(safe-area-inset-left) + var(--pad));}
.screen-body{flex:1;overflow-y:auto;display:flex;flex-direction:column;gap:var(--s4);padding-bottom:var(--s4);}
.bottom-bar{position:sticky;bottom:0;background:var(--bg);
  padding:var(--s3) 0 calc(env(safe-area-inset-bottom) + var(--s4));display:flex;flex-direction:column;gap:var(--s3);}
.bottom-bar .row{display:flex;gap:var(--s3);}
.bottom-bar .row > *{flex:1;}
.topbar{display:flex;align-items:center;gap:var(--s2);min-height:44px;}
.topbar .grow{flex:1;}
.progress{height:6px;border-radius:var(--r-pill);background:var(--line);overflow:hidden;margin:var(--s2) 0 var(--s3);}
.progress > i{display:block;height:100%;background:var(--accent);}

/* 버튼 */
button{font:inherit;color:inherit;}
.btn,.btn-line{height:56px;width:100%;border-radius:var(--r-btn);font-size:var(--t-body);font-weight:600;border:0;cursor:pointer;}
.btn{background:var(--accent);color:#fff;}
.btn-line{background:var(--bg);color:var(--accent);border:1.5px solid var(--accent);}
.btn:disabled,.btn-line:disabled{background:var(--line);color:var(--sub);border-color:var(--line);cursor:default;}
.btn-text{min-height:44px;min-width:44px;padding:0 var(--s2);background:none;border:0;color:var(--accent);font-size:15px;cursor:pointer;}
.icon-btn{width:44px;height:44px;display:inline-flex;align-items:center;justify-content:center;background:none;border:0;color:var(--text);cursor:pointer;padding:0;}
.icon-btn svg,.btn-sound svg{width:24px;height:24px;}
.sounds{display:flex;justify-content:center;gap:var(--s6);}
.btn-sound{display:flex;flex-direction:column;align-items:center;gap:var(--s1);background:none;border:0;cursor:pointer;color:var(--sub);font-size:var(--t-small);padding:0;}
.btn-sound .circle{width:64px;height:64px;border-radius:50%;background:var(--accent-soft);color:var(--accent);
  display:flex;align-items:center;justify-content:center;border:2px solid transparent;}
.btn-sound .circle svg{width:28px;height:28px;}
.btn-sound.playing .circle{border-color:var(--accent);}
button:active,a:active{opacity:.7;}

/* 카드 */
.card{background:var(--bg);border:1px solid var(--line);border-radius:var(--r-card);padding:24px;text-align:center;
  display:flex;flex-direction:column;align-items:center;gap:var(--s2);}
.kana-big{font-size:var(--t-kana);}
.jp-word{font-size:var(--t-jp);}
.jp-s{font-size:var(--t-jp-s);}
.shadow-row{display:flex;justify-content:center;gap:var(--s5);}
.repeat{display:flex;flex-direction:column;gap:var(--s2);}
.repeat .label{display:flex;align-items:center;gap:var(--s2);color:var(--sub);}
.repeat .label svg{width:20px;height:20px;}
.fillbar{height:6px;border-radius:var(--r-pill);background:var(--accent-soft);overflow:hidden;}
.fillbar > i{display:block;height:100%;width:0;background:var(--accent);}

/* 문제 보기 */
.choices{display:grid;grid-template-columns:1fr 1fr;gap:var(--s3);}
.choice{min-height:88px;border:1px solid var(--line);border-radius:var(--r-btn);background:var(--bg);cursor:pointer;
  display:flex;align-items:center;justify-content:center;gap:var(--s2);padding:var(--s2);font-size:var(--t-body);}
.choice.jp{font-size:var(--t-jp-s);}
.choice.right{border:2px solid var(--accent);}
.choice.wrong{background:var(--line);}
.choice svg{width:20px;height:20px;color:var(--accent);}
.choice.wrong svg{color:var(--sub);}
.feedback{text-align:center;color:var(--text);}

/* 주 달력 */
.week{display:grid;grid-template-columns:repeat(7,1fr);gap:var(--s1);text-align:center;}
.week .dot{width:40px;height:40px;margin:0 auto;border-radius:50%;display:flex;align-items:center;justify-content:center;
  border:1.5px solid var(--line);color:var(--sub);font-weight:600;}
.week .dot svg{width:20px;height:20px;}
.week .done .dot{background:var(--accent-soft);border-color:var(--accent-soft);color:var(--accent);}
.week .today .dot{background:var(--accent);border-color:var(--accent);color:#fff;}
.week .test .dot{border-color:var(--accent);}
.week .lbl{font-size:12px;color:var(--sub);margin-top:var(--s1);}
.week .today .lbl{color:var(--accent);font-weight:600;}

/* 목록 */
.list{display:flex;flex-direction:column;}
.list .item{display:flex;align-items:center;gap:var(--s3);min-height:56px;border-bottom:1px solid var(--line);
  background:none;border-left:0;border-right:0;border-top:0;text-align:left;width:100%;padding:0;}
.list .item .grow{flex:1;}
.list .item.off{color:var(--sub);}
.cal{display:grid;grid-template-columns:repeat(7,1fr);gap:var(--s1);}
.cal .cell{height:56px;border:1px solid var(--line);border-radius:12px;display:flex;flex-direction:column;align-items:center;
  justify-content:center;color:var(--sub);background:var(--bg);font-size:15px;padding:0;}
.cal .cell svg{width:16px;height:16px;}
.cal .cell.done{background:var(--accent-soft);border-color:var(--accent-soft);color:var(--accent);}
.cal .cell.today{border:2px solid var(--accent);color:var(--accent);}

/* 설정 */
.seg{display:flex;border:1px solid var(--line);border-radius:12px;overflow:hidden;}
.seg button{flex:1;min-height:44px;border:0;background:var(--bg);cursor:pointer;}
.seg button[aria-pressed="true"]{background:var(--accent);color:#fff;}
.switch{width:52px;height:32px;border-radius:var(--r-pill);background:var(--line);border:0;position:relative;cursor:pointer;flex:none;}
.switch::after{content:"";position:absolute;top:3px;left:3px;width:26px;height:26px;border-radius:50%;background:#fff;}
.switch[aria-checked="true"]{background:var(--accent);}
.switch[aria-checked="true"]::after{left:23px;}
.setting{display:flex;align-items:center;justify-content:space-between;gap:var(--s3);min-height:56px;}
.sep{border:0;border-top:1px solid var(--line);margin:var(--s2) 0;width:100%;}

/* 시트(확인) */
.sheet-wrap{position:fixed;inset:0;background:rgba(17,19,24,.4);display:flex;align-items:flex-end;z-index:10;}
.sheet{background:var(--bg);width:100%;border-radius:var(--r-card) var(--r-card) 0 0;
  padding:var(--s5) var(--pad) calc(env(safe-area-inset-bottom) + var(--s4));display:flex;flex-direction:column;gap:var(--s3);}
.underline{text-decoration:underline;text-underline-offset:4px;}
.steps{margin:0;padding-left:1.2em;display:flex;flex-direction:column;gap:var(--s3);}
.compare-row{display:flex;justify-content:center;gap:var(--s5);}
.compare-row .jp{font-size:calc(72px * var(--fs));}
.tap-card{cursor:pointer;width:100%;font:inherit;color:inherit;}
.card .line{color:var(--sub);}
.msg{color:var(--sub);text-align:center;}
.center{text-align:center;}
.stack{display:flex;flex-direction:column;gap:var(--s2);}
.prompt-big{font-size:var(--t-kana);text-align:center;}
.prompt-word{font-size:var(--t-jp);text-align:center;}
.prompt-ko{font-size:var(--t-h);font-weight:600;text-align:center;}
.score{font-size:var(--t-title);font-weight:700;}
.list .item .jp{font-size:var(--t-h);}
.list .item svg{width:20px;height:20px;color:var(--accent);}
svg{flex:none;}