@font-face {
  font-family: 'Pretendard';
  src: local('Pretendard Regular'), local('Pretendard'),
       url('https://fonts.gstatic.com/s/nunito/v25/XRXW3I6Li01BKofA-seUbOvISTY.woff2') format('woff2');
  font-display: swap;
}

/* ===== Theme Vars ===== */
:root{
  --gold:#caa86b;
  --gold-deep:#b08a3c;
  --ink:#151515;
  --bg:#0b0b0c;
  --card:#121214;
  --muted:#8e8e99;
}

*{box-sizing:border-box}

/* ===== Base ===== */
html,body{
  margin:0;
  padding:0;
  background:radial-gradient(80% 80% at 50% 20%, #151515 0%, #0a0a0b 70%);
  color:#eee;
  font-family:Pretendard,system-ui,Segoe UI,Roboto,Apple SD Gothic Neo,AppleGothic,sans-serif;
}

/* 공통 muted 텍스트 */
.muted{
  color:var(--muted);
  font-size:13px;
}

/* ===== Header ===== */
.ft-header{padding:28px 16px;text-align:center}
.ft-header h1{
  margin:0;
  font-weight:800;
  letter-spacing:0.2px;
  background:linear-gradient(180deg,var(--gold),var(--gold-deep));
  -webkit-background-clip:text;background-clip:text;color:transparent;
  font-size:28px
}
.ft-header .sub{margin-top:6px;color:#d0c6ad;font-size:13px;opacity:.9}

/* ===== Layout ===== */
.container{max-width:1040px;margin:0 auto;padding:0 16px 48px}
.card{
  background:linear-gradient(180deg,#151518,#0f0f11);
  border:1px solid #26262a;
  border-radius:18px;
  padding:20px 18px;
  margin:16px 0;
  box-shadow:0 10px 30px rgba(0,0,0,.35)
}
.card h2{margin:0 0 12px;font-size:18px}
.hint{color:#a6a6b0;font-size:13px;margin-top:6px}

/* ===== 남은 질문 상태줄 ===== */
.status-row{
  margin:4px 0 10px;
  text-align:center;
  font-size:14px;
  color:#d9b98c;
}
#q-remaining-label{
  font-weight:500;
}
.q-note{
  margin-left:6px;
  opacity:.8;
  font-size:12px;
}

/* 커피 쿼터 설명 */
#coffeeQuotaHint{
  text-align:center;
  font-size:12px;
  margin-top:2px;
}

/* ===== Topics ===== */
.topics{
  display:grid;
  grid-template-columns:repeat(auto-fill,minmax(120px,1fr));
  gap:10px;
  margin-top:10px
}
.topic-btn{
  border:1px solid #2a2a30;
  background:#141418;
  color:#eaeaea;
  border-radius:999px;
  padding:10px 12px;
  font-size:14px;
  cursor:pointer;
  transition:.2s
}
.topic-btn:hover{transform:translateY(-1px);border-color:#3a3a45}
.topic-btn.active{
  background:linear-gradient(180deg,#19191b,#131316);
  border-color:var(--gold);
  color:#f8f1dc;
  box-shadow:0 0 0 1px rgba(202,168,107,.25) inset
}

/* ===== Cups ===== */
.cups{
  display:grid;
  grid-template-columns:repeat(auto-fit,minmax(220px,1fr));
  gap:16px
}
.cup{
  background:#0e0e10;
  border:1px solid #26262a;
  border-radius:16px;
  padding:14px;
  cursor:pointer;
  transition:.2s;
  position:relative
}
.cup:hover{transform:translateY(-2px);border-color:#3a3a45}
.cup canvas{width:100%;height:auto;border-radius:12px;display:block}
.cup .tag{
  position:absolute;top:10px;left:10px;
  background:#101012;border:1px solid #2b2b2f;border-radius:999px;
  padding:4px 8px;font-size:12px;color:#cabb8b
}

/* 클릭 후 짧은 회전 연출 */
@keyframes cup-spin { from{transform:rotate(0)} to{transform:rotate(360deg)} }
.cup.spinning{animation:cup-spin .7s ease-out}

/* ===== Buttons ===== */
.actions{display:flex;gap:10px;margin-top:12px;flex-wrap:wrap}
button{
  border:1px solid #2a2a30;
  background:#17171a;
  color:#f0f0f0;
  border-radius:10px;
  padding:10px 12px;
  cursor:pointer;
  transition:.2s
}
button:hover{border-color:#3a3a45}
button.ghost{background:transparent}

/* ===== Result ===== */
.result{display:grid;grid-template-columns:1fr 1.2fr;gap:18px}
.result-visual{background:#0e0e10;border:1px solid #26262a;border-radius:16px;padding:14px}
.result-text{display:flex;flex-direction:column;gap:10px}
.pill{
  align-self:flex-start;
  background:#121214;
  border:1px solid var(--gold);
  color:#f4e9cd;
  border-radius:999px;
  padding:6px 10px;
  font-size:12px;
  letter-spacing:.2px
}
.reading p{line-height:1.65;color:#e9e9ee;margin:0 0 8px}

/* ===== Footer ===== */
.ft-footer{
  padding:22px 16px;
  text-align:center;
  color:#a4a4ad;
  border-top:1px solid #1f1f22;
  font-size:12px
}

/* ===== Responsive ===== */
@media (max-width:900px){
  .result{grid-template-columns:1fr}
}

/* ===== Notice (이용 안내 카드) ===== */
.card.notice{padding:22px 20px}
.notice{
  border-color:#3a2d13;
  background:linear-gradient(180deg,#141316,#101013)
}
.notice p{line-height:1.75}
.notice .muted{color:#b8b0a0;font-size:13px}

/* ===== Length Modes (요약/표준/심화) ===== */
.modes{
  margin-top:12px;
  display:flex;
  align-items:center;
  gap:12px;
  flex-wrap:wrap
}
.modes-label{
  font-size:13px;
  color:#cabb8b;
  border:1px solid #3a2d13;
  padding:4px 8px;
  border-radius:999px;
  background:#121214
}
.mode-buttons{display:flex;gap:8px;flex-wrap:wrap}
.mode-btn{
  border:1px solid #2a2a30;
  background:#151518;
  color:#eaeaea;
  border-radius:999px;
  padding:8px 12px;
  font-size:13px;
  cursor:pointer;
  transition:.2s
}
.mode-btn:hover{border-color:#3a3a45}
.mode-btn.active{
  border-color:var(--gold);
  color:#f8f1dc;
  box-shadow:0 0 0 1px rgba(202,168,107,.2) inset
}
.mode-btn.locked{opacity:.55;cursor:not-allowed}
.mode-hint{color:#a69a84;margin-left:4px;font-size:12px}
/* ===== AI 추가 리딩 박스 ===== */
.ai-card{
  margin-top:16px;
  padding:16px 14px 18px;
  border-radius:16px;
  border:1px solid #26262a;
  background:#111015;
  box-shadow:0 8px 24px rgba(0,0,0,.35);
  text-align:left;
  font-size:14px;
}
.ai-header-row{
  display:flex;
  align-items:center;
  gap:8px;
  margin-bottom:10px;
  flex-wrap:wrap;
}
.ai-pill{
  border-color:var(--gold);
}
.ai-note{
  font-size:12px;
  color:#b4aa96;
}
.ai-label{
  display:block;
  margin:6px 0 4px;
  font-size:13px;
  color:#e4ddc8;
}
.ai-textarea{
  width:100%;
  min-height:70px;
  resize:vertical;
  border-radius:10px;
  border:1px solid #2e2e34;
  background:#0d0d10;
  color:#f2f2f5;
  padding:8px 10px;
  font-family:inherit;
  font-size:13px;
}
.ai-textarea:focus{
  outline:none;
  border-color:var(--gold);
  box-shadow:0 0 0 1px rgba(202,168,107,.35);
}
.ai-actions{
  margin-top:8px;
  display:flex;
  align-items:center;
  gap:10px;
  flex-wrap:wrap;
}
.ai-btn{
  border-radius:999px;
  padding:8px 14px;
  border:1px solid var(--gold);
  background:linear-gradient(180deg,#2b2416,#19120a);
  color:#f7edd8;
  font-size:13px;
}
.ai-btn:hover{
  filter:brightness(1.05);
}
.ai-status{
  font-size:12px;
  color:#b4aa96;
}
.ai-loader{
  margin-top:8px;
  font-size:12px;
  color:#d9b98c;
}
.ai-answer-wrap{
  margin-top:12px;
  padding-top:10px;
  border-top:1px solid #2a2520;
}
.ai-answer-title{
  font-size:13px;
  color:#f0e4c4;
  margin-bottom:4px;
}
.ai-answer-text{
  font-size:13px;
  line-height:1.7;
  color:#e8e3d5;
}