/* =========================================================
   미화의 무한도전 — 일본어 공부편
   스타일 A (따뜻한 사쿠라) · 라이트 글래스모피즘 · 70대 가독성
   ========================================================= */
*{margin:0;padding:0;box-sizing:border-box;-webkit-font-smoothing:antialiased;-webkit-tap-highlight-color:transparent;}
:root{
  --font:"Noto Sans KR",-apple-system,BlinkMacSystemFont,sans-serif;
  --font-jp:"Noto Sans JP","Noto Sans KR",sans-serif;
  --r-card:26px;
  /* 스타일 A — 따뜻한 사쿠라 */
  --bg-grad:linear-gradient(165deg,#fff7f0 0%,#ffe6ee 46%,#efe6ff 100%);
  --ink:#3c2f3a; --ink-soft:#7d6a78;
  --accent:#e8688f; --accent-deep:#c84b78; --accent2:#a07bff;
  --glass:rgba(255,255,255,.60);
  --glass-strong:rgba(255,255,255,.76);
  --glass-line:rgba(255,255,255,.88);
  --shadow:0 14px 34px rgba(180,90,130,.18);
  --shadow-inset:inset 0 1px 0 rgba(255,255,255,.65);
  --chip-bg:rgba(255,255,255,.62);
  --safe-top:env(safe-area-inset-top,0px);
  --safe-bot:env(safe-area-inset-bottom,0px);
}
html,body{height:100%;}
body{
  font-family:var(--font);
  color:var(--ink);
  background:var(--bg-grad) fixed;
  background-size:cover;
  min-height:100dvh;
  overflow:hidden; /* 화면 스크롤은 .screen 내부에서 */
}
#app{position:relative;width:100%;height:100vh;height:100dvh;max-width:520px;margin:0 auto;overflow:hidden;}
.screen{
  position:absolute;inset:0;
  display:flex;flex-direction:column;
  overflow-y:auto;-webkit-overflow-scrolling:touch;
  padding-top:var(--safe-top);
  background:var(--bg-grad);
  opacity:0;visibility:hidden;transform:translateY(8px);
  transition:opacity .32s ease, transform .32s ease, visibility .32s;
}
.screen.active{opacity:1;visibility:visible;transform:none;}
.screen::-webkit-scrollbar{width:0;height:0;}

/* ---------- 공통 버튼 택타일 피드백 ---------- */
button{font-family:inherit;border:none;background:none;cursor:pointer;color:inherit;}
.tap:active{transform:scale(.96);}
@media (prefers-reduced-motion:reduce){
  *{animation:none!important;transition:none!important;}
}

/* ---------- 상단 앱바 ---------- */
.appbar{display:flex;align-items:center;gap:14px;padding:16px 20px 14px;}
.appbar .back{
  width:52px;height:52px;flex:0 0 auto;border-radius:16px;
  background:var(--glass);border:1.5px solid var(--glass-line);
  backdrop-filter:blur(12px);-webkit-backdrop-filter:blur(12px);
  box-shadow:var(--shadow),var(--shadow-inset);
  display:flex;align-items:center;justify-content:center;
  font-size:30px;font-weight:900;color:var(--ink);line-height:1;
}
.appbar h2{font-size:25px;font-weight:900;letter-spacing:-.3px;}

/* ---------- 홈 ---------- */
.hero{padding:22px 24px 8px;}
.badge-book{
  display:inline-flex;align-items:center;gap:8px;
  background:var(--glass);border:1.5px solid var(--glass-line);
  backdrop-filter:blur(12px);-webkit-backdrop-filter:blur(12px);
  border-radius:999px;padding:10px 16px;font-size:14px;font-weight:800;
  color:var(--accent-deep);box-shadow:var(--shadow),var(--shadow-inset);
}
.badge-book .ico,
.book-chip .ico{width:17px;height:17px;display:block;flex:0 0 auto;}   /* 크기를 안 주면 스플래시 칩에서 아이콘이 커져 글이 세 줄로 깨진다 */
.hero h1{font-size:40px;font-weight:900;line-height:1.16;margin:18px 0 8px;letter-spacing:-.6px;}
.hero h1 .accent{color:var(--accent);}
.hero .sub{font-size:18px;font-weight:700;color:var(--ink);}
.home-body{padding:14px 22px calc(34px + var(--safe-bot));}
.enter-card{
  display:block;width:100%;text-align:left;
  background:var(--glass);border:2px solid var(--glass-line);
  backdrop-filter:blur(18px);-webkit-backdrop-filter:blur(18px);
  border-radius:var(--r-card);padding:24px;box-shadow:var(--shadow),var(--shadow-inset);
  margin-bottom:18px;position:relative;overflow:hidden;
  transition:transform .18s ease, box-shadow .18s ease;
}
.enter-card:active{transform:scale(.985);}
.enter-card .num{font-size:15px;font-weight:900;color:var(--accent-deep);letter-spacing:1px;}
.enter-card .t{font-size:30px;font-weight:900;margin:6px 0 6px;}
.enter-card .d{font-size:16px;font-weight:600;color:#5c4d58;line-height:1.5;}
.enter-card .count{
  position:absolute;top:22px;right:22px;background:var(--accent);color:#fff;
  font-size:15px;font-weight:800;border-radius:999px;padding:8px 15px;
  box-shadow:0 8px 18px rgba(200,75,120,.32);
}
.enter-card .arrow{margin-top:16px;display:inline-flex;align-items:center;gap:8px;font-size:18px;font-weight:800;color:var(--accent-deep);}
.tip{
  background:var(--glass-strong);border:1.5px solid var(--glass-line);
  backdrop-filter:blur(14px);-webkit-backdrop-filter:blur(14px);
  border-radius:22px;padding:22px;box-shadow:var(--shadow),var(--shadow-inset);
}
.tip h3{font-size:18px;font-weight:900;margin-bottom:12px;display:flex;align-items:center;gap:9px;}
.tip ol{list-style:none;counter-reset:t;}
.tip li{counter-increment:t;font-size:16px;font-weight:500;color:var(--ink);line-height:1.55;padding-left:34px;position:relative;margin-bottom:11px;}
.tip li:last-child{margin-bottom:0;}
.tip li b{color:var(--accent-deep);font-weight:800;}
.tip li::before{
  content:counter(t);position:absolute;left:0;top:1px;width:24px;height:24px;border-radius:50%;
  background:var(--accent);color:#fff;font-size:14px;font-weight:800;
  display:flex;align-items:center;justify-content:center;
}

/* ---------- 탭 ---------- */
.tabs{display:flex;gap:10px;padding:2px 22px 16px;}
.tab{
  flex:1;text-align:center;padding:16px 0;border-radius:18px;font-size:19px;font-weight:900;
  background:var(--glass);border:1.5px solid var(--glass-line);
  backdrop-filter:blur(12px);-webkit-backdrop-filter:blur(12px);
  color:var(--ink-soft);box-shadow:var(--shadow),var(--shadow-inset);
  transition:transform .15s ease;
}
.tab:active{transform:scale(.97);}
.tab.on{background:var(--accent);color:#fff;border-color:transparent;box-shadow:0 10px 24px rgba(200,75,120,.34);}

/* ---------- 섹션 헤더 / 과 헤더 ---------- */
.sec{padding:10px 24px 8px;display:flex;align-items:center;gap:10px;}
.sec .label{font-size:16px;font-weight:900;color:var(--accent-deep);white-space:nowrap;display:flex;align-items:center;gap:7px;}
.sec .line{height:2px;flex:1;background:linear-gradient(90deg,var(--accent),transparent);opacity:.4;border-radius:2px;}
.lesson-head{
  margin:8px 22px 14px;background:linear-gradient(135deg,var(--accent),var(--accent2));
  border-radius:22px;padding:18px 22px;color:#fff;box-shadow:0 14px 30px rgba(160,90,130,.3);
}
.lesson-head .n{font-size:14px;font-weight:800;opacity:.92;letter-spacing:1px;}
.lesson-head .jp{font-family:var(--font-jp);font-size:24px;font-weight:900;margin:5px 0 3px;}
.lesson-head .ko{font-size:15px;font-weight:600;opacity:.95;}

/* ---------- 트랙 카드 ---------- */
.list-body{padding-bottom:calc(28px + var(--safe-bot));}
.track{
  display:flex;align-items:center;gap:15px;width:100%;text-align:left;
  background:var(--glass);border:1.5px solid var(--glass-line);
  backdrop-filter:blur(16px);-webkit-backdrop-filter:blur(16px);
  border-radius:22px;padding:15px;margin:0 22px 13px;width:calc(100% - 44px);
  box-shadow:var(--shadow),var(--shadow-inset);
  transition:transform .16s ease, box-shadow .16s ease;
  animation:rise .45s both;animation-delay:calc(var(--i,0) * 35ms);
}
.track:active{transform:scale(.98);}
.track.playing{border-color:var(--accent);box-shadow:0 12px 30px rgba(200,75,120,.28),var(--shadow-inset);}
.track .no{
  flex:0 0 auto;width:50px;height:54px;border-radius:14px;
  background:var(--glass-strong);border:1.5px solid var(--glass-line);
  display:flex;flex-direction:column;align-items:center;justify-content:center;
}
.track .no b{font-size:19px;font-weight:900;color:var(--accent-deep);line-height:1;}
.track .no span{font-size:13px;font-weight:700;color:var(--ink);margin-top:3px;font-variant-numeric:tabular-nums;}
.track .body{flex:1;min-width:0;}
.track .jp{font-family:var(--font-jp);font-size:21px;font-weight:800;line-height:1.3;color:var(--ink);display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical;overflow:hidden;}
.track .meta{display:flex;align-items:center;gap:7px;margin-top:7px;flex-wrap:wrap;}
.track .corner{font-size:13px;font-weight:800;padding:3px 10px;border-radius:8px;color:#fff;}
.track .ref{font-size:14px;font-weight:700;color:var(--ink);}
.track .ttl{font-size:15px;font-weight:600;color:var(--ink);line-height:1.4;margin-top:6px;display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical;overflow:hidden;}
.track .play{
  flex:0 0 auto;width:56px;height:56px;border-radius:50%;background:var(--accent);
  display:flex;align-items:center;justify-content:center;box-shadow:0 10px 22px rgba(200,75,120,.4);
}
.track .play svg{width:24px;height:24px;fill:#fff;margin-left:3px;}
.track.playing .play svg{margin-left:0;}
.c-도입{background:#8a63d2;}.c-문법노트{background:#3b82c4;}.c-회화{background:#3aa66a;}
.c-단어{background:#e08a2b;}.c-문자{background:#d65a86;}.c-발음{background:#1aa39a;}

@keyframes rise{from{opacity:0;transform:translateY(14px);}to{opacity:1;transform:none;}}

/* ---------- 모달 ---------- */
.modal-layer{position:absolute;inset:0;z-index:40;display:flex;align-items:flex-end;}
.modal-layer[hidden]{display:none;}
.modal-scrim{
  position:absolute;inset:0;background:rgba(40,30,45,.30);
  backdrop-filter:blur(18px) saturate(1.1);-webkit-backdrop-filter:blur(18px) saturate(1.1);
  animation:fade .3s ease both;
}
.modal{
  position:relative;width:100%;z-index:2;
  background:var(--glass-strong);border:2px solid var(--glass-line);border-bottom:none;
  backdrop-filter:blur(30px) saturate(1.3);-webkit-backdrop-filter:blur(30px) saturate(1.3);
  border-radius:34px 34px 0 0;padding:20px 22px calc(28px + var(--safe-bot));
  box-shadow:0 -12px 50px rgba(0,0,0,.25),var(--shadow-inset);
  animation:slideup .42s cubic-bezier(.16,1,.3,1) both;
  max-height:calc(100dvh - 40px);overflow-y:auto;
}
@keyframes slideup{from{transform:translateY(100%);}to{transform:none;}}
@keyframes fade{from{opacity:0;}to{opacity:1;}}
.modal .grab{
  width:46px;height:5px;border-radius:3px;background:var(--ink-soft);background-clip:content-box;
  box-sizing:content-box;opacity:.4;padding:15px 56px;margin:-6px auto 2px;display:block;
}
.modal-close{
  position:absolute;top:12px;right:12px;width:52px;height:52px;border-radius:50%;
  background:var(--glass);border:1.5px solid var(--glass-line);
  display:flex;align-items:center;justify-content:center;font-size:24px;font-weight:800;color:var(--ink-soft);z-index:3;
}
.mref{
  display:inline-flex;align-items:center;gap:6px;flex-wrap:wrap;max-width:calc(100% - 56px);
  background:var(--accent);color:#fff;font-size:14px;font-weight:800;border-radius:999px;padding:8px 14px;margin-bottom:14px;
}
.mref .b{background:rgba(255,255,255,.28);border-radius:6px;padding:1px 8px;}
.mjp{font-family:var(--font-jp);font-size:29px;font-weight:900;line-height:1.28;color:var(--ink);margin-bottom:6px;}
.mt{font-size:15px;font-weight:600;color:var(--ink-soft);margin-bottom:18px;line-height:1.45;}

/* 프로그래스바: 색 채움(.fill) + 투명 range 오버레이(드래그) */
.prog-wrap{position:relative;height:30px;display:flex;align-items:center;margin-bottom:4px;}
.prog{position:absolute;left:0;right:0;height:9px;border-radius:6px;background:rgba(0,0,0,.10);overflow:hidden;pointer-events:none;}
.prog .fill{height:100%;width:0%;border-radius:6px;background:linear-gradient(90deg,var(--accent),var(--accent2));transition:width .1s linear;}
.prog-range{
  position:absolute;left:0;right:0;width:100%;height:30px;margin:0;
  -webkit-appearance:none;appearance:none;background:transparent;
}
.prog-range::-webkit-slider-thumb{
  -webkit-appearance:none;appearance:none;width:26px;height:26px;border-radius:50%;
  background:#fff;border:3px solid var(--accent);box-shadow:0 3px 10px rgba(200,75,120,.45);cursor:pointer;
}
.prog-range::-moz-range-thumb{
  width:26px;height:26px;border-radius:50%;background:#fff;border:3px solid var(--accent);
  box-shadow:0 3px 10px rgba(200,75,120,.45);cursor:pointer;
}
.prog-range::-webkit-slider-runnable-track{background:transparent;}
.prog-range::-moz-range-track{background:transparent;}
.time{display:flex;justify-content:space-between;font-size:15px;font-weight:700;color:var(--ink);margin:6px 2px 18px;font-variant-numeric:tabular-nums;}

.controls{display:flex;align-items:center;justify-content:center;gap:24px;margin-bottom:22px;}
.ctrl-skip{
  width:76px;height:76px;border-radius:50%;background:var(--glass);border:1.5px solid var(--glass-line);
  display:flex;flex-direction:column;align-items:center;justify-content:center;color:var(--ink);
  box-shadow:var(--shadow),var(--shadow-inset);transition:transform .15s ease;
}
.ctrl-skip:active{transform:scale(.94);}
.ctrl-skip .ico{font-size:26px;font-weight:900;line-height:1;}
.ctrl-skip .s{font-size:12px;font-weight:800;margin-top:2px;color:var(--accent-deep);}
.ctrl-main{
  width:94px;height:94px;border-radius:50%;background:linear-gradient(135deg,var(--accent),var(--accent-deep));
  display:flex;align-items:center;justify-content:center;box-shadow:0 16px 36px rgba(200,75,120,.45);
  transition:transform .15s ease;
}
.ctrl-main:active{transform:scale(.95);}
.ctrl-main svg{width:38px;height:38px;fill:#fff;}
.ctrl-main.loading{opacity:.7;}
.ctrl-main.loading svg{animation:spin 1s linear infinite;}
@keyframes spin{to{transform:rotate(360deg);}}

.seg-title{font-size:14px;font-weight:800;color:var(--ink-soft);margin:0 2px 11px;display:flex;align-items:center;gap:7px;}
.seg-title[hidden]{display:none;}   /* display:flex 가 hidden 속성을 덮으므로 따로 눌러준다 */
.segs{display:flex;gap:9px;overflow-x:auto;padding:2px 2px 6px;scrollbar-width:none;}
.segs::-webkit-scrollbar{display:none;}
.seg{
  flex:0 0 auto;background:var(--chip-bg);border:1.5px solid var(--glass-line);
  backdrop-filter:blur(8px);-webkit-backdrop-filter:blur(8px);
  border-radius:14px;padding:0 16px;min-height:48px;display:flex;align-items:center;
  font-size:15px;font-weight:800;color:var(--ink);
  box-shadow:var(--shadow);white-space:nowrap;transition:transform .14s ease;
}
.seg:active{transform:scale(.95);}
.seg .tt{font-size:13px;font-weight:800;color:var(--accent-deep);margin-right:6px;font-variant-numeric:tabular-nums;}
.seg.on{background:var(--accent);color:#fff;border-color:transparent;}
.seg.on .tt{color:rgba(255,255,255,.85);}

/* ---------- 스플래시 ---------- */
#v-splash{padding:0;background:#2a1622;}
.splash-bg{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;z-index:0;background:#2a1622;}
.splash-tint{position:absolute;inset:0;z-index:1;background:linear-gradient(180deg,rgba(255,230,240,.10) 0%,rgba(60,30,55,.20) 55%,rgba(40,20,45,.58) 100%);}
.splash-vignette{position:absolute;inset:0;z-index:1;background:radial-gradient(120% 70% at 50% 42%,transparent 40%,rgba(40,15,40,.45) 100%);}
.splash-center{position:absolute;z-index:3;left:0;right:0;top:calc(44% + var(--safe-top) / 2);transform:translateY(-50%);text-align:center;padding:0 20px;animation:logoIn 1s cubic-bezier(.16,1,.3,1) both;}
.logo-top{font-family:"Black Han Sans";font-size:32px;color:#fff;text-shadow:0 3px 0 rgba(150,30,70,.55),0 6px 16px rgba(0,0,0,.4);letter-spacing:2px;margin-bottom:8px;}
.logo-main{display:flex;justify-content:center;align-items:flex-end;gap:2px;}
.logo-main span{
  font-family:"Black Han Sans";font-size:clamp(64px,21vw,86px);line-height:.9;color:#ec0a2d;
  -webkit-text-stroke:6px #fff;paint-order:stroke fill;
  text-shadow:0 7px 0 #9c0420,0 12px 22px rgba(0,0,0,.45);display:inline-block;
}
.logo-main span:nth-child(1){transform:rotate(-8deg) translateY(2px);}
.logo-main span:nth-child(2){transform:rotate(5deg) translateY(-9px) scale(1.06);}
.logo-main span:nth-child(3){transform:rotate(-5deg) translateY(7px);}
.logo-main span:nth-child(4){transform:rotate(8deg) translateY(-3px) scale(1.1);}
.logo-sub{margin-top:18px;font-family:"Black Han Sans";font-size:26px;color:#fff;letter-spacing:1px;text-shadow:0 3px 0 rgba(150,30,70,.5),0 6px 14px rgba(0,0,0,.4);}
.logo-sub b{color:#ffe27a;}
@keyframes logoIn{from{opacity:0;transform:translateY(-50%) scale(.92);}to{opacity:1;transform:translateY(-50%) scale(1);}}
.splash-bottom{position:absolute;z-index:3;left:0;right:0;bottom:calc(58px + var(--safe-bot));text-align:center;padding:0 20px;}
.book-chip{
  display:inline-flex;align-items:center;gap:8px;background:rgba(255,255,255,.28);
  backdrop-filter:blur(14px);-webkit-backdrop-filter:blur(14px);border:1.5px solid rgba(255,255,255,.55);
  border-radius:999px;padding:11px 20px;font-size:14px;font-weight:800;color:#fff;text-shadow:0 1px 3px rgba(0,0,0,.3);
}
.tap-hint{margin-top:24px;font-size:16px;font-weight:700;color:rgba(255,255,255,.95);text-shadow:0 1px 4px rgba(0,0,0,.4);animation:pulse 1.8s ease-in-out infinite;}
@keyframes pulse{0%,100%{opacity:.55;}50%{opacity:1;}}

/* ---------- 토스트 ---------- */
.toast{
  position:fixed;left:50%;bottom:calc(36px + var(--safe-bot));transform:translateX(-50%);
  z-index:80;background:rgba(60,30,45,.92);color:#fff;font-size:15px;font-weight:700;
  padding:14px 22px;border-radius:16px;box-shadow:0 12px 30px rgba(0,0,0,.3);max-width:88%;text-align:center;
  animation:fade .25s ease both;
}
.toast[hidden]{display:none;}

/* ---------- 책 고르기 (STEP1 / STEP2) ---------- */
.books-body{padding:14px 22px calc(34px + var(--safe-bot));}
.book-card{
  display:flex;align-items:center;gap:18px;width:100%;text-align:left;
  background:var(--glass);border:2px solid var(--glass-line);
  backdrop-filter:blur(18px);-webkit-backdrop-filter:blur(18px);
  border-radius:var(--r-card);padding:18px;box-shadow:var(--shadow),var(--shadow-inset);
  margin-bottom:18px;position:relative;overflow:hidden;
  transition:transform .18s ease, box-shadow .18s ease;
}
.book-card:active{transform:scale(.985);}
.book-card .cover{
  flex:0 0 132px;width:132px;border-radius:14px;overflow:hidden;
  box-shadow:0 8px 20px rgba(120,60,90,.28);background:#fff;line-height:0;
}
.book-card .cover img{width:100%;height:auto;display:block;}
.book-card .info{display:flex;flex-direction:column;gap:8px;min-width:0;flex:1;}
.book-card .step{
  font-family:"Black Han Sans";font-size:30px;line-height:1;color:var(--accent-deep);
  letter-spacing:.5px;
}
.book-card .cnt{
  align-self:flex-start;background:var(--accent);color:#fff;font-size:14px;font-weight:800;
  border-radius:999px;padding:5px 13px;box-shadow:0 4px 10px rgba(200,75,120,.3);
}
.book-card .d{font-size:15px;font-weight:600;line-height:1.5;color:var(--ink-soft);}

/* 홈 상단 「다른 책」 되돌아가기 */
.home-back{
  display:inline-flex;align-items:center;gap:4px;margin:calc(14px + var(--safe-top)) 0 0 20px;
  min-height:48px;padding:10px 16px 10px 10px;
  background:var(--chip-bg);border:1.5px solid var(--glass-line);border-radius:999px;
  backdrop-filter:blur(14px);-webkit-backdrop-filter:blur(14px);
  font-size:15px;font-weight:800;color:var(--accent-deep);box-shadow:var(--shadow-inset);
}