/* 삼신당 공통 스타일 — 한지 질감 다크 톤 */
:root {
  --bg: #1C140E;
  --card: #241A12;
  --card-deep: #322618;
  --line: #4A3B28;
  --cream: #F2E6CE;
  --cream-dim: #E8DCC2;
  --muted: #B8A488;
  --amber: #EF9F27;
  --amber-soft: #FAC775;
  --ember: #D9704F;        /* 필수값 오류 — 불의 색 계열, 빨강·회색 대신 */
  --ember-soft: #E8917A;
  --ring: rgba(239, 159, 39, .28);   /* 포커스 링 — 촛불빛 번짐 */
  color-scheme: dark;      /* 달력·시간 피커, 체크박스, 스크롤바를 브라우저가 어둡게 그린다 */
}
* { box-sizing: border-box; margin: 0; padding: 0; }
body {
  background: var(--bg);
  color: var(--cream-dim);
  font-family: 'Noto Serif KR', 'Nanum Myeongjo', 'Apple Myungjo', Batang, serif;
  line-height: 1.9;
  -webkit-font-smoothing: antialiased;
  scrollbar-color: var(--line) var(--bg);
}
/* 브라우저가 그리는 표면도 같은 방 안에 있게 — 선택 영역·캐럿·스크롤바·포커스 링 */
::selection { background: rgba(239, 159, 39, .35); color: var(--cream); }
::-webkit-scrollbar { width: 10px; }
::-webkit-scrollbar-track { background: var(--bg); }
::-webkit-scrollbar-thumb { background: var(--line); border-radius: 5px; border: 2px solid var(--bg); }
:focus-visible { outline: 2px solid var(--amber); outline-offset: 2px; border-radius: 4px; }
button, input, select, textarea { font-family: inherit; caret-color: var(--amber); }
::placeholder { color: var(--muted); opacity: 1; }
.wrap { max-width: 420px; margin: 0 auto; padding: 32px 20px 64px; }

/* 촛불 — 물방울을 45도 돌려 끝을 뾰족하게. 타원 하나로 그리면 불꽃이 아니라 달걀로 보인다.
   크기는 --fs 하나로 조절한다(대기 화면은 더 크게). */
.candle { text-align: center; margin-bottom: 4px; line-height: 0; }
.flame {
  --fs: 18px;
  position: relative; display: inline-block;
  width: var(--fs); height: calc(var(--fs) * 1.5);
  animation: flicker 2.4s ease-in-out infinite;
  transform-origin: 50% 100%;
}
/* 겉불 — 아래는 둥글고 위는 뾰족. scaleX 로 눌러 세로로 길게 세운다 */
.flame::before {
  content: ''; position: absolute; left: 50%; bottom: 0;
  width: calc(var(--fs) * .92); height: calc(var(--fs) * .92);
  margin-left: calc(var(--fs) * -.46);
  border-radius: 0 50% 50% 50%;
  transform: scaleX(.66) rotate(45deg);
  background: radial-gradient(circle at 60% 70%, #FFEFC6 0%, var(--amber-soft) 26%, var(--amber) 56%, #A9530F 100%);
  box-shadow: 0 0 calc(var(--fs) * .95) calc(var(--fs) * .3) rgba(239, 159, 39, .26);
}
/* 심지빛 — 속에서 따로 흔들려야 살아 있는 불로 보인다 */
.flame::after {
  content: ''; position: absolute; left: 50%; bottom: calc(var(--fs) * .1);
  width: calc(var(--fs) * .26); height: calc(var(--fs) * .38);
  margin-left: calc(var(--fs) * -.13);
  border-radius: 50%;
  background: radial-gradient(ellipse at 50% 58%, #FFFCF2 0%, rgba(255, 247, 226, .92) 42%, rgba(255, 240, 205, 0) 100%);
  animation: wick 2.4s ease-in-out infinite;
}
@keyframes flicker {
  0%, 100% { transform: scaleY(1)    skewX(0deg)    translateY(0);     opacity: 1; }
  25%      { transform: scaleY(.93)  skewX(1.5deg)  translateY(1px);   opacity: .9; }
  55%      { transform: scaleY(1.09) skewX(-1.5deg) translateY(-1px);  opacity: 1; }
  80%      { transform: scaleY(.97)  skewX(.8deg)   translateY(.5px);  opacity: .95; }
}
@keyframes wick {
  0%, 100% { opacity: .85; transform: scaleY(1); }
  50%      { opacity: 1;   transform: scaleY(1.18); }
}
.brand { display: block; text-align: center; font-size: 12px; letter-spacing: 6px; color: var(--muted); text-decoration: none; }
.brand:hover { color: var(--amber-soft); }
h1 { text-align: center; font-size: 30px; font-weight: 600; color: var(--cream); margin: 6px 0 2px; }
.tagline { text-align: center; font-size: 13px; color: var(--muted); margin-bottom: 24px; }

/* 할매 말풍선 */
.grandma {
  background: var(--card-deep); border-radius: 12px;
  padding: 16px 18px; margin: 18px 0; font-size: 15px; color: var(--cream-dim);
}
.grandma::before { content: '“'; color: var(--amber-soft); }
.grandma::after  { content: '”'; color: var(--amber-soft); }

/* 폼 */
.field { margin-bottom: 18px; }
.field label { display: block; font-size: 13px; color: var(--muted); margin-bottom: 6px; }
.field input, .field select, .field textarea {
  width: 100%; background: var(--card); color: var(--cream);
  border: 1px solid var(--line); border-radius: 10px;
  padding: 12px 14px; font-size: 15px; font-family: inherit;
}
.field input:focus, .field select:focus, .field textarea:focus {
  outline: none; border-color: var(--amber); box-shadow: 0 0 0 2px var(--ring);
}
.field textarea { resize: vertical; min-height: 120px; }
.field select {
  appearance: none; -webkit-appearance: none; padding-right: 40px; cursor: pointer;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='14' height='9' viewBox='0 0 14 9'%3E%3Cpath d='M1 1l6 6 6-6' fill='none' stroke='%23FAC775' stroke-width='1.6' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E");
  background-repeat: no-repeat; background-position: right 14px center;
}
.field .hint { font-size: 12px; color: var(--muted); margin-top: 4px; }
/* 필수값 미입력 — form-validate.js 가 붙이는 강조·안내문 */
.field-error input, .field-error select, .field-error textarea { border-color: var(--ember); box-shadow: 0 0 0 2px rgba(217, 112, 79, .25); }
.field-error.agree-row span { color: var(--ember-soft); }
.field-msg { font-size: 12px; color: var(--ember-soft); margin: 6px 0 0; }
.radio-row { display: flex; gap: 8px; }
.radio-row label {
  position: relative; flex: 1; text-align: center; border: 1px solid var(--line); border-radius: 10px;
  padding: 10px 4px; font-size: 14px; color: var(--cream-dim); cursor: pointer; margin: 0;
  transition: border-color .15s ease-out, color .15s ease-out;
}
.radio-row label:hover { border-color: var(--amber-soft); }
.radio-row input { position: absolute; opacity: 0; width: 1px; height: 1px; margin: 0; pointer-events: none; }
.radio-row input:checked + span { color: var(--amber-soft); }
.radio-row label:has(input:checked) { border-color: var(--amber); }
.radio-row label:has(input:focus-visible) { outline: 2px solid var(--amber); outline-offset: 2px; }

.btn {
  display: block; width: 100%; text-align: center; cursor: pointer;
  background: var(--amber); color: #241A12; font-weight: 700;
  border: none; border-radius: 12px; padding: 15px; font-size: 16px; font-family: inherit;
  transition: background-color .15s ease-out, transform .1s ease-out;
}
.btn:hover { background: var(--amber-soft); }
.btn:active { transform: translateY(1px); }
.btn:focus-visible { outline: 2px solid var(--amber); outline-offset: 3px; }
.btn-ghost {
  background: transparent; color: var(--amber-soft);
  border: 1px solid var(--amber);
}
.btn-ghost:hover { background: rgba(239, 159, 39, .08); }

/* 결과 */
.reading { font-size: 15.5px; color: var(--cream-dim); white-space: pre-line; margin: 16px 0; }
.divider { border: none; border-top: 1px solid var(--line); margin: 24px 0; }

/* 유료 잠금 영역 — 블러 밑 텍스트는 더미 연출용. 실제 내용은 결제 전 응답에 없다 */
.locked { position: relative; border-radius: 12px; overflow: hidden; margin: 18px 0; }
.locked .dummy { filter: blur(6px); user-select: none; padding: 8px 4px; color: var(--muted); }
.locked .veil {
  position: absolute; inset: 0; display: flex; flex-direction: column;
  align-items: center; justify-content: center; gap: 10px;
  background: rgba(28, 20, 14, 0.55); text-align: center; padding: 0 24px;
}
.veil .lock-msg { font-size: 14px; color: var(--cream-dim); }
.price { color: var(--amber-soft); font-weight: 700; }

/* 대기 화면 */
.waiting { text-align: center; padding: 48px 0; }
.waiting .flame { --fs: 28px; }
.waiting-msg { margin-top: 20px; font-size: 15px; color: var(--cream-dim); min-height: 1.9em; }
.dots::after { content: ''; animation: dots 1.5s steps(4) infinite; }
@keyframes dots { 0% { content: ''; } 25% { content: '·'; } 50% { content: '··'; } 75% { content: '···'; } }

.notice { font-size: 11.5px; color: var(--muted); text-align: center; margin-top: 40px; line-height: 1.7; }

/* 법적 고지 + 동의 (청약철회, 개인정보 수집·이용 등) */
.legal-panel {
  background: var(--card-deep); border: 1px solid var(--line); border-radius: 12px;
  padding: 14px 16px; margin: 16px 0 0; font-size: 12.5px; color: var(--muted); line-height: 1.7;
}
.legal-panel b { color: var(--cream-dim); }
.legal-panel a { color: var(--amber-soft); }
.agree-row { display: flex; align-items: flex-start; gap: 8px; margin: 10px 0 0; cursor: pointer; }
.agree-row input { margin-top: 3px; accent-color: var(--amber); width: 15px; height: 15px; flex-shrink: 0; }
.agree-row span { font-size: 13px; color: var(--cream-dim); }
.btn[disabled], .btn[disabled]:hover { background: var(--line); color: var(--muted); cursor: not-allowed; transform: none; }

/* 정책 페이지 (이용약관 · 개인정보처리방침 · 사업자정보) */
.anchor-nav { display: flex; gap: 8px; margin: 18px 0 22px; }
.anchor-nav a {
  flex: 1; text-align: center; font-size: 12.5px; color: var(--amber-soft);
  border: 1px solid var(--line); border-radius: 10px; padding: 8px 4px; text-decoration: none;
}
.policy-card { background: var(--card-deep); border: 1px solid var(--line); border-radius: 12px; padding: 16px 18px; margin-bottom: 28px; }
.policy-card dl { margin: 0; display: grid; grid-template-columns: 108px 1fr; gap: 7px 12px; font-size: 13px; }
.policy-card dt { color: var(--muted); }
.policy-card dd { margin: 0; color: var(--cream-dim); }
.policy-card dd.ph { color: var(--amber-soft); }
.policy-table { width: 100%; border-collapse: collapse; font-size: 12.5px; margin: 10px 0 12px; }
.policy-table th, .policy-table td { border: 1px solid var(--line); padding: 7px 8px; text-align: left; vertical-align: top; color: var(--cream-dim); }
.policy-table th { color: var(--muted); font-weight: 600; background: var(--card-deep); }
.policy-section { margin-bottom: 30px; }
.policy-section h2 { font-size: 17px; color: var(--cream); margin-bottom: 14px; }
.policy-section h3 { font-size: 14px; color: var(--cream); margin: 18px 0 6px; }
.policy-section h3:first-of-type { margin-top: 0; }
.policy-section p, .policy-section li { font-size: 13px; color: var(--muted); }
.policy-section ul { margin: 6px 0; padding-left: 20px; }
.policy-section .hl { color: var(--cream-dim); }

/* 공통 푸터 — 사업자정보·약관 링크 */
.site-footer { margin-top: 36px; padding-top: 16px; border-top: 1px solid var(--line); text-align: center; }
.footer-links { display: flex; justify-content: center; gap: 12px; flex-wrap: wrap; margin-bottom: 10px; }
.footer-links a { font-size: 11.5px; color: var(--muted); text-decoration: none; padding: 4px 2px; }
.footer-links a:hover { color: var(--cream-dim); text-decoration: underline; }
.footer-biz { font-size: 11.5px; color: var(--muted); line-height: 1.7; margin: 0; }

/* 상품 안내 카드 — 가격·설명 노출(전자상거래법 표시, PG 심사 요건) */
.product-card { background: var(--card-deep); border: 1px solid var(--line); border-radius: 12px; padding: 14px 16px; margin: 0 0 22px; }
.product-name { margin: 0 0 6px; font-size: 15px; font-weight: 600; color: var(--cream); display: flex; justify-content: space-between; align-items: baseline; }
.product-desc { margin: 0; font-size: 12.5px; line-height: 1.7; color: var(--cream-dim); }
.footer-products { font-size: 11px; color: var(--cream-dim); margin: 0 0 6px; }

/* 메인 페이지 — 상품 선택 카드 */
.menu-card { display: block; text-decoration: none; background: var(--card-deep); border: 1px solid var(--line); border-radius: 14px; padding: 16px 18px; margin: 0 0 14px; transition: border-color .15s ease-out; }
.menu-card:hover, .menu-card:active { border-color: var(--amber-soft); }
.menu-card:focus-visible { outline: 2px solid var(--amber); outline-offset: 3px; border-radius: 14px; }
.menu-head { display: flex; justify-content: space-between; align-items: baseline; gap: 10px; margin-bottom: 6px; }
.menu-title { font-size: 17px; font-weight: 600; color: var(--cream); }
.menu-desc { margin: 0 0 10px; font-size: 13px; line-height: 1.75; color: var(--cream-dim); }
.menu-cta { font-size: 13px; color: var(--amber-soft); }
/* 결제 전/실패 화면의 작은 이동 링크 · 결제 후 다음 상품 블록 */
.side-link { text-align: center; font-size: 12.5px; margin-top: 14px; }
.side-link a { color: var(--muted); text-decoration: none; border-bottom: 1px solid var(--line); }
.side-link a:hover { color: var(--amber-soft); }
.next-block { margin-top: 32px; }
.next-block .grandma { margin-bottom: 14px; }
/* 접힌 사업자정보 (초기화면 표시의무) */
.biz-details { margin-top: 18px; font-size: 11.5px; color: var(--muted); }
.biz-details summary { cursor: pointer; text-align: center; list-style: none; padding: 4px; transition: color .15s ease-out; }
.biz-details summary:hover { color: var(--amber-soft); }
.biz-details summary::-webkit-details-marker { display: none; }
.biz-details dl { margin: 10px 0 0; display: grid; grid-template-columns: 96px 1fr; gap: 5px 10px; }
.biz-details dt { color: var(--muted); }
.biz-details dd { margin: 0; color: var(--cream-dim); }

.pay-hint { margin: 8px 0 0; font-size: 11.5px; color: var(--muted); text-align: center; }