/* 안쪽 페이지(단체 문의, 내 계정)의 모양 (2026-10-18).
 *
 * 홈(index.html)의 알록달록한 모양을 따릅니다: 위에는 문들이 늘어선 방 그림 띠, 아래는 옅은 하늘색 바탕에
 * 둥근 흰 카드, 제목은 주아체, 본문은 고운돋움, 단추는 남색 바탕에 아래 그림자.
 *
 * 예전 어두운 판(styles.css)의 색 이름(--night, --gold, --soft …)을 그대로 두고 밝은 값을 넣었습니다.
 * 2026-10-24: 홈과 같은 브랜드 색으로 (주 #F7B267 · 보조 #ECDFDF · 강조 #DADC89 · 바탕 #F8F7F7, 글자 #3A2E2C).
 * 이름은 그대로라 --navy 는 이제 짙은 밤색, --sun 은 주색, --sky 는 강조색입니다.
 * 바꾸기 전: docs/unused/web_2026-10-24/page-before-brand.css
 * 페이지 안에 남아 있는 style="color:var(--gold)" 같은 것들이 고치지 않아도 새 판에 맞게 보입니다.
 * styles.css 는 아직 다른 페이지(지원, 약관, 처리방침 …)가 씁니다. */

:root {
  --brand:      #F7B267;  /* 주 */
  --brand-deep: #D48E45;  /* 주색 단추의 그림자 */
  --brand-tint: #FDF0E1;
  --sub:        #ECDFDF;  /* 보조 */
  --sub-deep:   #D2C0BF;
  --accent:     #DADC89;  /* 강조 */
  --accent-tint:#F0F1D2;
  --ink-deep:   #29201F;  /* 아래 띠 */
  --navy:    #3A2E2C;   /* 예전 남색 자리: 짙은 밤색 */
  --ink:     #3A2E2C;
  --soft:    #5E504C;
  --faint:   #7A6A66;
  --night:   #FFFFFF;   /* 예전 판에서 입력 칸 바탕으로 쓰던 이름 */
  --room:    #FFFFFF;   /* 카드 */
  --raised:  #F8F7F7;
  --rule:    #E6DAD9;
  --gold:    #9C5410;   /* 링크 (예전 금색 자리) */
  --gold-dim:#D48E45;
  --moss:    #6F7A2A;
  --sun:     #F7B267;   /* 주색 */
  --sky:     #DADC89;   /* 강조색 */
  --pale:    #F8F7F7;   /* 바탕 */
  --f-display: "Jua", "Apple SD Gothic Neo", sans-serif;
  --f-body: "Gowun Dodum", "Apple SD Gothic Neo", system-ui, sans-serif;
}

* { box-sizing: border-box; }
html { scroll-behavior: smooth; -webkit-text-size-adjust: 100%; }
body {
  margin: 0;
  background: var(--pale);
  color: var(--ink);
  font-family: var(--f-body);
  font-size: 16px;
  line-height: 1.75;
  word-break: keep-all;
  overflow-wrap: break-word;
  -webkit-font-smoothing: antialiased;
}
img { max-width: 100%; }
a { color: var(--gold); text-underline-offset: 3px; }
a:focus-visible, button:focus-visible, input:focus-visible, select:focus-visible,
textarea:focus-visible, summary:focus-visible { outline: 3px solid var(--sun); outline-offset: 2px; }
[hidden] { display: none !important; }
/* 봇 거름 칸과 화면 밖 이름표: 아래 input 규칙보다 이겨야 하므로 !important */
.offscreen { position: absolute !important; width: 1px !important; height: 1px !important; margin: -1px !important;
  padding: 0 !important; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; border: 0 !important; }

@keyframes bob { from { transform: translateY(0); } to { transform: translateY(-6px); } }
.bob { animation: bob 2.6s ease-in-out infinite alternate; }
@media (prefers-reduced-motion: reduce) { html { scroll-behavior: auto; } .bob { animation: none; } }

/* ---- 위 띠 ---- */
.band { position: relative; overflow: hidden; background: #2A1F14; color: #FFFFFF; }
.band-bg { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; object-position: 50% 40%; }
.band-shade { position: absolute; inset: 0; background: linear-gradient(180deg, rgba(41, 32, 31, 0.72) 0%, rgba(41, 32, 31, 0.56) 55%, rgba(41, 32, 31, 0.8) 100%); }
.topbar, .band-title, .band .wave { position: relative; }

.topbar { display: flex; justify-content: space-between; align-items: center; gap: 12px; flex-wrap: wrap; padding: 18px clamp(16px, 4vw, 48px); }
.brand { display: inline-flex; align-items: center; background: #FFFFFF; border-radius: 999px; padding: 9px 18px; box-shadow: 0 4px 0 rgba(0, 0, 0, 0.25); }
.brand img { display: block; height: 24px; width: auto; }
.menu { display: flex; gap: 4px; flex-wrap: wrap; align-items: center; font-family: var(--f-display); font-size: 17px; }
.menu a { color: #FFFFFF; text-decoration: none; padding: 10px 12px; }
.menu a[aria-current="page"] { text-decoration: underline; text-decoration-color: var(--sun); text-decoration-thickness: 3px; text-underline-offset: 8px; }
.menu a.pill { color: var(--navy); background: var(--sun); padding: 10px 18px; border-radius: 999px; box-shadow: 0 4px 0 rgba(0, 0, 0, 0.25); }
.menu a.pill[aria-current="page"] { background: #FFFFFF; text-decoration: none; }

.band-title { max-width: 46rem; margin: 0 auto; padding: 14px clamp(16px, 4vw, 48px) 0; text-align: center; display: flex; flex-direction: column; align-items: center; gap: 12px; }
.badge { margin: 0; transform: rotate(-3deg); font-family: var(--f-display); font-size: 18px; line-height: 1.4; color: var(--navy); background: var(--sun); padding: 5px 16px; border-radius: 14px; box-shadow: 0 5px 0 var(--brand-deep); }
.band-title h1 { margin: 0; font-family: var(--f-display); font-weight: 400; font-size: clamp(36px, 5.4vw, 56px); line-height: 1.2; text-shadow: 0 3px 0 rgba(0, 0, 0, 0.35); }
.band-title .lead { margin: 0; max-width: 36rem; font-size: clamp(16px, 1.7vw, 18px); color: rgba(255, 255, 255, 0.9); text-shadow: 0 1px 2px rgba(0, 0, 0, 0.5); }
.band .wave { display: block; width: 100%; height: clamp(36px, 4.5vw, 64px); margin-top: clamp(30px, 4vw, 52px); margin-bottom: -1px; }

/* ---- 본문 ---- */
.desk { max-width: 46rem; margin: 0 auto; padding: 10px clamp(16px, 4vw, 24px) 80px; }
.card { position: relative; background: var(--room); border-radius: 24px; padding: 1.6rem clamp(1.1rem, 3.4vw, 1.9rem); box-shadow: 0 6px 0 var(--sub-deep); }
.card + .card { margin-top: 1.5rem; }
.card h2 { font-family: var(--f-display); font-weight: 400; font-size: 1.6rem; line-height: 1.3; margin: 0 0 1rem; }
.card h3 { font-family: var(--f-display); font-weight: 400; font-size: 1.2rem; line-height: 1.35; margin: 1.4rem 0 .7rem; }

label, .label { display: block; font-size: .93rem; color: var(--soft); margin-bottom: .4rem; }
label .opt { color: var(--faint); }
input[type="email"], input[type="text"], input[type="tel"], select, textarea {
  width: 100%; background: #FFFFFF; color: var(--ink); border: 2px solid var(--rule); border-radius: 14px;
  padding: .7rem .95rem; font: inherit; font-size: 1rem;
}
input[type="email"]:focus, input[type="text"]:focus, input[type="tel"]:focus, select:focus, textarea:focus { border-color: var(--navy); outline: none; }
input::placeholder, textarea::placeholder { color: #9C8F8E; letter-spacing: 0; }
textarea { resize: vertical; line-height: 1.6; }

button {
  font-family: var(--f-display); font-size: 1.05rem; line-height: 1.2; cursor: pointer;
  border-radius: 14px; padding: .65rem 1.3rem; min-height: 48px;
  border: 2px solid var(--brand); background: var(--brand); color: var(--ink); box-shadow: 0 4px 0 var(--brand-deep);
}
button:hover { filter: brightness(1.1); }
button:active { transform: translateY(2px); box-shadow: 0 2px 0 var(--brand-deep); }
button:disabled { opacity: .5; cursor: default; filter: none; transform: none; }
button.plain { background: #FFFFFF; color: var(--navy); border-color: var(--rule); box-shadow: 0 4px 0 var(--rule); }
button.quiet { background: transparent; border-color: transparent; color: var(--gold); box-shadow: none; min-height: 40px; padding: .3rem .6rem; }
button.danger { background: #C8462F; border-color: #C8462F; color: #FFFFFF; box-shadow: 0 4px 0 #8E2E1C; }
button.small { padding: .35rem .85rem; min-height: 40px; font-size: .95rem; box-shadow: 0 3px 0 var(--rule); }
button.small:not(.plain):not(.quiet) { box-shadow: 0 3px 0 var(--brand-deep); }

.say { margin: .9rem 0 0; color: var(--soft); white-space: pre-line; }
.say:empty { margin: 0; }
.say.bad { color: #B23A22; }
.say.good { color: var(--moss); }
.note { margin: .9rem 0 0; font-size: .92rem; color: var(--faint); }
.muted { color: var(--faint); }

.tick { display: flex; gap: .7rem; align-items: flex-start; margin: .6rem 0; cursor: pointer; color: var(--ink); font-size: 1rem; }
.tick input { width: 1.3rem; height: 1.3rem; accent-color: var(--brand-deep); flex: none; margin-top: .25rem; }

.kept { list-style: none; margin: 0 0 1rem; padding: 0; }
.kept li { position: relative; padding-left: 1.2rem; margin: .4rem 0; color: var(--soft); }
.kept li::before { content: ""; position: absolute; left: 0; top: .72em; width: .45rem; height: .45rem; border-radius: 50%; background: var(--sun); }

/* ---- 아래: 사업자 정보 (Tools/web_footer.py 가 넣는 블록) ---- */
footer.biz { background: var(--ink-deep); color: #CBBDBA; padding: 32px clamp(16px, 4vw, 48px) 40px; font-size: 13px; line-height: 1.8; }
.biz-in { max-width: 44rem; margin: 0 auto; }
.biz-links { display: flex; flex-wrap: wrap; gap: .3rem 1.2rem; margin-bottom: .6rem; }
.biz-links a { color: #EFE6E4; text-decoration: none; }
.biz-links a:hover { color: #FFFFFF; }
.biz-links a b { color: #FFFFFF; }
footer.biz p { margin: 0; }
.biz-who { display: flex; flex-wrap: wrap; gap: .1rem 1.1rem; }
.biz-who b { font-weight: 400; color: #EFE6E4; margin-right: .3rem; }
.biz-who a { color: #CBBDBA; }
footer.biz .biz-mark { margin-top: .5rem; font-size: 12px; }