/* ------------------------------------------------------------
   chiango · 란나(치앙마이) 장식 레이어
   원칙: 금색은 1px 선과 격자 문양에만. 사진과 액센트(탠저린)는 그대로.
   ------------------------------------------------------------ */
:root {
  --gold: #c9a24d;
  --gold-soft: rgba(201, 162, 77, 0.32);
  --gold-faint: rgba(201, 162, 77, 0.14);
  --font-thai: "Noto Sans Thai", "Wanted Sans Variable", sans-serif;
  /* 란나 직물의 마름모 격자를 단순화한 문양 */
  --lanna-lattice: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='56' height='56' viewBox='0 0 56 56'%3E%3Cpath d='M28 1L55 28L28 55L1 28Z' fill='none' stroke='%23c9a24d' stroke-opacity='.42' stroke-width='1'/%3E%3Ccircle cx='28' cy='28' r='1.7' fill='%23c9a24d' fill-opacity='.5'/%3E%3C/svg%3E");
}
:root[data-theme="dark"] { --gold: #d9b56a; --gold-soft: rgba(217, 181, 106, 0.3); --gold-faint: rgba(217, 181, 106, 0.12); }
@media (prefers-color-scheme: dark) { :root:not([data-theme="light"]) { --gold: #d9b56a; --gold-soft: rgba(217, 181, 106, 0.3); --gold-faint: rgba(217, 181, 106, 0.12); } }

/* ---------- 태국어 아이브로 ---------- */
.eyebrow.thai { font-family: var(--font-thai); text-transform: none; letter-spacing: 0.04em; font-size: 0.92rem; font-weight: 500; display: inline-flex; align-items: center; gap: 10px; }
.eyebrow.thai .lat { font-family: var(--font-display); font-weight: 600; font-size: 0.76rem; letter-spacing: 0.14em; text-transform: uppercase; }
.eyebrow.thai .lat::before { content: ""; display: inline-block; width: 18px; height: 1px; background: var(--gold); margin-right: 10px; vertical-align: middle; }

/* ---------- 장식 괘선 (마름모 하나) ---------- */
.orn-rule { display: flex; align-items: center; gap: 14px; color: var(--gold); }
.orn-rule::before, .orn-rule::after { content: ""; flex: 1; height: 1px; background: linear-gradient(90deg, transparent, var(--gold-soft)); }
.orn-rule::after { background: linear-gradient(90deg, var(--gold-soft), transparent); }
.orn-rule .gem { width: 9px; height: 9px; border: 1.5px solid var(--gold); transform: rotate(45deg); flex: none; }
.orn-rule.short { max-width: 260px; }

/* ---------- 격자 배경 ---------- */
.lattice { position: relative; isolation: isolate; }
.lattice::before { content: ""; position: absolute; inset: 0; z-index: -1; pointer-events: none; background-image: var(--lanna-lattice); background-size: 56px 56px; opacity: 0.55; mask-image: radial-gradient(120% 90% at 50% 40%, #000 30%, transparent 100%); -webkit-mask-image: radial-gradient(120% 90% at 50% 40%, #000 30%, transparent 100%); }

/* 히어로 사진 뒤에 살짝 비껴 깔리는 직조 매트 */
.hero-visual .mat { position: absolute; inset: 18px -18px -18px 18px; z-index: -1; border-radius: 28px; background-image: var(--lanna-lattice); background-size: 40px 40px; opacity: 0.7; pointer-events: none; }
.hero-visual .mat::after { content: ""; position: absolute; inset: 0; border-radius: inherit; border: 1px solid var(--gold-soft); }
.hero-visual { isolation: isolate; }

/* ---------- 란나 공예 섹션 ---------- */
.craft { background: var(--bg-2); border-block: 1px solid var(--line); }
.craft .inner { padding-block: var(--section-gap); display: grid; gap: clamp(28px, 4vw, 44px); }
.craft .head { display: grid; gap: 14px; max-width: 46em; }
.craft-row { display: grid; grid-template-columns: 1.5fr 1fr 1.2fr; gap: clamp(14px, 1.8vw, 24px); align-items: end; }
.craft-row figure { display: grid; gap: 10px; }
.craft-row .frame { border-radius: 20px; }
.craft-row .frame::after { box-shadow: inset 0 0 0 1px var(--gold-faint); }
.craft-row figure:nth-child(1) .frame { aspect-ratio: 3 / 2; }
.craft-row figure:nth-child(2) .frame { aspect-ratio: 4 / 5; }
.craft-row figure:nth-child(3) .frame { aspect-ratio: 3 / 2; }
.craft-row figcaption { font-size: 0.86rem; color: var(--muted); display: flex; align-items: baseline; gap: 8px; }
.craft-row figcaption b { color: var(--ink); font-weight: 640; }
.craft-row figcaption .th { font-family: var(--font-thai); color: var(--gold); font-size: 0.82rem; }

/* ---------- 지역 카드 (어디에 묵을까요) ---------- */
.area .name { display: flex; justify-content: space-between; align-items: baseline; gap: 8px; }
.area .name .th { font-family: var(--font-thai); font-size: 0.78rem; color: var(--gold); font-weight: 500; }
.area .desc { font-size: 0.86rem; color: var(--muted); word-break: keep-all; }

/* ---------- 푸터 상단 격자 (은은하게) ---------- */
.foot.lattice::before { opacity: 0.22; mask-image: linear-gradient(to bottom, #000, transparent 55%); -webkit-mask-image: linear-gradient(to bottom, #000, transparent 55%); }

/* ---------- 내비 로그인 상태 ---------- */
.nav-auth { display: inline-flex; align-items: center; gap: 6px; }
.nav-auth[hidden] { display: none; }
.nav-auth .btn-sm { height: 38px; padding-inline: 14px; font-size: 0.88rem; }
.nav-auth [data-user-name] { max-width: 160px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }

/* ---------- 계정 페이지 ---------- */
.account { display: grid; gap: 16px; }
.account .row { display: grid; grid-template-columns: 140px 1fr; gap: 8px 16px; padding: 14px 0; border-top: 1px solid var(--line); font-size: 0.95rem; }
.account .row:first-child { border-top: 0; }
.account .row dt { color: var(--muted); }
.account .row dd { margin: 0; font-weight: 560; word-break: break-all; }

@media (max-width: 900px) {
  .craft-row { grid-template-columns: 1fr 1fr; }
  .craft-row figure:nth-child(1) { grid-column: 1 / -1; }
  .hero-visual .mat { inset: 12px -10px -10px 12px; }
  .nav-auth[data-auth-in] .btn-text { display: inline-block; }
}
@media (max-width: 600px) {
  .craft-row { grid-template-columns: 1fr; }
  .account .row { grid-template-columns: 1fr; }
}