/* =========================
   Webfont
========================= */
@font-face {
  font-family: 'GangwonEduSaeeum_OTFMediumA';
  src: url('https://fastly.jsdelivr.net/gh/projectnoonnu/noonfonts_2201-2@1.0/GangwonEduSaeeum_OTFMediumA.woff') format('woff');
  font-weight: normal;
  font-style: normal;
}

/* =========================
   Design Tokens (Autumn)
========================= */
:root{
  --bg: #fff7ed;                  /* 따뜻한 크림 */
  --ink: #3a2a25;                 /* 다크 브라운 텍스트 */
  --card: #fffaf3;                /* 카드 배경 */
  --muted: #8b6f63;               /* 보조 텍스트 */
  --accent: #b04a2b;              /* 메인 포인트 (브릭) */
  --accent-2: #d97706;            /* 포인트2 (호박 오렌지) */
  --rose: #ab2646;                /* 버건디 */
  --leaf: #d4a373;                /* 낙엽 베이지 */
  --line: #ead9c8;                /* 경계선 */
  --shadow: 0 10px 24px rgba(108,63,39,.12);
  --radius: 14px;
  --radius-lg: 18px;
  --frame-width: clamp(320px, 88vw, 440px);
  --frame-height: clamp(560px, 82vh, 640px);
}

/* =========================
   Reset & Base
========================= */
*{box-sizing:border-box; margin:0; padding:0;}

html, body{
  margin:0;
  display:flex;
  flex-direction:column;
  align-items:center;
  background:
    radial-gradient(1200px 600px at 10% -10%, #ffe9c7 0%, transparent 60%),
    radial-gradient(1000px 500px at 110% 10%, #ffe1d2 0%, transparent 55%),
    var(--bg);
  color:var(--ink);
  font-family:'GangwonEduSaeeum_OTFMediumA', Arial, sans-serif;
  overflow-x:hidden;
  overflow-y:auto;
  min-height:100vh;
}

/* 살짝 그레인 텍스처 */
body::after{
  content:"";
  position:fixed; inset:0;
  pointer-events:none;
  background-image:url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' opacity='0.07'><filter id='n'><feTurbulence type='fractalNoise' baseFrequency='0.8' numOctaves='2'/><feColorMatrix type='saturate' values='0'/></filter><rect filter='url(%23n)' width='100%' height='100%' fill='white'/></svg>");
  mix-blend-mode:multiply;
}

/* =========================
   Navigation
========================= */
nav {
  position: fixed;
  top: 0; left: 0;
  width: 100%;
  background:linear-gradient(180deg, #fff2e0, #ffeede);
  border-bottom: 1px solid var(--line);
  z-index: 1000;
}
nav ul {
  list-style: none;
  display: flex;
  justify-content: flex-end;
  gap: 8px;
  margin: 0;
  padding: 10px 20px;
}
nav ul li { display: inline; }
nav ul li a {
  color: var(--ink);
  text-decoration: none;
  padding: 8px 12px;
  font-size: 14px;
  border-radius: 10px;
}
nav ul li a:hover {
  background:rgba(208,129,73,.12);
}


/* 상단 고정으로 인해 본문 상단 여백 확보 */
.ad-container{ margin-top:18px; }

/* =========================
   App Shell
========================= */
#app {
  width: 360px;
  height: 550px;
  position: relative;
  background: var(--panel);
  overflow: hidden;
  border-radius: 16px;
  box-shadow: var(--shadow);
  border: 1px solid var(--line);
}

/* 공통 Screen */
.screen{
  width:100%; height:100%;
  position:absolute; inset:0;
  display:none;
}
.screen.active{
  display:flex !important;
  flex-direction:column;
  justify-content:center;
  align-items:center;
}

/* =========================
   Start Screen
========================= */
#start-screen{ position:relative; }

.background-img{
  position:absolute; inset:0;
  width:100%; height:100%;
  object-fit:cover;
  filter:saturate(0.95) contrast(1.02);
}

.counter-badge{
  position:absolute; top:12px; right:12px;
  background:rgba(58,42,37,.72);
  color:#fff; padding:6px 10px; border-radius:999px;
  font-size:12px; font-weight:700;
  backdrop-filter: blur(3px);
  pointer-events:none;
  box-shadow:0 4px 12px rgba(0,0,0,.12);
}

.start-btn-container{
  position:absolute; left:50%; bottom:40px; transform:translateX(-50%);
  z-index:1;
}
#start-btn{
  padding:12px 24px; border:none; cursor:pointer; font-weight:800; font-size:16px;
  border-radius:999px;
  color:#fff;
  background:
    linear-gradient(180deg, #cf6a2f 0%, #b04a2b 100%);
  box-shadow: 0 10px 18px rgba(176,74,43,.25);
  transition: transform .05s ease, filter .2s ease;
}
#start-btn:hover{ filter:brightness(1.05) saturate(1.05); }
#start-btn:active{ transform: translateY(1px) scale(.99); }

/* =========================
   Gender Screen
========================= */
#gender-screen{
  background: linear-gradient(180deg, #ffe9d6 0%, #ffe2d0 100%);
}
.gender-container{
  display:flex; gap:16px;
}
.gender-box{
  width:120px; height:150px; cursor:pointer;
  border:1.5px solid var(--line); border-radius:var(--radius);
  background:linear-gradient(180deg, #fffefb, #fff3e6);
  box-shadow: 0 8px 18px rgba(120,60,32,.10);
  font-size:18px; font-weight:800; color:var(--ink);
  transition: transform .08s ease, box-shadow .2s ease, border-color .2s ease;
}
.gender-box:hover{
  transform: translateY(-2px);
  box-shadow: 0 12px 22px rgba(120,60,32,.14);
  border-color:#e9c7a7;
}

/* =========================
   Quiz Screen
========================= */
#quiz-screen{
  background:linear-gradient(180deg, #ffe7cf 0%, #ffe0c7 100%);
  padding:18px 16px;
  justify-content:space-between; align-items:center;
}

/* 진행바 */
.progress-wrap{
  display:flex; align-items:center; gap:8px;
  margin:8px auto 10px; width:100%; max-width:360px; padding:0 4px;
}
#progress-track{
  flex:1; position:relative; height:18px;
  background:#fff5ea; border:1.5px solid #efcfb6; border-radius:999px; overflow:hidden;
  box-shadow: inset 0 1px 2px rgba(0,0,0,.04);
}
#progress-fill{
  height:100%; width:0%;
  background:linear-gradient(90deg, #f59f0b, #d97706);
  transition:width .25s ease;
}
#progress-count{
  position:absolute; inset:0; display:flex; align-items:center; justify-content:center;
  font-size:12px; font-weight:700; color:#5b463f;
  text-shadow:0 1px 0 rgba(255,255,255,.65);
  pointer-events:none;
}

/* 질문 카드 */
.question-box{
  width:92%;
  border:1.5px solid var(--line);
  border-radius:20px;
  padding:16px 14px;
  min-height:150px;
  margin:18px 0 14px;
  font-size:18px; line-height:1.55; font-weight:800;
  background:
    radial-gradient(600px 300px at 10% -20%, #fff1df 0%, transparent 60%),
    radial-gradient(600px 300px at 110% 0%, #ffeede 0%, transparent 55%),
    var(--card);
  box-shadow: var(--shadow);
  color:var(--ink);
}

/* 선택지 */
.choices{
  display:flex; flex-direction:column; gap:12px;
  margin-bottom:28px; width:92%;
}
.choice-btn{
  padding:12px 12px; cursor:pointer; text-align:left;
  font-size:18px; line-height:1.45; font-weight:700;
  border-radius:14px; border:1.5px solid #e8cdb8;
  background:
    linear-gradient(180deg, #fffefd 0%, #fff5eb 100%);
  color:#3f302b;
  box-shadow: 0 6px 14px rgba(140,70,40,.10);
  transition: transform .05s ease, filter .2s ease, border-color .2s ease;
}
.choice-btn:hover{
  filter:brightness(1.03);
  border-color:#e3b896;
}
.choice-btn:active{
  transform: translateY(1px) scale(.995);
}

/* =========================
   Result Screen
========================= */
#result-screen{
  background:linear-gradient(180deg, #fff3e3 0%, #ffe9d0 100%);
  justify-content:center; align-items:center;
  padding:20px 16px;
}

.result-card{
  width:96%;
  background:
    radial-gradient(600px 320px at -20% 0%, rgba(255,223,196,.65) 0%, transparent 60%),
    radial-gradient(600px 340px at 120% 20%, rgba(255,214,194,.65) 0%, transparent 55%),
    var(--card);
  border:1.5px solid rgba(232,196,168,.85);
  border-radius:24px;
  box-shadow:0 18px 32px rgba(140,70,40,.16);
  padding:26px 22px;
  display:flex;
  flex-direction:column;
  gap:26px;
}

.result-header h2{
  font-size:26px;
  font-weight:800;
  color:var(--accent);
  text-align:center;
}

.result-score-wrap{
  display:flex;
  flex-direction:column;
  gap:12px;
  align-items:center;
}

.result-percent{
  font-size:48px;
  font-weight:900;
  color:var(--accent-2);
  text-shadow:0 4px 12px rgba(217,119,6,.32);
}

.result-bar{
  position:relative;
  width:100%;
  height:24px;
  border-radius:999px;
  border:1.5px solid rgba(224,175,137,.8);
  background:linear-gradient(180deg, rgba(255,242,225,.95), rgba(255,229,197,.95));
  overflow:hidden;
  box-shadow: inset 0 2px 4px rgba(0,0,0,.08);
}

#result-bar-fill{
  position:absolute;
  inset:0;
  width:0%;
  background:linear-gradient(90deg, #f97316, #ea580c);
  transition:width .35s ease;
}

.result-body{
  text-align:center;
  display:flex;
  flex-direction:column;
  gap:12px;
}

.result-name{
  font-size:28px;
  font-weight:900;
  color:var(--rose);
}

.result-description{
  font-size:18px;
  line-height:1.7;
  color:var(--muted);
}

/* =========================
   Bottom Actions
========================= */
#bottom-actions{
  width:var(--frame-width);
  margin:28px auto;
  display:flex; flex-wrap:wrap; gap:10px; justify-content:center;
}
#bottom-actions button{
  flex:1 1 auto; min-width:110px; text-align:center;
}

/* Kakao */
#share-kakao{
  font-family:'GangwonEduSaeeum_OTFMediumA', Arial, sans-serif;
  font-size:18px; padding:10px 20px; border-radius:12px; border:none; cursor:pointer;
  background:#fee500; color:#1c1207; font-weight:800;
  box-shadow: 0 8px 18px rgba(185,140,0,.22);
}
#share-kakao:hover{ filter:brightness(1.03); }

/* Restart */
#restart-btn{
  font-family:'GangwonEduSaeeum_OTFMediumA', Arial, sans-serif;
  font-size:18px; padding:10px 20px; border-radius:12px; border:none; cursor:pointer;
  background: linear-gradient(180deg, #ffd9c7 0%, #ffc9b3 100%);
  color:#5a2f24; font-weight:800;
  box-shadow: 0 8px 18px rgba(176,74,43,.15);
}
#restart-btn:hover{ filter:brightness(1.04); }

/* Other Test */
#other-test-btn{
  font-family:'GangwonEduSaeeum_OTFMediumA', Arial, sans-serif;
  font-size:18px; padding:10px 18px; border-radius:12px; border:none; cursor:pointer;
  background: linear-gradient(180deg, #cfe8ff 0%, #9fd5ff 100%);
  color:#08324a; box-shadow:0 8px 18px rgba(120,198,255,.22);
  border:1px solid rgba(80,160,220,.18);
  font-weight:800;
}
#other-test-btn:hover{ filter:saturate(1.05) brightness(1.05); }

/* =========================
   Ads
========================= */
.ad-container,
.footer-ad-container{
  width:100%; min-height:90px; height:auto;
  display:flex; justify-content:center; align-items:center;
  overflow:auto;
}
.footer-ad-container{ margin-top:30px; }
.adsbygoogle{ display:block; width:100%; height:auto !important; }

/* =========================
   Small leaf corners (optional)
========================= */
#app::before, #app::after{
  content:"";
  position:absolute; width:100px; height:100px; z-index:0; opacity:.18;
  background: radial-gradient(circle at 30% 30%, var(--leaf), transparent 60%);
  filter: blur(1px);
}
#app::before{ top:-18px; left:-18px; border-top-left-radius:var(--radius-lg); }
#app::after{ bottom:-18px; right:-18px; border-bottom-right-radius:var(--radius-lg); }

/* =========================
   Accessibility tweaks
========================= */
[role="progressbar"]{ outline:none; }
button:focus-visible{
  outline:2px solid var(--rose);
  outline-offset:3px;
}