/* 3분묵상 365일 화면 스타일 — kwebtoon.css 무대 위에 톤 보정을 얹고, 퀘스트 대시보드는
   self-study.css의 종이·잉크 팔레트를 그대로 가져와 차분한 톤을 유지한다. */
:root{
  --med-ink:#17322f; --med-ink-soft:#5c7a71; --med-paper:#f7f3e9; --med-panel:#ffffff; --med-panel-2:#eef3ec;
  --med-green:#2ca77e; --med-green-dark:#1f7a5c; --med-blue:#4a90c2; --med-gold:#f0c869; --med-pink:#ec7c68;
  --med-line:#17322f33; --med-shadow-md:4px 4px 0 #17322f26; --med-shadow-lg:7px 7px 0 #17322f2e;
}
*{box-sizing:border-box}
html,body{margin:0;min-height:100%}
body{
  font-family:"Gowun Dodum", system-ui, sans-serif; color:var(--med-ink); overflow-x:hidden;
  background:radial-gradient(1100px 640px at 15% -10%, #fffaf0, transparent 60%),
    radial-gradient(800px 460px at 100% 0%, #eaf3ee, transparent 55%), var(--med-paper);
}
h1,h2,h3,button{font-family:"Jua","Black Han Sans","Noto Sans KR",sans-serif;font-weight:400}
button{font:inherit;cursor:pointer}
button:focus-visible{outline:3px solid #fff;outline-offset:2px}
img{max-width:100%}
[hidden]{display:none!important}

/* ── 무대(kwebtoon.css) 보정 ──
   self-study.css와 같은 이유로 같은 오버라이드가 필요하다 — 가상 1600x900 맵 좌표계 없이
   무대(.kw-hero) 자체를 좌표 기준으로 쓰는 단순화판이라 캐릭터 크기를 눌러야 하고, 모바일
   좁은 화면에서 캐릭터 이미지가 노드 탭을 가로막지 않도록 포인터 이벤트를 꺼야 한다
   (self-study.css 2026-09-12 실측 버그 수정을 그대로 승계). */
#medScene .kw-actor{height:clamp(120px,22vh,220px)}
#medScene{background:var(--kw-ink)}
#medScene .kw-actor,#medScene .kw-actor-sh{pointer-events:none}
/* 공유 월드 배경은 원래 화려한 판타지 성/포탈 톤이라 "차분한 묵상"과 안 맞는다 — 저채도
   청록 워시를 얹어 톤을 가라앉힌다(새 배경 그림을 그리지 않고 기존 배경을 재사용). */
.med-scene-tint{
  position:absolute;inset:0;z-index:2;pointer-events:none;
  background:linear-gradient(160deg, rgba(23,50,47,.38), rgba(74,144,194,.22) 55%, rgba(23,50,47,.4));
  mix-blend-mode:multiply;
}
.med-age-chip{font-size:12px!important;font-weight:900}
.med-age-chip.is-active{background:var(--kw-gold)!important;color:var(--kw-ink)}

/* ── 퀘스트 대시보드 상단 HUD (kwebtoon-game-v2.css .hud 구조를 종이·잉크 톤으로 재정의) ── */
.med-hud{
  position:sticky;top:0;z-index:50;display:flex;align-items:center;gap:10px;
  padding:10px 16px;background:linear-gradient(180deg,#fffaf0ee,#f3efe0dd);
  backdrop-filter:blur(12px);border-bottom:2px solid var(--med-ink);
}
.med-hud-back{display:inline-flex;align-items:center;gap:6px;font-size:.82rem;font-weight:800;
  color:var(--med-ink);padding:8px 12px;border-radius:999px;flex-shrink:0;text-decoration:none}
.med-hud-back:hover{background:#17322f14}
.med-hud-title{font-size:.92rem;font-weight:900;white-space:nowrap;overflow:hidden;text-overflow:ellipsis;flex:1;min-width:0}
.med-hud-chips{display:flex;gap:6px;flex-shrink:0;overflow-x:auto;scrollbar-width:none}
.med-hud-chips::-webkit-scrollbar{display:none}
.med-hchip{display:inline-flex;align-items:center;gap:4px;padding:6px 11px;border-radius:999px;
  font-weight:900;font-size:.74rem;white-space:nowrap;background:var(--med-panel-2);color:var(--med-ink)}
.med-hchip.lv{background:linear-gradient(135deg,var(--med-green),var(--med-green-dark));color:#fff}
.med-hchip.xp{background:linear-gradient(135deg,#fff0c8,#f0c869);color:#6b4a17}
.med-hchip.streak{background:linear-gradient(135deg,#ffe1d6,#ec7c68);color:#5c1f14}
.med-hchip.month{background:linear-gradient(135deg,#dbeaf3,#4a90c2);color:#fff}

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

.med-step-dots{display:flex;justify-content:center;gap:8px;margin:6px 0 16px}
.med-step-dots span{width:10px;height:10px;border-radius:50%;background:var(--med-panel-2);border:2px solid var(--med-line)}
.med-step-dots span.on{background:var(--med-green);border-color:var(--med-green-dark)}

.med-section h2{font-size:1.05rem;margin:0 0 10px}
.med-card{background:var(--med-panel);border:2px solid var(--med-ink);border-radius:20px;box-shadow:var(--med-shadow-md);padding:18px}
.med-card h3{margin:0 0 8px;font-size:1.2rem}
.med-card p{margin:0 0 10px;font-size:.98rem;line-height:1.55}
.med-card p:last-child{margin-bottom:0}

.med-emotion-picker{display:grid;grid-template-columns:repeat(5, 1fr);gap:8px;margin:4px 0 14px}
.med-emotion{display:flex;flex-direction:column;align-items:center;gap:4px;padding:10px 4px;border-radius:14px;
  border:2px solid var(--med-line);background:var(--med-panel-2)}
.med-emotion span{font-size:1.6rem}
.med-emotion small{font-size:.65rem;color:var(--med-ink-soft)}
.med-emotion.is-picked{border-color:var(--med-blue);background:#dbeaf3}

.med-breath-wrap{display:flex;flex-direction:column;align-items:center;gap:8px;margin:10px 0 14px}
.med-breath-status{font-size:.82rem;color:var(--med-ink-soft);text-align:center;margin:0}
.med-btn-ghost{min-height:44px;padding:8px 20px;border-radius:14px;border:2px solid var(--med-green);background:#fff;
  color:var(--med-green-dark);font-size:.9rem;font-weight:800}

.med-question{font-size:1rem;font-weight:700;margin-top:6px!important}

.med-record{width:100%;min-height:44px;margin:10px 0;padding:10px 12px;border-radius:12px;border:2px solid var(--med-line);
  font-family:inherit;font-size:.92rem;resize:vertical;background:var(--med-panel-2);color:var(--med-ink)}

.med-btn{display:block;width:100%;margin-top:14px;min-height:52px;padding:12px 18px;border-radius:16px;border:0;
  font-size:1.02rem;font-weight:900;background:linear-gradient(135deg,var(--med-green),var(--med-green-dark));color:#fff;
  box-shadow:0 4px 0 #0f4a37}
.med-btn:active{transform:translateY(3px);box-shadow:none}
.med-btn:disabled{background:#d8ceb4;box-shadow:none;color:#7a625a}

.notice{text-align:center;padding:40px 16px;color:var(--med-ink-soft)}

/* ── 떠다니는 K웹툰 코치(self-study.css .ss-coach 포팅) ── */
.med-coach{position:fixed;right:16px;bottom:16px;z-index:300;display:flex;align-items:flex-end;gap:8px;pointer-events:none}
.med-coach img{width:76px;height:76px;object-fit:contain;filter:drop-shadow(0 10px 18px rgba(0,0,0,.35));
  animation:medFloat 3.2s ease-in-out infinite;transition:transform .25s}
.med-coach.med-pulse img{animation:medPop .5s ease}
.med-coach.med-breathing img{animation:medBreathe 4s ease-in-out infinite}
.med-coach-bubble{background:#fff;color:var(--med-ink);font-size:.82rem;font-weight:800;padding:9px 13px;
  border-radius:15px 15px 4px 15px;box-shadow:0 10px 22px rgba(10,30,20,.3);max-width:210px;line-height:1.4;
  opacity:0;transform:translateY(6px) scale(.94);transition:opacity .2s,transform .2s;margin-bottom:8px}
.med-coach.med-show .med-coach-bubble{opacity:1;transform:translateY(0) scale(1)}
@keyframes medFloat{0%,100%{transform:translateY(0)}50%{transform:translateY(-7px)}}
@keyframes medPop{0%{transform:scale(.9)}55%{transform:scale(1.08)}100%{transform:scale(1)}}
@keyframes medBreathe{0%,100%{transform:scale(.86)}50%{transform:scale(1.18)}}
@media(max-width:640px){.med-coach img{width:60px;height:60px}.med-coach-bubble{max-width:150px;font-size:.76rem}}
@media(prefers-reduced-motion:reduce){.med-coach img,.med-coach.med-breathing img{animation:none!important}}

/* ── 완료 축하 오버레이(self-study.css .ss-clear-overlay 포팅) ── */
.med-clear-overlay{position:fixed;inset:0;z-index:500;display:flex;align-items:center;justify-content:center;
  background:rgba(23,50,47,.55);backdrop-filter:blur(2px);opacity:0;pointer-events:none;transition:opacity .25s}
.med-clear-overlay.med-show{opacity:1;pointer-events:auto}
.med-clear-card{position:relative;background:var(--med-panel);border:2px solid var(--med-gold);border-radius:28px;
  padding:36px 32px 30px;max-width:320px;width:calc(100% - 40px);text-align:center;box-shadow:var(--med-shadow-lg);
  transform:scale(.85) translateY(10px);opacity:0;transition:transform .3s cubic-bezier(.2,1.4,.4,1),opacity .3s}
.med-clear-overlay.med-show .med-clear-card{transform:scale(1) translateY(0);opacity:1}
.med-clear-mascot{width:108px;height:108px;object-fit:contain;margin-bottom:10px;filter:drop-shadow(0 8px 14px rgba(0,0,0,.3))}
.med-clear-title{font-size:24px;font-weight:700;color:var(--med-ink);margin-bottom:6px}
.med-clear-sub{font-size:13.5px;color:var(--med-ink-soft);line-height:1.6;margin-bottom:18px}
.med-clear-close{border:0;border-radius:14px;padding:12px 22px;font-weight:900;font-size:14px;color:#fff;
  background:linear-gradient(135deg,var(--med-green),var(--med-green-dark));box-shadow:0 4px 0 #0f4a37;cursor:pointer}
.med-clear-close:active{transform:translateY(3px);box-shadow:none}
.med-confetti{position:absolute;inset:0;overflow:hidden;pointer-events:none;border-radius:inherit}
.med-confetti-bit{position:absolute;top:-40px;font-size:22px;animation-name:medConfettiFall;animation-timing-function:ease-in;animation-iteration-count:1}
@keyframes medConfettiFall{0%{transform:translateY(0) rotate(0deg);opacity:1}100%{transform:translateY(110vh) rotate(360deg);opacity:.15}}

/* ── 캘린더 오버레이(365일 아무 날짜나) ── */
.med-cal-overlay{position:fixed;inset:0;z-index:400;display:flex;align-items:center;justify-content:center;
  background:rgba(23,50,47,.55);backdrop-filter:blur(2px);padding:16px}
.med-cal-card{position:relative;width:min(420px,100%);max-height:86vh;overflow-y:auto;background:var(--med-panel);
  border:2px solid var(--med-ink);border-radius:24px;box-shadow:var(--med-shadow-lg);padding:20px}
.med-cal-close{position:absolute;right:14px;top:14px;width:32px;height:32px;border-radius:50%;border:2px solid var(--med-ink);
  background:#fff;font-weight:900}
.med-cal-year{font-size:.82rem;color:var(--med-ink-soft);margin:0 30px 10px 0}
.med-cal-month{font-size:.78rem;color:var(--med-ink-soft);margin:8px 0 0}

.med-chips{display:flex;gap:6px;overflow-x:auto;padding:4px 2px 10px;-webkit-overflow-scrolling:touch}
.med-chip{flex:0 0 auto;min-height:36px;padding:6px 13px;border-radius:999px;border:2px solid var(--med-line);
  background:#fff;font-size:.82rem;color:var(--med-ink-soft)}
.med-chip.is-active{background:var(--med-blue);color:#fff;border-color:var(--med-blue)}

.med-day-grid{display:grid;grid-template-columns:repeat(7, 1fr);gap:6px}
.med-dot{aspect-ratio:1;border-radius:10px;border:2px solid var(--med-line);background:#fff;
  font-size:.8rem;color:var(--med-ink-soft)}
.med-dot.is-done{background:var(--med-green);color:#fff;border-color:var(--med-green-dark)}
.med-dot.is-today{box-shadow:0 0 0 2px var(--med-gold)}

@media(max-width:640px){
  .med-hchip{font-size:.68rem;padding:5px 9px}
  .med-emotion-picker{gap:6px}
}
@media(prefers-reduced-motion:reduce){*,*::before,*::after{animation-duration:.01ms!important}}