/* ══════════════════════════════════════════════════════════
   OHENA — 메인 스타일

   규격서 §5: CSS 내부 경로는 상대 경로로 씁니다.
   이 파일은 /css/style.css 로 서빙되므로(https://ohena.me 루트)
   url("../img/bg.jpg") 라고 쓰면 /img/bg.jpg 가 되어 맞습니다.
   상대 경로로 두면 나중에 하위 경로로 옮겨도 깨지지 않습니다.
   ══════════════════════════════════════════════════════════ */

/* ══ 토큰 ═════════════════════════════════════════════════════ */
:root {
  --ink:#111;
  --muted:#666;
  --faint:#9b9b9b;
  --paper:#fff;
  --band:#f4f4f2;
  --rule:#e3e3e0;

  /* 오행 색. Ganzi.cssVar() 가 이 이름을 그대로 내보냅니다.
     흰 바탕 기준입니다. 먹판 위에 쓸 일이 생기면 한 단계 밝혀야 합니다. */
  --wood:#3e7c59;
  --fire:#b33a32;
  --earth:#a67c22;
  --metal:#6e7a85;
  --water:#2b4c7e;

  --serif:'Noto Serif KR', serif;   /* 워드마크 전용 */
  --sans:'Pretendard', system-ui, sans-serif;

  /* ── 그리드 ──
     이 세 값이 페이지 전체의 기준선을 만듭니다.
     섹션마다 따로 정의하지 않습니다. 그게 지난번 어긋남의 원인이었습니다. */
  --cols:2;
  --gap:12px;
  --gutter:16px;
  --maxw:1000px;

  /* 헤드라인 자간과 줄간. 이 디자인 성격의 절반입니다. */
  --track-head:-0.035em;
  --leading-head:1.38;
}

/* 추천 근거 색: 붉은 라벨 = 부족한 기운 보완 / 검은 라벨 = 기질 검사 */
[data-element="wood"]  { --accent:#4a7c52; --label:#a03028; }
[data-element="fire"]  { --accent:#a35242; --label:#8c3a2c; }
[data-element="earth"] { --accent:#9b7b3f; --label:#8a5a22; }
[data-element="metal"] { --accent:#7e8a93; --label:#4d565e; }
[data-element="water"] { --accent:#3f5f86; --label:#1d3557; }

/* ══ 리셋 ═════════════════════════════════════════════════════ */
*,*::before,*::after { box-sizing:border-box; }
body,h1,h2,h3,p,figure,ul { margin:0; padding:0; }
ul { list-style:none; }
img { display:block; width:100%; height:100%; object-fit:cover; }
a { color:inherit; text-decoration:none; }

body {
  background:var(--paper); color:var(--ink);
  font-family:var(--sans); font-size:16px; line-height:1.6;
  -webkit-font-smoothing:antialiased;
}
:focus-visible { outline:2px solid var(--accent); outline-offset:2px; }
.visually-hidden {
  position:absolute; width:1px; height:1px; margin:-1px; padding:0;
  overflow:hidden; clip-path:inset(50%); white-space:nowrap;
}

.page { max-width:var(--maxw); margin-inline:auto; }

/* ══ 공통 행 ══════════════════════════════════════════════════
   모든 섹션이 이걸 씁니다. 좌우 여백과 컬럼 폭이 전부 같아집니다. */
.row {
  display:grid;
  grid-template-columns:repeat(var(--cols),1fr);
  gap:20px var(--gap);
  padding-inline:var(--gutter);
}
/* 카드 크기는 span 으로만 조절합니다. 폭을 직접 주지 않습니다. */
.span-2 { grid-column:span 2; }

/* ══ 헤더 ═════════════════════════════════════════════════════ */
.masthead { text-align:center; padding:22px var(--gutter) 0; }
.masthead__wordmark {
  display:inline-block;
  font-family:var(--serif); font-weight:600;
  font-size:clamp(31px,8vw,38px); letter-spacing:.2em; line-height:1;
}
.masthead__nav {
  display:flex; flex-wrap:wrap; justify-content:center;
  gap:2px 18px; padding:16px 0 22px;
  font-size:11.5px; letter-spacing:.09em;
}
.masthead__nav a[aria-current="page"] { border-bottom:1.5px solid var(--ink); padding-bottom:3px; }

/* ══ 히어로 ═══════════════════════════════════════════════════ */
.hero { position:relative; margin-inline:var(--gutter); }
.hero__media { aspect-ratio:16/13; background:var(--ph); }
.veil { position:absolute; inset:auto 0 0 0; height:60%;
        background:linear-gradient(180deg,transparent,rgba(0,0,0,.82)); }
.hero__body { position:absolute; inset:auto 0 0 0; padding:0 22px 24px; }
.hero__kicker { font-size:11px; color:#fff; }
.hero__kicker b { font-weight:700; }
.hero__kicker time { color:rgba(255,255,255,.62); margin-left:7px; }
.hero__title {
  font-size:clamp(25px,6.5vw,34px); font-weight:700;
  letter-spacing:var(--track-head); line-height:var(--leading-head);
  color:#fff; padding-top:9px;
}
.hero__note { font-size:13px; color:rgba(255,255,255,.72); padding-top:10px; }

/* ══ 섹션 머리 ════════════════════════════════════════════════
   padding-inline 이 .row 와 같아야 제목과 카드 왼쪽이 맞습니다. */
.shead {
  display:flex; align-items:baseline; justify-content:space-between;
  gap:12px; padding:44px var(--gutter) 15px;
}
.shead h2 { font-size:clamp(21px,5vw,25px); font-weight:700; letter-spacing:-.01em; }
.shead a { font-size:11px; color:var(--muted); letter-spacing:.05em; white-space:nowrap; }

/* ══ 기사 공통 ════════════════════════════════════════════════ */
.kicker { font-size:10.5px; font-weight:700; letter-spacing:.02em; }
.kicker--element { color:var(--label); }
.headline { font-size:14px; font-weight:700; letter-spacing:-.03em; line-height:1.45; padding-top:5px; }
.byline { font-size:10px; color:var(--faint); padding-top:6px; }
/* 사진 출처. TourAPI 이미지는 표기가 의무라 빼면 안 됩니다.
   이미지 바로 아래 붙여서 어느 사진의 출처인지 분명하게 둡니다. */
.credit { font-size:9px; color:#b0b0b0; padding-top:4px; letter-spacing:.02em; }
.overlay .credit { position:absolute; right:12px; bottom:10px; color:rgba(255,255,255,.55); padding:0; }

.media { background:var(--ph); aspect-ratio:4/3; }
.media--square { aspect-ratio:1/1; }
.media--wide   { aspect-ratio:16/9; }
/* 포스터는 2:3 고정. TMDB 원본 비율이라 어기면 잘립니다. */
.media--poster { aspect-ratio:2/3; }

/* 이미지 위에 글을 얹는 카드 */
.overlay { position:relative; }
.overlay__body { position:absolute; inset:auto 0 0 0; padding:0 16px 16px; }
.overlay .kicker { color:#fff; }
.overlay .headline { color:#fff; font-size:clamp(17px,4.5vw,20px); }
.overlay .byline { color:rgba(255,255,255,.6); }

/* 가로 스크롤은 걷어냈습니다.
   칸 폭을 컬럼에 맞춰도 마지막 칸이 그리드 밖으로 삐져나와서,
   옆 섹션들과 오른쪽 끝이 어긋나 보였습니다.
   오행은 마침 다섯이고 현재 기운을 빼면 넷이라 그냥 .row 에 들어갑니다. */

/* ══ 회색 밴드 ════════════════════════════════════════════════
   배경만 넓게 깔고 안쪽은 똑같은 .row 를 씁니다. */
.band { background:var(--band); margin-top:34px; padding-block:30px 30px; }
.band .shead { padding-top:0; padding-bottom:16px; }
.keyword__label { font-size:10.5px; color:#8a8a8a; letter-spacing:.12em; }
.keyword__tag {
  display:inline-block; font-size:20px; font-weight:700; letter-spacing:-.02em;
  border-bottom:2px solid var(--ink); padding-bottom:2px; margin-top:5px;
}

/* ══ 푸터 ═════════════════════════════════════════════════════
   본문과 같은 흰 바탕. 얇은 선 하나로만 끊습니다. */
.foot {
  margin-top:56px; padding:34px var(--gutter) 46px;
  border-top:1px solid var(--rule); text-align:center;
}
.foot__wordmark { font-family:var(--serif); font-weight:600; font-size:22px; letter-spacing:.2em; }
.foot__nav {
  display:flex; flex-wrap:wrap; justify-content:center; gap:4px 16px;
  padding-top:16px; font-size:11px; letter-spacing:.06em; color:var(--muted);
}
.foot__legal { font-size:10px; color:var(--faint); padding-top:18px; line-height:1.9; }

/* ══ 이미지 자리 ══════════════════════════════════════════════
   실제 사진이 오면 figure 안에 img 를 넣고 ph-* 클래스만 빼면 됩니다. */
.ph-1{--ph:linear-gradient(158deg,#101a13,#33513a 55%,#7d9470)}
.ph-2{--ph:linear-gradient(158deg,#1a2018,#4c5b40 55%,#9aa882)}
.ph-3{--ph:linear-gradient(158deg,#171f1c,#3e564a 55%,#8ba193)}
.ph-4{--ph:linear-gradient(158deg,#1d241a,#566349 55%,#a6b18e)}
.ph-5{--ph:linear-gradient(158deg,#232a1f,#5f6b4c 55%,#b3bb97)}
.ph-6{--ph:linear-gradient(160deg,#241f2a,#4e4658 55%,#8d8496)}
.ph-7{--ph:linear-gradient(160deg,#2b211c,#5a4638 55%,#9d8a75)}
.ph-8{--ph:linear-gradient(160deg,#1d252d,#42566a 55%,#8296a8)}
.ph-9{--ph:linear-gradient(160deg,#2a261a,#584f36 55%,#978c6c)}
.ph-10{--ph:linear-gradient(150deg,#333a28,#6a7450 55%,#b6bd94)}
.ph-11{--ph:linear-gradient(150deg,#2a3226,#5c6a4a 55%,#a8b490)}
.ph-12{--ph:linear-gradient(150deg,#3a4030,#78805a 55%,#c4c8a4)}
.ph-13{--ph:linear-gradient(158deg,#2b1512,#6b3328 55%,#b07a63)}
.ph-14{--ph:linear-gradient(158deg,#241d10,#5e4c28 55%,#a8956a)}
.ph-15{--ph:linear-gradient(158deg,#0e1a24,#2c4a63 55%,#7793a8)}

/* ══ 데스크탑 ═════════════════════════════════════════════════
   컬럼 수와 여백만 바꿉니다. 나머지는 span 값이 알아서 처리합니다. */
@media (min-width:760px) {
  :root { --cols:4; --gap:16px; --gutter:26px; }

  .masthead { padding-top:28px; }
  .masthead__nav { font-size:12px; gap:2px 28px; padding:20px 0 26px; }

  .hero__media { aspect-ratio:16/8.5; }
  .hero__body { padding:0 34px 34px; }

  .shead { padding:56px var(--gutter) 18px; }

  /* 대형 카드는 2컬럼 × 2행. 옆의 작은 카드 네 장과 높이가 맞습니다. */
  .lead { grid-column:span 2; grid-row:span 2; }
  .lead .media { aspect-ratio:auto; height:100%; }
}

@media (prefers-reduced-motion:reduce) {
  *,*::before,*::after { animation:none!important; transition:none!important; scroll-behavior:auto!important; }
}

/* 카드 전체를 링크로 감쌌으므로 밑줄과 색을 눌러둡니다 */
.row a { display:block; color:inherit; text-decoration:none; }

/* 이미지가 figure 를 꽉 채우게. aspect-ratio 는 figure 가 잡고 있습니다. */
.media img, .hero__media img { width:100%; height:100%; object-fit:cover; display:block; }

/* 목록 페이지 */
.list-desc {
  font-size:13px; color:var(--muted);
  padding:0 var(--gutter) 18px; max-width:46rem;
}
.list-note {
  font-size:11px; color:var(--faint);
  padding:24px var(--gutter) 0;
}
.excerpt {
  font-size:12.5px; color:var(--muted); line-height:1.7; padding-top:6px;
}
/* 사진 출처. TourAPI 이미지로 바꾸면 표기가 의무입니다. */
.credit { font-size:9px; color:#b0b0b0; padding-top:4px; letter-spacing:.02em; }

/* 목록 페이지의 섹션 머리는 배지가 위로 오므로 아래 여백을 줄입니다 */
.shead .kicker { padding-bottom:6px; }

/* 준비 중 화면 (마이페이지, 로그인) */
.stub {
  padding:72px var(--gutter) 96px;
  max-width:34rem; margin-inline:auto; text-align:center;
}
.stub h2 {
  font-size:clamp(22px,6vw,28px); font-weight:700;
  letter-spacing:var(--track-head);
}
.stub p { font-size:14px; color:var(--muted); padding-top:14px; line-height:1.85; }
.stub__todo {
  font-size:12.5px; color:var(--faint);
  border-top:1px solid var(--rule); margin-top:28px; padding-top:18px;
}
.stub__cta {
  display:inline-block; margin-top:26px;
  background:var(--ink); color:var(--paper);
  font-size:13px; letter-spacing:.06em; padding:11px 26px; border-radius:2px;
}

/* 로그인·가입 폼 (카카오 버튼 스타일은 자체 로그인으로 바뀌며 제거) */
.auth {
  max-width: 24rem;
  margin-inline: auto;
  padding: 64px var(--gutter) 96px;
}
.auth h2 {
  font-size: clamp(22px, 6vw, 26px);
  font-weight: 700;
  letter-spacing: var(--track-head);
  text-align: center;
}
.auth__lead {
  font-size: 13px; color: var(--muted);
  text-align: center; padding-top: 10px;
}

/* 로그인 실패, 로그아웃, 가입 완료 안내 */
.auth__message {
  margin-top: 22px; padding: 11px 14px;
  background: var(--band);
  border-left: 2px solid var(--ink);
  font-size: 13px; color: var(--ink);
}

.auth__form { display: grid; gap: 16px; padding-top: 28px; }
.auth__field { display: grid; gap: 6px; }
.auth__field > span { font-size: 12px; color: var(--muted); }
.auth__field input {
  font: inherit; font-size: 15px;
  padding: 11px 12px;
  border: 1px solid var(--rule);
  border-radius: 2px;
  background: transparent; color: var(--ink);
}
.auth__field input:focus {
  outline: 2px solid var(--accent);
  outline-offset: 1px;
  border-color: transparent;
}
.auth__hint { font-style: normal; font-size: 11px; color: var(--faint); }
.auth__error { font-style: normal; font-size: 11.5px; color: #a03028; }

.auth__submit {
  font: inherit; font-size: 14px; letter-spacing: .04em;
  background: var(--ink); color: var(--paper);
  border: 0; border-radius: 2px; padding: 13px;
  cursor: pointer; margin-top: 4px;
}
.auth__submit:hover { background: #2c302d; }

.auth__switch {
  text-align: center; font-size: 13px; color: var(--muted);
  padding-top: 22px;
}
.auth__switch a { border-bottom: 1px solid var(--rule); }

.auth__legal {
  font-size: 11px; color: var(--faint); line-height: 1.8;
  border-top: 1px solid var(--rule);
  margin-top: 28px; padding-top: 16px;
}

/* 헤더 오른쪽 로그인/로그아웃 */
.masthead__auth { font-size: 11.5px; color: var(--muted); }

/* ══ 프로필 사진 ══════════════════════════════════════ */
.photo{display:flex;gap:16px;align-items:flex-start;padding-top:24px}

.photo__box{
  flex:none;width:96px;height:96px;border-radius:50%;overflow:hidden;
  background:var(--band);border:1px solid var(--rule);
  display:flex;align-items:center;justify-content:center;
}
.photo__box img{width:100%;height:100%;object-fit:cover;display:block}
/* 사진이 없을 때 닉네임 첫 글자 */
.photo__ph{font-family:var(--serif);font-size:34px;color:#c9c9c6}

.photo__side{flex:1;min-width:0}
.photo__n{font-family:var(--serif);font-size:19px;font-weight:600}
.photo__d{font-size:11.5px;color:var(--faint);padding-top:5px}

.photo__acts{display:flex;gap:7px;flex-wrap:wrap;padding-top:12px}
.photo__acts form{margin:0}

/* 파일 입력을 숨기고 라벨을 버튼처럼 씁니다.
   display:none 으로 숨기면 키보드로 접근이 안 되므로 화면에서만 치웁니다. */
.photo__btn{
  display:inline-block;cursor:pointer;
  font-size:12.5px;letter-spacing:.02em;
  background:var(--ink);color:var(--paper);
  border:1px solid var(--ink);border-radius:2px;padding:8px 16px;
}
.photo__btn--ghost{background:transparent;color:var(--muted);border-color:var(--rule)}
.photo__btn input[type=file]{
  position:absolute;width:1px;height:1px;margin:-1px;padding:0;
  overflow:hidden;clip-path:inset(50%);white-space:nowrap;
}
/* 키보드로 파일 선택에 왔을 때 라벨이 눌린 것처럼 보이게 */
.photo__btn:focus-within{outline:2px solid var(--accent);outline-offset:2px}

.photo__msg{font-size:12px;color:var(--accent);padding-top:10px}
.photo__err{font-size:12px;color:var(--label);padding-top:10px}

.photo__note{
  font-size:11.5px;color:var(--faint);line-height:1.8;
  border-top:1px solid var(--rule);margin-top:18px;padding-top:12px;
}
.photo__note b{color:var(--muted);font-weight:600}

/* ══════════════════════════════════════════════════════════
   사주 · 폼 · 마이페이지
   ══════════════════════════════════════════════════════════ */

/* ── 오늘의 일진 ─────────────────────────────────── */
.today{text-align:center;padding:26px var(--gutter) 24px;border-bottom:1px solid var(--rule)}
.today__date{font-size:11.5px;color:var(--muted);letter-spacing:.1em}
.today__gz{font-family:var(--serif);font-weight:700;
  font-size:clamp(42px,13vw,60px);line-height:1.05;padding-top:8px}
.today__read{font-size:11.5px;color:var(--faint);letter-spacing:.14em;padding-top:4px}
.today__cross{font-family:var(--serif);font-size:clamp(17px,4.4vw,20px);
  font-weight:600;padding-top:16px;line-height:1.5}
.today__line{font-size:13.5px;color:var(--muted);padding-top:10px}
.today__meta{display:flex;justify-content:center;gap:16px;flex-wrap:wrap;
  font-size:11.5px;color:var(--faint);padding-top:16px;
  border-top:1px solid var(--rule);margin-top:18px}

/* ── 즉시 체험 / 등록 유도 ───────────────────────── */
.ask{background:var(--band);padding:36px var(--gutter) 34px}
.ask__in{max-width:27rem;margin-inline:auto;text-align:center}
.ask h1{font-family:var(--serif);font-weight:600;
  font-size:clamp(20px,5.2vw,25px);line-height:1.55}
.ask h1 em{font-style:normal;border-bottom:2px solid var(--ink);padding-bottom:1px}
.ask__sub{font-size:13px;color:var(--muted);padding-top:12px;line-height:1.8}
.ask__go{display:inline-block;background:var(--ink);color:var(--paper);
  border-radius:2px;padding:13px 28px;font-size:14.5px;margin-top:20px}

/* 폼은 grid 로 둡니다. flex 는 number 입력이 안 줄어들어 모바일에서 넘칩니다. */
.tryform{display:grid;gap:7px;padding-top:22px}
.tryform__l{display:grid;gap:6px}
.tryform__l--3{grid-template-columns:1.4fr 1fr 1fr}
.tryform__l--2{grid-template-columns:1fr 1fr 1.4fr}
.tryform input{width:100%;min-width:0;font:inherit;font-size:16px;
  padding:11px 6px;text-align:center;border:1px solid var(--rule);border-radius:2px;
  background:var(--paper);color:var(--ink);-moz-appearance:textfield}
.tryform input::-webkit-outer-spin-button,
.tryform input::-webkit-inner-spin-button{-webkit-appearance:none;margin:0}
.tryform__note{font-size:10.5px;color:var(--faint);align-self:center;line-height:1.5}
.tryform button{width:100%;background:var(--ink);color:var(--paper);border:0;
  border-radius:2px;padding:14px;font-size:15px}

/* ── 원국 표 ─────────────────────────────────────── */
.chart{border-top:1px solid var(--ink);border-bottom:1px solid var(--ink);
  padding:24px 4px 20px;margin-top:20px}
.pil{width:100%;border-collapse:collapse;table-layout:fixed}
.pil td{text-align:center;padding:0 2px;vertical-align:top}
.pil td+td{border-left:1px solid var(--rule)}
.pil .post{font-size:10px;color:var(--faint);padding-bottom:6px}
.pil .g{font-family:var(--serif);font-weight:700;
  font-size:clamp(26px,7.5vw,38px);line-height:1.1}
.pil .god{font-size:10px;color:var(--faint);padding-top:6px}
.els{display:flex;justify-content:center;gap:12px;flex-wrap:wrap;font-size:12.5px;
  padding-top:14px;margin-top:14px;border-top:1px solid var(--rule)}
.els b{font-weight:600}
.els .zero{color:#c9c9c6}
.chart__meta{display:flex;flex-wrap:wrap;justify-content:center;gap:4px 16px;
  font-size:11px;color:var(--faint);padding-top:12px}

/* 회원 메인의 원국 요약 */
.mine{padding:0 var(--gutter)}
.mine__chart{border-bottom:1px solid var(--rule);padding:20px 0 16px}
.mine__read{font-size:13px;color:var(--muted);padding-top:14px;text-align:center}
.mine__read b{color:var(--ink);font-weight:600}

/* ── 원국 결과 화면 ──────────────────────────────── */
.chartwrap{max-width:34rem;margin-inline:auto;padding:0 var(--gutter) 80px}
.chd{text-align:center;padding-top:20px}
.chd__k{font-size:11px;color:var(--muted);letter-spacing:.12em}
.chd__t{font-family:var(--serif);font-weight:600;
  font-size:clamp(22px,5.6vw,26px);padding-top:8px}
.chd__d{font-size:13px;color:var(--muted);padding-top:10px}
.basis{font-size:11.5px;color:var(--faint);line-height:1.8;padding-top:12px}
.basis b{color:var(--muted);font-weight:600}
.reading{padding-top:34px}
.reading h2{font-family:var(--serif);font-size:16px;font-weight:600;
  border-bottom:1px solid var(--rule);padding-bottom:8px;margin-bottom:14px}
.reading p{font-size:14.5px;color:#3a3a3a;line-height:1.85}
.reading b{font-weight:600;color:var(--ink)}
.reading__todo{font-size:12px;color:var(--faint);padding-top:14px}
.chart__acts{display:grid;gap:8px;padding-top:30px}
.chart__acts a{text-align:center;border-radius:2px;padding:13px;font-size:14px}
.chart__acts .pri{background:var(--ink);color:var(--paper)}
.chart__acts .sec{border:1px solid var(--rule);color:var(--muted)}

/* ── 입력 폼 ─────────────────────────────────────── */
.formwrap{max-width:30rem;margin-inline:auto;padding:24px var(--gutter) 90px}
.formwrap__t{font-family:var(--serif);font-weight:600;
  font-size:clamp(21px,5.4vw,25px);line-height:1.55}
.formwrap__d{font-size:13px;color:var(--muted);padding-top:12px}
.formwrap fieldset{border:0;padding:30px 0 0;margin:0}
.formwrap legend{font-size:12px;color:var(--muted);letter-spacing:.06em;padding-bottom:12px}
.fl{display:grid;gap:8px;padding-top:10px}
.fl--3{grid-template-columns:1.4fr 1fr 1fr}
.fl--2{grid-template-columns:1fr 1fr 1.4fr}
.cell{display:grid;gap:5px}
.cell>span{font-size:11.5px;color:var(--faint)}
.cell input,.cell select{width:100%;min-width:0;font:inherit;font-size:16px;
  padding:11px 10px;border:1px solid var(--rule);border-radius:2px;
  background:transparent;color:var(--ink);-moz-appearance:textfield}
.cell input::-webkit-outer-spin-button,
.cell input::-webkit-inner-spin-button{-webkit-appearance:none;margin:0}
.cell input:focus,.cell select:focus{outline:2px solid var(--accent);
  outline-offset:1px;border-color:transparent}
.seg{display:flex;gap:6px}
.seg label{flex:1;text-align:center;font-size:14px;color:var(--muted);
  border:1px solid var(--rule);border-radius:2px;padding:10px 6px;cursor:pointer}
.seg input{position:absolute;opacity:0;width:0;height:0}
.seg label:has(input:checked){background:var(--ink);border-color:var(--ink);color:var(--paper)}
.seg label:has(input:focus-visible){outline:2px solid var(--accent);outline-offset:2px}
.check{display:flex;gap:9px;align-items:flex-start;padding-top:12px}
.check input{margin-top:3px;width:15px;height:15px;accent-color:var(--ink)}
.check span{font-size:13px;color:var(--muted)}
.note{background:var(--band);border-left:2px solid var(--accent);
  padding:13px 15px;margin-top:14px;font-size:12.5px;color:var(--muted);line-height:1.75}
.note b{color:var(--ink);font-weight:600}
.err{font-size:12px;color:var(--label);padding-top:8px}
.formwrap details{border-top:1px solid var(--rule);margin-top:30px;padding-top:18px}
.formwrap summary{font-size:13px;color:var(--muted);cursor:pointer;list-style:none}
.formwrap summary::-webkit-details-marker{display:none}
.formwrap summary::after{content:' +';color:var(--faint)}
.formwrap details[open] summary::after{content:' −'}
.consent{border-top:1px solid var(--rule);margin-top:28px;padding-top:20px}
.consent .check span{color:var(--ink)}
.consent .fine{font-size:11.5px;color:var(--faint);line-height:1.8;padding-top:10px}
.formwrap .submit{width:100%;font:inherit;font-size:15px;background:var(--ink);
  color:var(--paper);border:0;border-radius:2px;padding:15px;margin-top:26px;cursor:pointer}

/* ── 마이페이지 ──────────────────────────────────── */
.mypage{max-width:36rem;margin-inline:auto;padding:0 var(--gutter) 80px}
.setup{padding-top:34px}
.setup__bar{display:flex;gap:5px;padding-bottom:10px}
.setup__bar i{flex:1;height:2px;background:var(--rule)}
.setup__bar i.on{background:var(--ink)}
.setup__count{font-size:11px;color:var(--faint);letter-spacing:.04em;padding-bottom:18px}
.setup__count b{color:var(--ink);font-weight:600}
.step{border-top:1px solid var(--rule);padding:20px 0;display:flex;gap:14px}
.step:last-of-type{border-bottom:1px solid var(--rule)}
.step__mark{flex:none;width:22px;height:22px;border-radius:12px;margin-top:2px;
  border:1px solid var(--rule);display:flex;align-items:center;justify-content:center;
  font-size:11px;color:var(--faint)}
.step--done .step__mark{background:var(--ink);border-color:var(--ink);color:var(--paper)}
.step__body{flex:1;min-width:0}
.step__t{font-family:var(--serif);font-size:17px;font-weight:600}
.step__d{font-size:13px;color:var(--muted);padding-top:6px;line-height:1.75}
.step__d b{color:var(--ink);font-weight:600}
.step__meta{font-size:11.5px;color:var(--faint);padding-top:8px}
.step__go{display:inline-block;margin-top:12px;background:var(--ink);color:var(--paper);
  border:1px solid var(--ink);border-radius:2px;padding:10px 20px;font-size:13.5px}
.step__go--ghost{background:transparent;color:var(--muted);border-color:var(--rule)}
.summary{border:1px solid var(--rule);border-radius:2px;padding:14px 10px;margin-top:12px}
.summary .pil .g{font-size:26px}
.recos{padding-top:40px}
.locked{border:1px dashed var(--rule);border-radius:2px;
  padding:30px 20px;margin-top:16px;text-align:center}
.locked__t{font-family:var(--serif);font-size:16px;font-weight:600}
.locked__d{font-size:13px;color:var(--muted);padding-top:10px;line-height:1.8}
.locked__d b{color:var(--ink);font-weight:600}
.settings{padding-top:40px}
.settings a{display:block;border-bottom:1px solid var(--rule);padding:14px 0;
  font-size:14px;color:var(--muted)}

/* ── 가입 유도 ───────────────────────────────────── */
.join{border-top:1px solid var(--ink);margin:48px var(--gutter) 0;padding:36px 0 8px;text-align:center}
.join h2{font-family:var(--serif);font-weight:600;font-size:clamp(19px,4.8vw,23px);line-height:1.5}
.join p{font-size:13.5px;color:var(--muted);padding-top:12px;max-width:28rem;
  margin-inline:auto;line-height:1.85}
.join__steps{display:flex;justify-content:center;gap:12px;flex-wrap:wrap;
  font-size:11.5px;color:var(--faint);padding-top:18px}
.join__steps b{color:var(--ink);font-weight:600}
.join a{display:inline-block;background:var(--ink);color:var(--paper);
  border-radius:2px;padding:13px 30px;font-size:14.5px;margin-top:22px}

/* 로그아웃은 POST 라 폼이어야 합니다. 버튼을 링크처럼 보이게 합니다. */
.nav-logout{display:inline;margin:0}
.nav-logout button{background:none;border:0;padding:0;font:inherit;
  color:inherit;letter-spacing:inherit;cursor:pointer}
.settings__logout{margin:0;border-bottom:1px solid var(--rule)}
.settings__logout button{display:block;width:100%;text-align:left;
  background:none;border:0;padding:14px 0;font:inherit;font-size:14px;
  color:var(--muted);cursor:pointer}

/* ══════════════════════════════════════════════════════════
   성향 검사
   ══════════════════════════════════════════════════════════ */

.intro{max-width:28rem;margin-inline:auto;padding:40px var(--gutter) 90px;text-align:center}
.intro__k{font-size:11px;color:var(--muted);letter-spacing:.12em}
.intro__t{font-family:var(--serif);font-weight:600;
  font-size:clamp(22px,5.6vw,27px);line-height:1.5;padding-top:12px}
.intro__d{font-size:13.5px;color:var(--muted);padding-top:14px;line-height:1.85}
.intro__facts{display:flex;justify-content:center;gap:26px;padding-top:26px}
.intro__facts b{font-family:var(--serif);font-size:24px;font-weight:600;display:block}
.intro__facts span{font-size:11px;color:var(--faint)}
.intro__prev{border-top:1px solid var(--rule);margin-top:26px;padding-top:18px}
.intro__prev p{font-size:12.5px;color:var(--muted);line-height:1.8}
.intro__prev b{color:var(--ink);font-weight:600}
.intro__prev a{display:inline-block;font-size:12.5px;color:var(--muted);
  border-bottom:1px solid var(--rule);margin-top:10px}
.intro__go{display:block;background:var(--ink);color:var(--paper);
  border-radius:2px;padding:15px;font-size:15px;margin-top:28px}

/* 문항 */
.quiz{max-width:28rem;margin-inline:auto;padding:16px var(--gutter) 90px}
.prog__bar{height:2px;background:var(--rule)}
.prog__bar i{display:block;height:2px;background:var(--ink)}
.prog__meta{display:flex;justify-content:space-between;
  font-size:11px;color:var(--faint);padding-top:9px;letter-spacing:.04em}
.prog__meta b{color:var(--ink);font-weight:600}
.quiz__part{font-size:11.5px;color:var(--muted);letter-spacing:.06em;
  text-align:center;padding-top:30px}
.quiz__q{font-family:var(--serif);font-weight:500;
  font-size:clamp(18px,4.8vw,21px);line-height:1.6;
  padding-top:24px;min-height:3.4em}
.scale{display:grid;gap:7px;padding-top:22px}
.scale button{text-align:left;background:transparent;color:var(--muted);
  border:1px solid var(--rule);border-radius:2px;padding:13px 15px;font-size:15px;
  cursor:pointer;transition:background .12s,color .12s,border-color .12s}
.scale button:hover{border-color:#c9c9c6}
.scale button.on{background:var(--ink);border-color:var(--ink);color:var(--paper)}
.quiz__nav{display:flex;justify-content:space-between;padding-top:18px}
.quiz__nav a{font-size:13px;color:var(--muted);border-bottom:1px solid var(--rule)}
.quiz__nav a.off{opacity:.3;pointer-events:none}
.quiz__hint{border-top:1px solid var(--rule);margin-top:26px;padding-top:14px;
  font-size:12px;color:var(--faint);line-height:1.8}
.quiz__hint b{color:var(--muted);font-weight:600}

/* 결과 */
.result{max-width:30rem;margin-inline:auto;padding:36px var(--gutter) 90px}
.result__k{font-size:11px;color:var(--muted);letter-spacing:.12em}
.result__code{font-family:var(--serif);font-weight:600;
  font-size:clamp(44px,13vw,58px);letter-spacing:.1em;line-height:1.1;padding-top:8px}
.result__t{font-family:var(--serif);font-size:clamp(19px,5vw,22px);
  font-weight:500;padding-top:6px}
.result__d{font-size:13px;color:var(--muted);padding-top:12px;line-height:1.8}
.dich{padding-top:32px}
.dich__row{padding-bottom:16px}
.dich__top{display:flex;justify-content:space-between;font-size:11.5px;
  color:var(--faint);padding-bottom:5px}
.dich__top .strong{color:var(--ink);font-weight:600}
.dich__bar{height:6px;background:var(--rule);border-radius:3px;position:relative;overflow:hidden}
.dich__bar i{position:absolute;top:0;bottom:0;background:var(--ink)}
.sec-title{font-family:var(--serif);font-size:15px;font-weight:600;letter-spacing:.05em;
  border-bottom:1px solid var(--rule);padding-bottom:8px;margin-top:36px}
.axis{padding-top:16px}
.axis__row{display:flex;align-items:center;gap:10px}
.axis__end{font-size:11.5px;color:var(--faint);width:54px;flex:none}
.axis__end--r{text-align:right}
.axis__track{position:relative;flex:1;height:22px}
.axis__line{position:absolute;top:10px;left:0;right:0;height:1px;background:var(--rule)}
.axis__dot{position:absolute;top:4px;width:13px;height:13px;border-radius:7px;
  background:var(--ink);margin-left:-6px}
.axis__val{position:absolute;top:-8px;font-size:10.5px;color:var(--muted);margin-left:-8px}
.axis__name{font-size:11px;color:var(--faint);padding-left:64px}
.result__acts{display:grid;gap:8px;padding-top:30px}
.result__acts a{text-align:center;border-radius:2px;padding:13px;font-size:14px}
.result__acts .pri{background:var(--ink);color:var(--paper)}
.result__acts .sec{border:1px solid var(--rule);color:var(--muted)}

/* 마이페이지의 검사 결과 요약 */
.summary__code{font-family:var(--serif);font-weight:600;font-size:28px;letter-spacing:.1em}
.summary__name{font-size:12.5px;color:var(--muted);padding-top:4px}
.summary__axes{display:flex;gap:10px;flex-wrap:wrap;font-size:11.5px;color:var(--faint);
  padding-top:12px;border-top:1px solid var(--rule);margin-top:12px}
.summary__axes b{color:var(--ink);font-weight:600}

/* 정확히 50 이면 막대가 없으므로 가운데 눈금만 보여줍니다.
   비어 있으면 값이 안 나온 것처럼 보입니다. */
.dich__bar u{position:absolute;left:50%;top:0;bottom:0;width:2px;
  margin-left:-1px;background:var(--ink)}

/* 닉네임 인라인 편집 */
.photo__name{display:flex;gap:6px;align-items:center;margin:0}
.photo__name input{flex:1;min-width:0;font:inherit;font-family:var(--serif);
  font-size:18px;font-weight:600;padding:4px 6px;
  border:1px solid transparent;border-radius:2px;background:transparent;color:var(--ink)}
.photo__name input:hover{border-color:var(--rule)}
.photo__name input:focus{border-color:var(--rule);outline:2px solid var(--accent);outline-offset:1px}
.photo__name button{flex:none;font-size:11.5px;color:var(--muted);
  background:transparent;border:1px solid var(--rule);border-radius:2px;
  padding:6px 12px;cursor:pointer}

/* ── 대운 ─────────────────────────────────────────── */
.luck{padding-top:40px}
.luck__head{display:flex;align-items:baseline;justify-content:space-between;gap:10px;
  border-bottom:1px solid var(--rule);padding-bottom:8px}
.luck__head h2{font-family:var(--serif);font-size:16px;font-weight:600;letter-spacing:.05em}
.luck__head span{font-size:11.5px;color:var(--faint);white-space:nowrap}
/* 여덟 구간이라 좁은 화면에서는 옆으로 밀어서 봅니다 */
.luck__rail{display:flex;gap:7px;overflow-x:auto;padding:16px 0 6px;
  scrollbar-width:none;scroll-snap-type:x proximity}
.luck__rail::-webkit-scrollbar{display:none}
.luck__cell{flex:0 0 72px;text-align:center;scroll-snap-align:start;
  border:1px solid var(--rule);border-radius:2px;padding:10px 4px}
.luck__cell--now{border-color:var(--ink);border-width:2px;padding:9px 3px}
.luck__age{font-size:10px;color:var(--faint);line-height:1.4}
.luck__cell--now .luck__age{color:var(--ink);font-weight:600}
.luck__gz{font-family:var(--serif);font-weight:700;font-size:20px;line-height:1.25;padding-top:3px}
.luck__god{font-size:9.5px;color:var(--faint);padding-top:4px}
.luck__note{font-size:12px;color:var(--muted);padding-top:10px;line-height:1.8}
.luck__note b{color:var(--ink);font-weight:600}

/* 비회원 폼의 성별 선택 */
.tryform__sex{display:flex;align-items:center;justify-content:center;
  border:1px solid var(--rule);border-radius:2px;background:var(--paper);
  font-size:15px;color:var(--muted);cursor:pointer}
.tryform__sex input{position:absolute;opacity:0;width:0;height:0}
.tryform__sex:has(input:checked){background:var(--ink);border-color:var(--ink);color:var(--paper)}
.tryform__sex:has(input:focus-visible){outline:2px solid var(--accent);outline-offset:2px}
.tryform select{width:100%;min-width:0;font:inherit;font-size:15px;
  padding:11px 6px;text-align:center;border:1px solid var(--rule);border-radius:2px;
  background:var(--paper);color:var(--ink)}

/* ── 일간의 힘 ────────────────────────────────────── */
.str{padding-top:34px}
.str__head{display:flex;align-items:baseline;justify-content:space-between;gap:10px;
  border-bottom:1px solid var(--rule);padding-bottom:8px}
.str__head h2{font-family:var(--serif);font-size:16px;font-weight:600;letter-spacing:.05em}
.str__head span{font-size:11.5px;color:var(--faint);letter-spacing:.06em;white-space:nowrap}
.str__level{font-family:var(--serif);font-size:26px;font-weight:600;padding-top:14px}
.str__d{font-size:14px;color:#3a3a3a;padding-top:8px;line-height:1.8}
.str__note{font-size:11.5px;color:var(--faint);padding-top:12px;line-height:1.8}

/* ── 일주 해설 ────────────────────────────────────── */
.ilju{padding-top:38px}
.ilju__head{border-bottom:1px solid var(--rule);padding-bottom:8px}
.ilju__head h2{font-family:var(--serif);font-size:16px;font-weight:600;letter-spacing:.05em}
.ilju__line{font-family:var(--serif);font-size:clamp(18px,4.6vw,21px);
  font-weight:500;line-height:1.55;padding-top:16px}
.ilju__p{font-size:14.5px;color:#3a3a3a;line-height:1.85;padding-top:14px}
.ilju__tags{display:flex;gap:6px;flex-wrap:wrap;padding-top:16px}
.ilju__tags span{font-size:11px;color:var(--muted);
  border:1px solid var(--rule);border-radius:20px;padding:4px 11px}

/* ── 직업 · 십신 분포 ─────────────────────────────── */
.jobs{display:flex;gap:6px;flex-wrap:wrap;padding-top:12px}
.jobs span{font-size:12px;color:var(--ink);background:var(--band);
  border-radius:2px;padding:5px 10px}
.godcount{display:flex;gap:10px;flex-wrap:wrap;padding-top:10px}
.godcount span{font-size:12.5px;color:var(--muted)}
.godcount b{font-weight:600;color:var(--ink)}
.godcount i{font-style:normal;color:var(--muted)}
.reading__note{font-size:11.5px;color:var(--faint);line-height:1.9;
  border-top:1px solid var(--rule);margin-top:34px;padding-top:16px}

/* ══════════════════════════════════════════════════════════
   궁합
   ══════════════════════════════════════════════════════════ */

.compat{max-width:28rem;margin-inline:auto;padding:30px var(--gutter) 90px}
.compat__head{text-align:center}
.compat__k{font-size:11px;color:var(--muted);letter-spacing:.12em}
.compat__t{font-family:var(--serif);font-weight:600;
  font-size:clamp(21px,5.4vw,25px);line-height:1.55;padding-top:10px}
.compat__d{font-size:13px;color:var(--muted);padding-top:12px;line-height:1.8}

.compat__need{border:1px dashed var(--rule);border-radius:2px;
  padding:26px 20px;margin-top:24px;text-align:center}
.compat__need p{font-size:13.5px;color:var(--muted)}
.compat__need a{display:inline-block;background:var(--ink);color:var(--paper);
  border-radius:2px;padding:11px 24px;font-size:14px;margin-top:14px}

.compat__new{display:grid;gap:7px;padding-top:24px}
.compat__new input{font:inherit;font-size:15px;padding:12px;
  border:1px solid var(--rule);border-radius:2px;background:transparent;color:var(--ink)}
.compat__new button{background:var(--ink);color:var(--paper);border:0;border-radius:2px;
  padding:14px;font-size:15px;cursor:pointer}

.compat__past{padding-top:34px}
.compat__past h2{font-family:var(--serif);font-size:15px;font-weight:600;
  border-bottom:1px solid var(--rule);padding-bottom:8px}
.crow{display:flex;align-items:center;gap:10px;padding:14px 0;
  border-bottom:1px solid var(--rule)}
.crow__n{flex:1;font-size:14px;font-weight:600}
.crow__s{font-size:10.5px;color:var(--paper);background:var(--ink);
  border-radius:20px;padding:3px 9px;flex:none}
.crow__s--wait{background:transparent;color:var(--faint);border:1px solid var(--rule)}
.crow__d{font-size:11.5px;color:var(--faint);flex:none}

.compat__back{display:block;text-align:center;font-size:13px;color:var(--muted);
  padding-top:24px;border-bottom:0}

/* 초대 링크 */
.link{display:flex;gap:6px;padding-top:24px}
.link input{flex:1;min-width:0;font:inherit;font-size:12.5px;padding:12px;
  border:1px solid var(--rule);border-radius:2px;background:var(--band);color:var(--muted)}
.link button{flex:none;background:var(--ink);color:var(--paper);border:0;border-radius:2px;
  padding:12px 20px;font-size:13.5px;cursor:pointer}
.link__hint{font-size:11.5px;color:var(--accent);padding-top:8px;text-align:center}

/* 결과 */
.pair{display:grid;grid-template-columns:1fr auto 1fr;gap:10px;align-items:center;
  border-top:1px solid var(--ink);border-bottom:1px solid var(--ink);
  padding:22px 0;margin-top:22px}
.pair .side{text-align:center}
.side__n{font-size:11px;color:var(--faint)}
.side__g{font-family:var(--serif);font-weight:700;
  font-size:clamp(22px,6.5vw,30px);line-height:1.1;padding-top:5px}
.pair .mid{font-family:var(--serif);font-size:19px;color:var(--faint)}

.score{text-align:center;padding-top:24px}
.score__n{font-family:var(--serif);font-weight:700;
  font-size:clamp(40px,12vw,54px);line-height:1}
.score__l{font-size:11.5px;color:var(--faint);letter-spacing:.1em;padding-top:4px}
.score__t{font-family:var(--serif);font-size:18px;font-weight:600;
  padding-top:14px;line-height:1.5}
.score__d{font-size:13.5px;color:var(--muted);padding-top:10px;line-height:1.85}

.axes{padding-top:26px}
.ax{padding-bottom:13px}
.ax__t{display:flex;justify-content:space-between;font-size:12px;padding-bottom:5px}
.ax__t b{font-weight:600}
.ax__b{height:5px;background:var(--rule);border-radius:3px;overflow:hidden}
.ax__b i{display:block;height:5px;background:var(--ink)}

.cnotes{border-top:1px solid var(--rule);margin-top:14px;padding-top:14px}
.cnotes p{font-size:12.5px;color:var(--muted);line-height:1.85;padding-bottom:6px}

.cacts{display:grid;gap:8px;padding-top:26px}
.cacts .pri,.cacts .sec{text-align:center;border-radius:2px;padding:13px;
  font-size:14px;font:inherit;font-size:14px;cursor:pointer}
.cacts .pri{background:var(--ink);color:var(--paper);border:0}
.cacts .sec{border:1px solid var(--rule);color:var(--muted);background:transparent}

.dating{border:1px dashed var(--rule);border-radius:2px;
  padding:20px 16px;margin-top:18px;text-align:center}
.dating__t{font-size:14px;font-weight:600}
.dating__d{font-size:12px;color:var(--muted);padding-top:8px;line-height:1.8}

.note--warn{border-left-color:var(--label)}

/* ══════════════════════════════════════════════════════════
   심리테스트 · 공유
   ══════════════════════════════════════════════════════════ */

.psy{max-width:28rem;margin-inline:auto;padding:32px var(--gutter) 90px}
.psy__head{text-align:center}
.psy__k{font-size:11px;color:var(--muted);letter-spacing:.12em}
.psy__t{font-family:var(--serif);font-weight:600;
  font-size:clamp(22px,5.6vw,26px);line-height:1.5;padding-top:10px}
.psy__d{font-size:13px;color:var(--muted);padding-top:12px;line-height:1.8}
.psy__facts{display:flex;justify-content:center;gap:28px;padding-top:24px}
.psy__facts b{font-family:var(--serif);font-size:24px;font-weight:600;display:block}
.psy__facts span{font-size:11px;color:var(--faint)}
.psy__go{display:block;width:100%;text-align:center;background:var(--ink);color:var(--paper);
  border:0;border-radius:2px;padding:15px;font-size:15px;margin-top:24px;cursor:pointer;font:inherit;font-size:15px}
.psy__acts{display:flex;justify-content:center;gap:18px;padding-top:16px}
.psy__acts a{font-size:12.5px;color:var(--muted);border-bottom:1px solid var(--rule)}
.psy__join{display:block;text-align:center;border:1px solid var(--rule);border-radius:2px;
  padding:13px;font-size:14px;color:var(--muted);margin-top:10px}
.psy__empty{text-align:center;padding:40px 0;font-size:13px;color:var(--faint)}

/* 목록 */
.trow{display:block;border-bottom:1px solid var(--rule);padding:18px 0}
.trow:first-of-type{border-top:1px solid var(--rule);margin-top:26px}
.trow__t{font-size:15px;font-weight:600;line-height:1.45}
.trow__s{font-size:11.5px;color:var(--faint);padding-top:5px}

/* 결과 카드. 공유될 때 이 모양 그대로 보입니다. */
.rcard{border:1px solid var(--ink);border-radius:2px;overflow:hidden;margin-top:24px}
.rcard__top{background:linear-gradient(180deg,#eef2ec,#fff);padding:30px 20px 26px;text-align:center}
.rcard__k{font-size:10.5px;color:var(--muted);letter-spacing:.12em}
.rcard__t{font-family:var(--serif);font-weight:600;
  font-size:clamp(22px,6vw,28px);line-height:1.45;padding-top:10px}
.rcard__b{font-size:13.5px;color:var(--muted);padding-top:14px;line-height:1.85}
.rcard__bar{display:flex;border-top:1px solid var(--rule)}
.rcard__bar div{flex:1;text-align:center;padding:13px 4px}
.rcard__bar div+div{border-left:1px solid var(--rule)}
.rcard__bn{font-size:10px;color:var(--faint)}
.rcard__bv{font-size:16px;font-weight:700;padding-top:2px}
.rcard__who{border-top:1px solid var(--rule);padding:11px;text-align:center;
  font-size:11px;color:var(--faint)}

/* ══════════════════════════════════════════════════════════
   동의
   ══════════════════════════════════════════════════════════ */

/* 가입 화면 */
.agree{border-top:1px solid var(--rule);margin-top:24px;padding-top:18px}
.agree__h{font-size:11px;color:var(--faint);letter-spacing:.1em;padding-bottom:6px}
.agree .check span em{font-style:normal;font-size:10.5px;color:var(--faint);padding-left:6px}
.agree .check span em.req{color:var(--label)}
.agree__d{font-size:11.5px;color:var(--faint);line-height:1.75;padding:4px 0 0 24px}
.agree__gain{background:var(--band);border-left:2px solid var(--accent);
  padding:11px 13px;margin:8px 0 0 24px;font-size:11.5px;color:var(--muted);line-height:1.8}
.agree__gain b{color:var(--ink);font-weight:600}
.agree__later{font-size:11px;color:var(--faint);line-height:1.8;padding-top:14px}

/* 설정 화면 */
.consent{max-width:30rem;margin-inline:auto;padding:32px var(--gutter) 90px}
.consent__head{text-align:center}
.consent__k{font-size:11px;color:var(--muted);letter-spacing:.12em}
.consent__t{font-family:var(--serif);font-weight:600;
  font-size:clamp(21px,5.4vw,25px);line-height:1.55;padding-top:10px}
.consent__d{font-size:13px;color:var(--muted);padding-top:12px}
.msg{font-size:12.5px;color:var(--accent);padding-top:14px;text-align:center}

.citem{display:flex;gap:14px;align-items:flex-start;
  border-top:1px solid var(--rule);padding:20px 0}
.citem:last-of-type{border-bottom:1px solid var(--rule)}
.citem__b{flex:1;min-width:0}
.citem__t{font-size:15px;font-weight:600}
.citem__t em{font-style:normal;font-size:10.5px;font-weight:400;
  color:var(--faint);padding-left:6px}
.citem__t em.req{color:var(--label)}
.citem__d{font-size:12.5px;color:var(--muted);padding-top:6px;line-height:1.75}
.citem__gain{padding:8px 0 0 14px}
.citem__gain li{font-size:11.5px;color:var(--faint);line-height:1.9;
  position:relative;padding-left:10px}
.citem__gain li::before{content:'·';position:absolute;left:0}
.citem__fixed{flex:none;font-size:11.5px;color:var(--faint);padding-top:2px}
.citem form{margin:0;flex:none}
.citem button{font:inherit;font-size:12px;cursor:pointer;
  background:transparent;color:var(--muted);
  border:1px solid var(--rule);border-radius:20px;padding:6px 16px}
.citem button.on{background:var(--ink);border-color:var(--ink);color:var(--paper)}

.chist{padding-top:36px}
.chist h2{font-family:var(--serif);font-size:15px;font-weight:600;
  border-bottom:1px solid var(--rule);padding-bottom:8px}
.chist__d{font-size:11.5px;color:var(--faint);padding-top:10px;line-height:1.8}
.chrow{display:flex;gap:10px;align-items:center;padding:11px 0;
  border-bottom:1px solid var(--rule);font-size:12px}
.chrow__c{flex:1;color:var(--muted)}
.chrow__s{flex:none;font-size:10.5px;color:var(--faint);
  border:1px solid var(--rule);border-radius:20px;padding:2px 9px}
.chrow__d{flex:none;color:var(--faint);font-size:11px}
.consent__back{display:block;text-align:center;font-size:13px;
  color:var(--muted);padding-top:26px}

/* 포스터 비율. 영화·드라마는 2:3 입니다. */
.media--poster{aspect-ratio:2/3}
/* 이미지가 없을 때. 저작물이라 다른 그림으로 대체하지 않습니다. */
.media__none{font-family:var(--serif);font-size:32px;color:#c9c9c6}

/* 색 견본. 왜 이 색인지 말보다 빠르게 보여줍니다. */
.swatch{display:flex;align-items:center;gap:6px;flex-wrap:wrap;
  padding:0 var(--gutter) 20px}
.swatch span{width:30px;height:30px;border-radius:16px;display:block;flex:none}
.swatch em{font-style:normal;font-size:11.5px;color:var(--faint);padding-left:6px}

/* 메인 "오늘에 어울리는 것" 처럼 사진 카드와 포스터가 한 줄에 섞이는 곳.
   비율이 다르면 카드 높이가 들쭉날쭉해 보여서 모두 3:4 로 맞춥니다.
   포스터는 위아래가 조금 잘리므로 제목이 있는 위쪽을 기준으로 둡니다. */
.row--uniform .media,
.row--uniform .media--poster { aspect-ratio:3/4; }
.row--uniform .media--poster img { object-position:center top; }

/* ══ 메인 카테고리 섹션 (여행·패션·영화·드라마 각 8장) ══ */
.home-intro { display:flex; align-items:baseline; justify-content:space-between; gap:12px;
  padding:56px var(--gutter) 0; border-top:1px solid var(--rule); margin:40px var(--gutter) 0; padding-inline:0; }
.home-intro h2 { font-size:clamp(23px,5.5vw,28px); font-weight:700; letter-spacing:-.02em; }
.home-intro span { font-size:11px; color:var(--muted); }
.shead--sub { padding-top:34px; }
.shead--sub h2 { font-size:18px; }
.shead--sub h2 small { font-size:11px; font-weight:400; color:var(--muted); margin-left:6px; letter-spacing:0; }
.ask .ask__go { margin-top:20px; padding:14px 34px; }

/* 심리테스트 카드. 생성 이미지를 4:5 로 받습니다 */
.media--test { aspect-ratio:4/5; }

/* 목록 줄거리는 세 줄까지. 전체는 상세 화면에서 봅니다 */
.excerpt { display:-webkit-box; -webkit-line-clamp:3; -webkit-box-orient:vertical; overflow:hidden; }

/* ══ 영화·드라마 상세 (에디토리얼형) ══════════════════════════ */
.wd__hero { position:relative; margin-inline:var(--gutter); aspect-ratio:16/9; background:#111; overflow:hidden; }
.wd__hero img { width:100%; height:100%; object-fit:cover; }
/* 배경 이미지가 없어 포스터로 그릴 때. 세로 포스터를 가로 틀에 잘라 넣으면 얼굴이 잘리므로 위쪽 기준 */
.wd__hero--poster img { object-position:center 20%; }
.wd__veil { position:absolute; inset:auto 0 0 0; height:65%; background:linear-gradient(180deg,transparent,rgba(0,0,0,.8)); }
.wd__head { position:absolute; inset:auto 0 0 0; padding:0 22px 22px; color:#fff; }
.wd__kicker { font-size:11.5px; color:rgba(255,255,255,.75); letter-spacing:.02em; }
.wd__title { font-family:var(--serif); font-weight:600; font-size:clamp(28px,7vw,44px);
  letter-spacing:-.02em; line-height:1.25; padding-top:6px; }

.wd__body { display:grid; gap:28px; padding:28px var(--gutter) 8px; }
.wd__lead { font-family:var(--serif); font-size:clamp(18px,4.2vw,21px); line-height:1.65; letter-spacing:-.01em; }
.wd__text { font-size:14.5px; color:#444; line-height:1.9; padding-top:14px; }
.wd__text--empty { color:var(--faint); }

.wd__side { border-top:1px solid var(--rule); padding-top:18px; }
.wd__label { font-size:11px; font-weight:700; letter-spacing:.02em; padding-top:14px; }
.wd__label:first-child { padding-top:0; }
.wd__segs li { font-size:13px; color:var(--muted); line-height:1.9; }
.wd__why { font-size:13px; color:var(--ink); padding-top:4px; line-height:1.7; }
.wd__why--muted { color:var(--muted); }
.wd__why a { border-bottom:1px solid var(--rule); margin-left:4px; }
.wd__credit { font-size:10px; color:#b0b0b0; padding-top:22px; line-height:1.6; }

@media (min-width:760px) {
  .wd__hero { aspect-ratio:21/9; }
  .wd__head { padding:0 36px 34px; }
  .wd__body { grid-template-columns:minmax(0,1fr) 230px; gap:44px; padding-top:40px; }
  .wd__side { border-top:0; border-left:1px solid var(--rule); padding:0 0 0 22px; }
}

/* ══ 메달 ══════════════════════════════════════════════════
   --c 메달 색, --ink 글자색(밝은 메달은 어두운 글자). 잠긴 메달은 회색 칸 + ?  */
.medal { --c:#9aa0a6; --ink:#fff; display:inline-grid; place-items:center; flex:none;
  width:44px; height:44px; border-radius:50%; background:var(--c); color:var(--ink);
  font-family:var(--serif); font-weight:600; font-size:16px; line-height:1;
  box-shadow:inset 0 0 0 3px rgba(255,255,255,.28), 0 1px 0 rgba(0,0,0,.08); }
.medal--sm { width:26px; height:26px; font-size:11px; box-shadow:inset 0 0 0 2px rgba(255,255,255,.28); }
.medal--lg { width:68px; height:68px; font-size:26px; box-shadow:inset 0 0 0 4px rgba(255,255,255,.3), 0 2px 0 rgba(0,0,0,.08); }
.medal--locked { background:#efeee9; color:#c2c0b8; box-shadow:inset 0 0 0 1.5px #dedcd5; }
/* Complete: 흰 바탕에 굵은 테. 결과 메달과 모양으로 구분됩니다 */
.medal--complete { background:#fff; color:var(--c); box-shadow:inset 0 0 0 4px var(--c), inset 0 0 0 7px #fff, inset 0 0 0 8px var(--c);
  font-family:var(--sans); font-weight:800; letter-spacing:-.02em; }
.medal--complete.medal--locked { background:#f6f5f1; color:#c2c0b8; box-shadow:inset 0 0 0 3px #dedcd5; }
.medal--xl { width:120px; height:120px; font-size:44px; box-shadow:inset 0 0 0 6px rgba(255,255,255,.3), 0 3px 0 rgba(0,0,0,.1); }
/* 그림 메달. 생성 이미지는 배경이 있어도 원으로 잘라 씁니다 */
.medal--img { background:#fff; overflow:hidden; box-shadow:0 1px 0 rgba(0,0,0,.08); }
.medal--img img { width:100%; height:100%; object-fit:cover; border-radius:50%; display:block;
  transform:scale(1.14); }   /* 생성 그림은 메달 둘레에 여백이 있어 조금 키워 잘라 냅니다 */
/* 히든: 금색 테. 잠기면 검은 칸에 ? */
.medal--hidden { box-shadow:inset 0 0 0 3px #d4b56a, inset 0 0 0 5px rgba(0,0,0,.25), 0 0 0 1px #d4b56a; }
.medal--hidden.medal--img { box-shadow:0 0 0 2px #d4b56a; }
.medal--hidden.medal--locked { background:#efeee9; color:#c2c0b8; box-shadow:inset 0 0 0 1.5px #dedcd5, 0 0 0 1px #e6d6ad; }
.medals { display:flex; align-items:center; gap:4px; flex-wrap:wrap; padding-top:8px; }
.medals em { font-style:normal; font-size:10.5px; color:var(--faint); margin-left:4px; }

/* ══ 심리테스트 목록 (컬렉션 카드) ══ */
.tl__head { text-align:center; padding:28px var(--gutter) 8px; max-width:40rem; margin-inline:auto; }
.tl__t { font-family:var(--serif); font-weight:600; font-size:clamp(24px,6vw,32px); padding-top:6px; letter-spacing:-.02em; }
.tl__score { display:flex; flex-wrap:wrap; justify-content:center; align-items:baseline; gap:6px 18px;
  margin-top:18px; padding:12px 16px; background:var(--band); font-size:12.5px; color:var(--muted); }
.tl__score b { color:var(--ink); font-size:16px; }
.tl__score em { font-style:normal; color:var(--ink); border-bottom:1px solid var(--rule); }
.tl__col { padding-top:18px; }
.tl__colhead { display:flex; justify-content:space-between; align-items:center; gap:16px;
  padding:26px var(--gutter) 16px; }
.tl__colhead h2 { font-size:19px; font-weight:700; letter-spacing:-.02em; }
.tl__colhead p { font-size:12px; color:var(--muted); padding-top:3px; }
.tl__complete { display:flex; align-items:center; gap:10px; }
.tl__progress { display:grid; gap:5px; font-size:11px; color:var(--muted); min-width:74px; }
.tl__progress b { color:var(--ink); }
.tl__progress > i { display:block; height:4px; background:var(--rule); border-radius:2px; overflow:hidden; }
.tl__progress > i > i { display:block; height:100%; background:var(--ink); }
.tcard { position:relative; }
.tcard__done { position:absolute; top:8px; left:8px; background:rgba(17,17,17,.82); color:#fff;
  font-size:10.5px; padding:3px 7px; letter-spacing:.02em; }
.media--test { position:relative; }

/* ══ 결과 화면: 메달과 컬렉션 진행 ══ */
.award { display:flex; align-items:center; gap:16px; margin:18px 0 0; padding:16px 18px; border:1px solid var(--rule); text-align:left; }
.award__k { font-size:11px; color:var(--muted); letter-spacing:.02em; }
.award__t { font-size:16px; font-weight:700; letter-spacing:-.02em; padding-top:2px; }
.award__go { display:inline-block; font-size:12px; color:var(--ink); border-bottom:1px solid var(--rule); margin-top:6px; }
.award--complete { background:#fbf8f0; border-color:#e8dcc0; }
.colprog { margin-top:14px; padding:16px 18px; background:var(--band); text-align:left; }
.colprog__head { display:flex; justify-content:space-between; font-size:13px; }
.colprog__head span { color:var(--muted); font-size:12px; }
.colprog__slots { display:grid; grid-template-columns:repeat(3,minmax(0,1fr)); gap:8px; padding-top:12px; }
.colprog__slot { display:flex; flex-direction:column; align-items:center; gap:6px; text-align:center; }
.colprog__slot em { font-style:normal; font-size:10.5px; color:var(--muted); line-height:1.4; }
.colprog__slot.is-done em { color:var(--ink); }
.psy__go--next { margin-top:14px; font-size:14px; }

/* ══ 메달 보드 ══ */
.bd__sum { display:flex; justify-content:center; gap:22px; padding-top:18px; flex-wrap:wrap; }
.bd__sum b { font-family:var(--serif); font-size:30px; font-weight:600; margin-right:4px; }
.bd__sum span { font-size:12px; color:var(--muted); }
.bd__col { border-top:1px solid var(--rule); margin:22px var(--gutter) 0; }
.bd__col .tl__colhead { padding-inline:0; }
.bd__cm { display:flex; flex-direction:column; align-items:center; gap:6px; }
.bd__share { font:inherit; font-size:11.5px; color:var(--ink); background:none; border:0; border-bottom:1px solid var(--rule); padding:0; cursor:pointer; }
/* 테스트 칸: 메달 + 테스트 이름 + 내 결과 */
.bd__tests { display:grid; gap:8px; }
.bd__t { display:flex; align-items:center; justify-content:space-between; gap:12px; padding:10px 14px; border:1px solid var(--rule); }
.bd__t > a { display:flex; align-items:center; gap:12px; min-width:0; flex:1; color:inherit; }
.bd__tt { display:grid; gap:2px; min-width:0; }
.bd__tt em { font-style:normal; font-size:11px; color:var(--muted); }
.bd__tt b { font-size:14px; font-weight:700; letter-spacing:-.02em; }
.bd__t:not(.is-on) .bd__tt b { color:var(--faint); font-weight:500; }
/* 히든 메달 */
.bd__hidden { display:grid; gap:10px; }
/* 히든 메달 칸: 다른 칸과 같은 흰 바탕. 받은 것만 옅은 금빛 바탕과 금테로 구분합니다 */
.bd__h { display:flex; align-items:center; gap:14px; padding:12px 14px; background:var(--paper); border:1px solid var(--rule); color:var(--muted); }
.bd__h b { display:block; font-size:14px; color:var(--faint); }
.bd__h p { font-size:12px; line-height:1.5; padding-top:2px; }
.bd__h.is-on { background:#fbf7ec; border-color:#e6d6ad; color:var(--muted); }
.bd__h.is-on b { color:var(--ink); }
.bd__h .bd__share { margin-top:6px; }
@media (min-width:760px) { .bd__tests, .bd__hidden { grid-template-columns:repeat(2,minmax(0,1fr)); } }

/* ══ 결과 키워드 · 히든 메달 열림 ══ */
.kw { display:flex; flex-wrap:wrap; justify-content:center; gap:6px; padding-top:14px; }
.kw span { font-size:12px; padding:3px 9px; border:1px solid var(--rule); border-radius:999px; color:var(--muted); }
.kw--sum { padding-top:16px; }
.hidden-open { margin-top:18px; padding:26px 20px 22px; background:#fbf7ec; border:1px solid #e6d6ad; color:var(--ink); text-align:center;
  display:flex; flex-direction:column; align-items:center; gap:8px; }
.hidden-open__k { font-size:11px; letter-spacing:.14em; color:#a8873a; }
.hidden-open__t { font-family:var(--serif); font-size:26px; font-weight:600; color:var(--ink); padding-top:6px; }
.hidden-open__l { font-size:15px; font-weight:600; }
.hidden-open__b { font-size:13px; color:var(--muted); line-height:1.8; max-width:30rem; }
.hidden-open form { width:100%; padding-top:8px; }

.award__share { margin:0; }
.award__share button { font:inherit; background:none; border:0; border-bottom:1px solid var(--rule); padding:0; cursor:pointer; }
.rcard__medal { display:flex; justify-content:center; padding-bottom:14px; }
.rcard__line { font-size:15px; font-weight:600; padding-top:10px; }
.rcard--hidden .rcard__top { background:linear-gradient(180deg,#f6eed8,#fff); }
.rcard--hidden .rcard__k { color:#a8873a; }


/* ══ 마이페이지 메달 요약 ══ */
.mybd { padding:8px var(--gutter) 0; }
.mybd .shead { padding-inline:0; }
.mybd .tl__score { margin-top:0; }
.mybd__row { display:flex; gap:14px; overflow-x:auto; padding:16px 2px 6px; scrollbar-width:thin; }
.mybd__m { display:flex; flex-direction:column; align-items:center; gap:6px; width:76px; flex:none; text-align:center; color:inherit; }
.mybd__m em { font-style:normal; font-size:10.5px; line-height:1.35; color:var(--muted); }
.mybd__m.is-off em { color:var(--faint); }
.mybd__empty { font-size:13px; color:var(--muted); padding:10px 0; }
.mybd__empty a { border-bottom:1px solid var(--rule); }

/* ══ 테스트 카드: 푼 테스트는 회색으로 덮고 받은 메달을 위에 ══ */
.tcard__over { position:absolute; inset:0; display:flex; flex-direction:column; align-items:center; justify-content:center;
  gap:6px; padding:12px; text-align:center; background:rgba(60,60,60,.55); backdrop-filter:grayscale(1); -webkit-backdrop-filter:grayscale(1); }
.tcard__over .medal { box-shadow:0 0 0 3px rgba(255,255,255,.85), 0 4px 14px rgba(0,0,0,.25); }
.tcard__got { font-size:10.5px; letter-spacing:.14em; color:#fff; background:rgba(17,17,17,.7); padding:2px 8px; margin-top:4px; }
.tcard__over em { font-style:normal; font-size:12.5px; font-weight:700; color:#fff; line-height:1.35; text-shadow:0 1px 3px rgba(0,0,0,.4); }
.tcard.is-done .headline, .tcard.is-done .byline, .tcard.is-done .kicker { color:var(--muted); }
/* 묶음 완료 표시(· 완료)는 없앴습니다. 묶음 메달이 없어서 */


/* ══ 심리테스트 시작·문항: 대표 이미지를 흐리게 깐 배경 ══
   main 안에서만 쌓이게(isolation) 해서 머리말·바닥글은 그대로 흰 바탕입니다. */
.psy--art { position:relative; isolation:isolate; }
/* 좌우는 화면 끝까지만(가운데 정렬된 본문 기준 50% - 50vw). 예전 -50vw 는 휴대폰에서 페이지 폭을 563px 로 넓혀 화면이 축소되고 하단바가 밀렸습니다 */
.psy-bg { position:absolute; top:0; bottom:0; left:calc(50% - 50vw); right:calc(50% - 50vw); z-index:-1; pointer-events:none; overflow:hidden; }
.psy-bg::before { content:""; position:absolute; inset:0; background:var(--bg) center 30% / cover no-repeat;
  filter:blur(26px) saturate(1.2); opacity:.55; transform:scale(1.15); }
.psy-bg::after { content:""; position:absolute; inset:0;
  background:linear-gradient(180deg, rgba(255,255,255,.15) 0%, rgba(255,255,255,.55) 60%, var(--paper) 100%); }
.psy-bg--quiet::before { opacity:.35; }
.psy__art { width:min(240px, 62%); margin:4px auto 22px; aspect-ratio:4/5; overflow:hidden; border-radius:4px;
  box-shadow:0 14px 34px rgba(0,0,0,.14), 0 2px 6px rgba(0,0,0,.06); }
.psy__art img { width:100%; height:100%; object-fit:cover; display:block; }
.psy--art .note { background:rgba(255,255,255,.72); backdrop-filter:blur(6px); -webkit-backdrop-filter:blur(6px); }
.psy--art .scale button:not(.on) { background:rgba(255,255,255,.82); }

/* ══ 결과 카드: 대표 이미지를 흐리게 깔고 메달을 앞에 ══ */
.rcard--art .rcard__top { position:relative; isolation:isolate; overflow:hidden; padding-top:34px; background:#f7f5f0; }
.psy-bg--card { inset:0; }
.psy-bg--card::before { opacity:.75; filter:blur(16px) saturate(1.2); }
.psy-bg--card::after { background:linear-gradient(180deg, rgba(255,255,255,.05) 0%, rgba(255,255,255,.55) 45%, rgba(255,255,255,.92) 75%, #fff 100%); }
.rcard__medal { display:flex; justify-content:center; padding-bottom:18px; }
.medal--hero { width:148px; height:148px; font-size:56px;
  box-shadow:0 0 0 5px rgba(255,255,255,.9), 0 18px 40px rgba(0,0,0,.28); }
.medal--hero.medal--img { box-shadow:0 0 0 5px rgba(255,255,255,.9), 0 18px 40px rgba(0,0,0,.28); }
@media (min-width:1024px) { .medal--hero { width:180px; height:180px; font-size:66px; } }

/* ══ 카드 비율 통일: 여행·패션·영화·드라마·테스트 모두 3:4 ══
   한 줄에 섞여도, 섹션이 달라도 카드 모양이 같아 보이게. 2:3 은 세로로 길어 스크롤이 많았습니다. */
.row .media, .row .media--poster, .row .media--test, .row--uniform .media { aspect-ratio:3/4; }
.row .media--poster img { object-position:center top; }

/* ══ 넓은 화면 ══
   데스크톱에서 좁아 보인다는 의견. 전체 폭과 여백을 키우고, 한 줄로 좁던 화면들도 넓힙니다. */
@media (min-width:1024px) {
  :root { --maxw:1240px; --gutter:40px; --gap:24px; }
  .row { row-gap:34px; }
  .headline { font-size:15.5px; }
  .psy { max-width:38rem; }
  .quiz { max-width:40rem; }
  .quiz__q { font-size:26px; }
  .result { max-width:40rem; }
  .mypage { max-width:52rem; }
  .tl__head { max-width:52rem; }
  .bd__tests, .bd__hidden { grid-template-columns:repeat(3,minmax(0,1fr)); }
  /* 시작 화면: 그림 왼쪽, 설명 오른쪽 */
  .psy.psy--art:has(.psy__art) { max-width:64rem; display:grid; grid-template-columns:minmax(0,340px) minmax(0,1fr);
    column-gap:56px; align-items:center; padding-top:56px; }
  .psy--art:has(.psy__art) .psy__art { grid-row:1 / span 4; width:100%; margin:0; }
  .psy--art:has(.psy__art) .psy__head { text-align:left; }
  .psy--art:has(.psy__art) .psy__facts { justify-content:flex-start; }
}

/* ══ 밸런스 게임 ══ */
.bl__play { display:inline-block; margin-top:12px; font-size:13px; font-weight:700; color:var(--ink); border-bottom:1px solid var(--ink); }
/* 문항: 두 선택지를 나란히, 가운데 VS. 고르면 아래에서 차오르는 막대로 비율 */
.vs { display:grid; grid-template-columns:1fr auto 1fr; align-items:stretch; gap:10px; padding-top:22px; }
.vs::before { content:"VS"; order:2; align-self:center; font-family:var(--serif); font-size:15px; font-weight:600; color:var(--muted); }
.vs__opt.is-a { order:1; } .vs__opt.is-b { order:3; }
.vs__opt { position:relative; overflow:hidden; font:inherit; font-size:15.5px; font-weight:600; line-height:1.5; letter-spacing:-.02em;
  min-height:170px; padding:18px 12px; cursor:pointer; text-align:center; color:var(--ink);
  background:rgba(255,255,255,.86); border:1.5px solid var(--rule); border-radius:4px;
  display:flex; flex-direction:column; align-items:center; justify-content:center; gap:8px; transition:border-color .15s, transform .1s; }
.vs__opt:active { transform:scale(.98); }
.vs__opt.is-a:hover, .vs__opt.is-a.is-mine { border-color:#d0583a; }
.vs__opt.is-b:hover, .vs__opt.is-b.is-mine { border-color:#3a6fb0; }
.vs__txt, .vs__pct { position:relative; }
.vs__bar { position:absolute; left:0; right:0; bottom:0; transition:height .5s ease; }
.vs__opt.is-a .vs__bar { background:rgba(208,88,58,.16); }
.vs__opt.is-b .vs__bar { background:rgba(58,111,176,.16); }
.vs__pct { font-family:var(--serif); font-size:26px; font-weight:600; }
.vs__opt.is-mine::after { content:"내 선택"; position:absolute; top:8px; left:50%; transform:translateX(-50%);
  font-size:10.5px; font-weight:700; color:#fff; background:var(--ink); padding:1px 8px; }
.vs.is-revealed .vs__opt:not(.is-mine) { color:var(--muted); }
.vs__meta { font-size:12px; color:var(--muted); text-align:center; padding-top:14px; }
.vs + .vs__meta + .psy__go { margin-top:14px; }
@media (min-width:1024px) { .vs__opt { min-height:220px; font-size:18px; } }

/* 메인 비회원 버튼. 예전 회색 섹션(.ask)은 첫 화면을 다 차지해 아래 테스트가 안 보였습니다 */
.today__try { display:inline-block; margin-top:14px; padding:9px 20px; font-size:13px; font-weight:600;
  background:var(--ink); color:var(--paper); border-radius:999px; }
.today__try:hover { opacity:.88; }

/* ══ 영화·드라마: 봤어요 · 볼 수 있는 곳 ══ */
.row .media { position:relative; }
.seen-tag { position:absolute; top:8px; left:8px; z-index:1; font-size:10.5px; font-weight:700; color:#fff;
  background:rgba(17,17,17,.82); padding:3px 8px; letter-spacing:.02em; }
.wd__acts { display:flex; align-items:center; flex-wrap:wrap; gap:10px 14px; padding:18px var(--gutter) 0; }
.wd__acts form { margin:0; }
.seen-btn { display:inline-flex; align-items:center; gap:6px; font:inherit; font-size:13px; font-weight:600; cursor:pointer;
  padding:9px 18px; border:1.5px solid var(--ink); border-radius:999px; background:var(--paper); color:var(--ink); }
.seen-btn.is-on { background:var(--ink); color:var(--paper); }
.wd__seenhint { font-size:12px; color:var(--muted); }
.where { margin:18px var(--gutter) 0; padding:16px 18px; background:var(--band); }
.where__list { display:flex; flex-wrap:wrap; gap:10px; padding-top:10px; }
.where__item { display:flex; align-items:center; gap:10px; padding:8px 14px 8px 8px; background:var(--paper); border:1px solid var(--rule); border-radius:10px; }
.where__item:hover { border-color:var(--ink); }
.where__item img { width:36px; height:36px; border-radius:8px; object-fit:cover; flex:none; }
.where__item span { display:grid; line-height:1.3; }
.where__item b { font-size:13px; }
.where__item em { font-style:normal; font-size:11px; color:var(--muted); }
.where__none { font-size:13px; color:var(--muted); padding-top:8px; }
.where__src { font-size:10.5px; color:var(--faint); padding-top:12px; }
.where__src a { border-bottom:1px solid var(--rule); }

/* ══ 여행지 상세 (영화 상세 모양을 그대로 쓰고 필요한 것만 더함) ══ */
.td__overview { white-space:pre-line; }
.td__gl { padding-top:26px; }
.td__gallery { display:grid; grid-template-columns:repeat(2,minmax(0,1fr)); gap:8px; padding-top:10px; }
.td__gallery a { display:block; aspect-ratio:4/3; overflow:hidden; background:var(--band); }
.td__gallery img { transition:transform .3s; }
.td__gallery a:hover img { transform:scale(1.04); }
@media (min-width:760px) { .td__gallery { grid-template-columns:repeat(3,minmax(0,1fr)); } }
.td__addr { font-size:13.5px; line-height:1.6; }
.td__map { display:block; width:100%; aspect-ratio:4/3; border:1px solid var(--rule); margin-top:10px; }
.td__maplinks { display:flex; gap:8px; padding-top:8px; }
.td__maplinks a { flex:1; text-align:center; font-size:12.5px; font-weight:600; padding:8px 0; border:1px solid var(--ink); border-radius:999px; }
.td__maplinks a:last-child { background:var(--ink); color:var(--paper); }
.td__info { display:grid; grid-template-columns:auto 1fr; gap:6px 12px; margin:6px 0 0; font-size:13px; }
.td__info dt { color:var(--muted); white-space:nowrap; }
.td__info dd { margin:0; white-space:pre-line; line-height:1.55; }
.td__contact { font-size:13.5px; padding-top:4px; }
.td__contact a { border-bottom:1px solid var(--rule); }
.td__back { padding:28px var(--gutter) 0; font-size:13px; }
.td__back a { border-bottom:1px solid var(--rule); }

/* ══ 사주 결과: 섹션을 아이콘 달린 카드로 ══ */
.ic { display:inline-grid; place-items:center; width:34px; height:34px; flex:none; border-radius:50%;
  background:var(--band); color:var(--accent); }
.cgrid { display:grid; gap:14px; padding-top:28px; }
.cgrid .reading { display:contents; }
.csec { padding:18px 18px 20px !important; border:1px solid var(--rule); border-radius:6px; background:var(--paper); }
.csec__h { display:flex; align-items:center; gap:10px; flex-wrap:wrap; border-bottom:0 !important; padding-bottom:4px !important; margin:0; }
.csec__h h2 { font-family:var(--serif); font-size:17px; font-weight:600; letter-spacing:.03em; margin:0; padding:0; }
.csec__h > span:not(.ic) { margin-left:auto; }
.reading .csec h2 { padding:0; border:0; }
.jobgroups { display:grid; gap:12px; padding-top:12px; }
.jobgroup { padding:12px 14px; background:var(--band); border-radius:4px; }
.jobgroup__t { font-size:12px; font-weight:700; color:var(--accent); letter-spacing:.02em; }
.jobgroup .jobs { padding-top:8px; }
.jobgroup .jobs span { background:var(--paper); }
@media (min-width:760px) { .jobgroups { grid-template-columns:repeat(3,minmax(0,1fr)); } }
@media (min-width:1024px) {
  .chartwrap { max-width:72rem; }
  .chartwrap > .chd, .chartwrap > .chart, .chartwrap > .basis { max-width:44rem; margin-inline:auto; }
  .cgrid { grid-template-columns:repeat(2,minmax(0,1fr)); gap:18px; }
  .csec--wide { grid-column:1 / -1; }
  .reading__note, .chartwrap > .join, .chart__acts { max-width:44rem; margin-inline:auto; }
}

/* ══ 운세 ══ */
.ft { padding:0 var(--gutter) 70px; }
.ft__head { text-align:center; padding-top:28px; }
.ft__tabs { display:flex; justify-content:center; gap:6px; flex-wrap:wrap; padding-top:16px; }
.ft__tabs a { font-size:13.5px; padding:7px 16px; border:1px solid var(--rule); border-radius:999px; color:var(--muted); }
.ft__tabs a.is-on { background:var(--ink); border-color:var(--ink); color:var(--paper); }
.ft__gate { max-width:34rem; margin:34px auto 0; padding:28px 22px; text-align:center; border:1px solid var(--rule); border-radius:8px; display:grid; justify-items:center; gap:10px; }
.ft__gate h2 { font-family:var(--serif); font-size:20px; }
.ft__gate p { font-size:14px; color:var(--muted); line-height:1.8; }
.ft__gatebtns, .ft__formbtns { display:flex; gap:8px; flex-wrap:wrap; justify-content:center; padding-top:6px; }
.ft__btn { display:inline-block; font:inherit; font-size:14px; font-weight:600; padding:10px 22px; border-radius:999px; background:var(--ink); color:var(--paper); border:1.5px solid var(--ink); cursor:pointer; }
.ft__btn--ghost { background:var(--paper); color:var(--ink); }
.ft__hero { max-width:44rem; margin:26px auto 0; text-align:center; padding:26px 20px; background:var(--band); border-radius:8px; }
.ft__gz { font-size:12.5px; color:var(--muted); }
.ft__gz b { font-family:var(--serif); font-size:22px; color:var(--ink); margin-right:6px; letter-spacing:.06em; }
.ft__lead { font-family:var(--serif); font-size:clamp(20px,4.8vw,26px); font-weight:600; line-height:1.5; padding-top:10px; text-wrap:balance; }
.ft__lead--sm { font-size:18px; text-align:left; padding-top:8px; }
.ft__kw { display:flex; justify-content:center; gap:6px; padding-top:12px; flex-wrap:wrap; }
.ft__kw span { font-size:12.5px; padding:3px 10px; border-radius:999px; background:var(--paper); border:1px solid var(--rule); }
.ft__range { font-size:11.5px; color:var(--faint); padding-top:12px; }
.ft__grid { display:grid; gap:14px; padding-top:18px; }
@media (min-width:1024px) { .ft__grid { grid-template-columns:repeat(2,minmax(0,1fr)); gap:18px; } }
.ft__p { font-size:14.5px; line-height:1.8; padding-top:8px; }
.ft__label { font-size:12px; font-weight:700; color:var(--accent); padding-top:14px; }
.ft__label small { font-weight:400; color:var(--faint); margin-left:6px; }
.ft__areas { display:grid; gap:12px; padding-top:12px; }
.ft__bar { display:grid; grid-template-columns:64px 1fr 18px; gap:10px; align-items:center; font-size:13px; }
.ft__bar i { display:block; height:8px; border-radius:4px; background:var(--band); overflow:hidden; }
.ft__bar i b { display:block; height:100%; border-radius:4px; background:var(--ink); }
.ft__bar i b.is-work { background:var(--fire); } .ft__bar i b.is-love { background:#c46d8b; } .ft__bar i b.is-money { background:var(--earth); }
.ft__bar i b.is-study { background:var(--water); } .ft__bar i b.is-rest { background:var(--metal); }
.ft__bar em { font-style:normal; font-weight:700; text-align:right; font-variant-numeric:tabular-nums; }
.ft__area p { font-size:13px; color:var(--muted); line-height:1.65; padding:4px 0 0 74px; }
.ft__months { display:grid; grid-template-columns:repeat(6,minmax(0,1fr)); gap:6px; padding-top:12px; }
.ft__mcell { display:grid; justify-items:center; gap:2px; padding:8px 0; border-radius:6px; background:var(--band); font-size:12px; }
.ft__mcell em { font-style:normal; font-family:var(--serif); font-size:11px; color:var(--muted); }
.ft__mcell.is-good { background:rgba(62,124,89,.16); }
.ft__mcell.is-care { background:rgba(179,58,50,.13); }
.ft__mcell.is-now { outline:2px solid var(--ink); outline-offset:-2px; font-weight:700; }
.ft__legend { display:flex; gap:12px; flex-wrap:wrap; font-size:11px; color:var(--faint); padding-top:10px; align-items:center; }
.ft__legend i { display:inline-block; width:10px; height:10px; border-radius:3px; background:var(--band); margin-right:-6px; }
.ft__legend i.is-good { background:rgba(62,124,89,.4); } .ft__legend i.is-care { background:rgba(179,58,50,.35); }
.ft__acts { margin:10px 0 0; padding-left:1.1em; display:grid; gap:6px; font-size:14.5px; line-height:1.7; }
.ft__days { display:flex; gap:8px; flex-wrap:wrap; padding-top:8px; }
.ft__day { display:grid; justify-items:center; gap:2px; min-width:72px; padding:8px 10px; border-radius:8px; font-size:13px; border:1px solid var(--rule); }
.ft__day em { font-style:normal; font-size:11px; color:var(--muted); font-family:var(--serif); }
.ft__day.is-good { background:rgba(62,124,89,.1); border-color:rgba(62,124,89,.35); }
.ft__day.is-care { background:rgba(179,58,50,.08); border-color:rgba(179,58,50,.3); }
.ft__none { font-size:13px; color:var(--faint); }
.ft__peek { margin-top:14px; }
.ft__basis { font-size:11.5px; color:var(--faint); line-height:1.7; padding-top:14px; max-width:52rem; }
.ft__basis--in { padding-top:10px; }
.ft__link { display:inline-block; font-size:13px; font-weight:600; border-bottom:1px solid var(--ink); margin-top:10px; }
.ft__links { display:flex; flex-direction:column; gap:6px; padding-top:10px; font-size:13.5px; }
.ft__links a { border-bottom:1px solid var(--rule); align-self:flex-start; }
.ft__status { max-width:52rem; margin:18px auto 0; }
.ft__chips { display:flex; gap:8px; flex-wrap:wrap; padding-top:12px; }
.ft__chips label { cursor:pointer; }
.ft__chips input { position:absolute; opacity:0; pointer-events:none; }
.ft__chips span { display:inline-block; font-size:13.5px; padding:8px 16px; border:1.5px solid var(--rule); border-radius:999px; }
.ft__chips input:checked + span { background:var(--ink); color:var(--paper); border-color:var(--ink); }
.ft__chips input:focus-visible + span { outline:2px solid var(--accent); outline-offset:2px; }
.ft__reco { display:flex; gap:10px; align-items:flex-start; font-size:13px; color:var(--muted); line-height:1.6; padding-top:14px; }
.ft__reco input { margin-top:4px; }
.ft__reco b { color:var(--ink); }
.ft__formbtns { justify-content:flex-start; padding-top:14px; }
@media (min-width:1024px) { .ft__hero { padding:36px 30px; } }
.ft__art { max-width:44rem; margin:20px auto 0; aspect-ratio:16/7; border-radius:8px; background:var(--bg) center / cover no-repeat; }
@media (min-width:1024px) { .ft__art { max-width:64rem; aspect-ratio:21/6; } }


/* ══ 메달 보드: 히든 메달 크게 ══ */
.hd { margin:26px var(--gutter) 0; padding:24px 18px 26px; border-radius:12px; background:#fbf7ec; border:1px solid #e6d6ad; }
.hd__head { text-align:center; }
.hd__k { font-size:11px; letter-spacing:.3em; color:#a8873a; }
.hd__head h2 { font-family:var(--serif); font-size:24px; font-weight:600; padding-top:4px; }
.hd__count { font-size:13px; color:var(--muted); padding-top:4px; }
.hd__count b { font-family:var(--serif); font-size:22px; color:var(--ink); }
.hd__d { font-size:12.5px; color:var(--muted); padding-top:6px; }
.hd__grid { display:grid; grid-template-columns:repeat(2,minmax(0,1fr)); gap:12px; padding-top:20px; }
@media (min-width:760px) { .hd__grid { grid-template-columns:repeat(3,minmax(0,1fr)); } }
@media (min-width:1024px) { .hd__grid { grid-template-columns:repeat(4,minmax(0,1fr)); gap:16px; } .hd { padding:32px 28px; } }
.hd__card { display:flex; flex-direction:column; align-items:center; text-align:center; gap:8px; padding:20px 12px 18px;
  background:var(--paper); border:1px solid #efe4c8; border-radius:10px; }
.hd__card h3 { font-family:var(--serif); font-size:17px; font-weight:600; padding-top:4px; }
.hd__card:not(.is-on) { background:rgba(255,255,255,.5); border-style:dashed; }
.hd__card:not(.is-on) h3 { color:#c9bfa6; letter-spacing:.2em; }
.hd__card .medal--xl { width:112px; height:112px; font-size:40px; }
.hd__line { font-size:13.5px; font-weight:600; line-height:1.5; }
.hd__body { font-size:12px; color:var(--muted); line-height:1.65; }
.hd__card form { margin:4px 0 0; }
.hd__share { font:inherit; font-size:12.5px; font-weight:600; padding:6px 16px; border-radius:999px; border:1.5px solid var(--ink); background:var(--paper); cursor:pointer; }
@media (max-width:420px) { .hd__card .medal--xl { width:88px; height:88px; font-size:32px; } .hd__body { display:none; } }

/* ══ 상단·하단 메뉴 ══
   메뉴가 11개라 휴대폰에서 두세 줄로 넘어가던 문제. 휴대폰은 하단 탭바 다섯 개(오늘·유형테스트·밸런스게임·운세·마이),
   오늘·추천 화면에서는 위쪽 칩(전체·여행·패션·영화·드라마). 데스크톱은 전체 한 줄. */
.masthead__nav { display:none; }
.subnav { display:flex; justify-content:center; gap:4px; padding:14px 0 12px; overflow-x:auto; scrollbar-width:none; }
.subnav::-webkit-scrollbar { display:none; }
.subnav a { flex:none; font-size:13.5px; padding:6px 13px; border-radius:999px; color:var(--muted); white-space:nowrap; }
.subnav a[aria-current="page"] { background:var(--ink); color:var(--paper); }
.masthead { padding-bottom:10px; }
.tabbar { position:fixed; left:0; right:0; bottom:0; z-index:60; display:grid; grid-template-columns:repeat(5,minmax(0,1fr));
  background:rgba(255,255,255,.96); border-top:1px solid var(--rule);
  padding:6px 4px calc(6px + env(safe-area-inset-bottom, 0px)); -webkit-backdrop-filter:blur(8px); backdrop-filter:blur(8px); }
.tabbar a { display:flex; flex-direction:column; align-items:center; gap:2px; padding:4px 0; color:var(--faint); font-size:10.5px; letter-spacing:-.02em; white-space:nowrap; }
.tabbar a.is-on { color:var(--ink); font-weight:700; }
.tabbar a.is-on svg { stroke-width:2.1; }
body { padding-bottom:calc(64px + env(safe-area-inset-bottom, 0px)); }
@media (min-width:760px) {
  .tabbar, .subnav { display:none; }
  .masthead__nav { display:flex; }
  .masthead { padding-bottom:0; }
  body { padding-bottom:0; }
}

/* ── 메달 보드: 섹션 머리(사주·성향 / 유형테스트 / 밸런스게임) ── */
.bsec { text-align:center; padding:40px var(--gutter) 4px; }
.bsec__k { font-size:11px; letter-spacing:.3em; color:var(--muted); }
.bsec h2 { font-family:var(--serif); font-size:24px; font-weight:600; padding-top:4px; }
.bsec__n { font-size:13px; color:var(--muted); padding-top:4px; }
.bsec__n b { font-family:var(--serif); font-size:20px; color:var(--ink); }
.bsec__n a { margin-left:10px; font-size:12px; border-bottom:1px solid var(--rule); color:var(--ink); }
.bsec-wrap { border-top:2px solid var(--ink); margin:36px var(--gutter) 0; }
.hd { margin-top:40px; }
.bsec-wrap .bsec { padding-inline:0; padding-top:28px; }
.bsec-wrap .bd__col { margin-inline:0; }
.bd__ct { font-size:18px; font-weight:700; letter-spacing:-.02em; }

/* 사주·성향 메달 두 장 */
.pf { padding:0 var(--gutter); }
.pf .bsec { padding-inline:0; padding-top:28px; }
.pf__grid { display:grid; grid-template-columns:repeat(2,minmax(0,1fr)); gap:12px; padding-top:16px; }
.pf__card { display:flex; flex-direction:column; align-items:center; text-align:center; gap:6px; padding:22px 12px 18px;
  background:var(--paper); border:1px solid var(--rule); border-radius:10px; }
.pf__card:not(.is-on) { border-style:dashed; }
.pf__card .medal--xl { width:112px; height:112px; font-size:30px; letter-spacing:-.02em; }
.pf__k { font-size:11.5px; color:var(--muted); padding-top:6px; }
.pf__card h3 { font-family:var(--serif); font-size:17px; font-weight:600; }
.pf__card:not(.is-on) h3 { color:var(--faint); }
.pf__line { font-size:13px; line-height:1.5; }
.pf__go { font-size:12px; line-height:1.5; color:var(--ink); border-bottom:1px solid var(--rule); }
@media (min-width:760px) { .pf__grid { max-width:640px; margin:0 auto; gap:16px; } }

/* ── 공유 버튼(테스트 링크) · 알림 ── */
.tcard-wrap { position:relative; }
.sharebtn { display:inline-flex; align-items:center; gap:4px; font:inherit; font-size:12px; font-weight:600; color:var(--ink);
  background:var(--paper); border:1px solid var(--rule); border-radius:999px; padding:5px 10px; cursor:pointer; }
.sharebtn:hover { border-color:var(--ink); }
.sharebtn--card { position:absolute; top:8px; right:8px; z-index:3; padding:6px; border:0; background:rgba(255,255,255,.92);
  box-shadow:0 1px 4px rgba(0,0,0,.12); }
.sharebtn--card span { position:absolute; width:1px; height:1px; overflow:hidden; clip:rect(0 0 0 0); }
.sharebtn--mini { padding:2px 8px; font-size:11px; margin-left:6px; vertical-align:middle; }
.sharebtn--line { padding:8px 16px; font-size:13px; }
.psy__acts--share { justify-content:center; }
.prog__title { display:inline-flex; align-items:center; }
.psy__go--sub { background:transparent; color:var(--ink); border:1px solid var(--ink); margin-top:8px; }
.toast { position:fixed; left:50%; bottom:calc(84px + env(safe-area-inset-bottom,0px)); transform:translate(-50%,12px); z-index:90;
  background:var(--ink); color:var(--paper); font-size:13px; padding:10px 16px; border-radius:999px; opacity:0; pointer-events:none; transition:opacity .2s, transform .2s; }
.toast.is-on { opacity:1; transform:translate(-50%,0); }
@media (min-width:760px) { .toast { bottom:32px; } }

/* ── 메달 보드: 받은 메달 설명 ── */
.bd__desc { font-size:12px; line-height:1.5; color:var(--muted); display:-webkit-box; -webkit-line-clamp:2; -webkit-box-orient:vertical; overflow:hidden; padding-top:2px; }
.bd__cdesc { font-size:12.5px; color:var(--muted); padding-top:2px; }
.bd__t { align-items:flex-start; }
.bd__t > a { align-items:flex-start; }

/* ── 여행 사진 크게 보기(화면 안 팝업) ── */
body.lb-open { overflow:hidden; }
.lb { position:fixed; inset:0; z-index:100; display:flex; align-items:center; justify-content:center; background:rgba(20,18,15,.88); padding:56px 12px; }
.lb[hidden] { display:none; }
.lb__fig { margin:0; display:flex; flex-direction:column; align-items:center; gap:10px; max-width:min(1100px,100%); max-height:100%; }
.lb__img { max-width:100%; max-height:calc(100vh - 150px); object-fit:contain; border-radius:6px; background:#222; width:auto; height:auto; }
.lb__cap { font-size:12px; color:rgba(255,255,255,.75); }
.lb__x, .lb__nav { position:absolute; display:grid; place-items:center; border:0; cursor:pointer; color:#fff; background:rgba(255,255,255,.12); border-radius:999px; }
.lb__x { top:12px; right:12px; width:42px; height:42px; }
.lb__nav { top:50%; transform:translateY(-50%); width:44px; height:44px; }
.lb__prev { left:10px; } .lb__next { right:10px; }
.lb__x:hover, .lb__nav:hover { background:rgba(255,255,255,.24); }
@media (max-width:759px) { .lb__nav { top:auto; bottom:14px; transform:none; } .lb__prev { left:calc(50% - 56px); } .lb__next { right:calc(50% - 56px); } }
.sharesheet { position:fixed; inset:0; z-index:95; display:none; align-items:flex-end; justify-content:center; background:rgba(20,18,15,.45); padding:16px; }
.sharesheet.is-on { display:flex; }
.sharesheet__box { width:100%; max-width:420px; background:var(--paper); border-radius:14px; padding:18px 16px 14px; margin-bottom:calc(64px + env(safe-area-inset-bottom,0px)); }
.sharesheet__t { font-size:14px; font-weight:700; padding-bottom:10px; }
.sharesheet__in { width:100%; font:inherit; font-size:13px; padding:10px 12px; border:1px solid var(--rule); border-radius:8px; background:#fff; color:var(--ink); }
.sharesheet__acts { display:flex; gap:8px; padding-top:10px; }
.sharesheet__acts button { flex:1; font:inherit; font-size:13px; font-weight:600; padding:10px 0; border-radius:999px; cursor:pointer; border:1px solid var(--ink); background:transparent; color:var(--ink); }
.sharesheet__copy { background:var(--ink) !important; color:var(--paper) !important; }
@media (min-width:760px) { .sharesheet { align-items:center; } .sharesheet__box { margin-bottom:0; } }

/* ══ 브랜드 문구 ═════════════════════════════════════════════ */
.masthead__tag { font-size:11.5px; letter-spacing:.14em; color:var(--muted); padding-top:8px; }
.foot__tag { font-size:12px; letter-spacing:.12em; color:var(--muted); padding-top:6px; }
.brand { margin:56px var(--gutter) 0; padding:36px 20px 32px; text-align:center; background:var(--band); border-radius:14px; }
.brand__els { font-family:var(--serif); font-size:22px; font-weight:600; letter-spacing:.5em; padding-left:.5em; }
.brand__t { font-family:var(--serif); font-weight:600; font-size:clamp(19px,4.8vw,24px); line-height:1.55; padding-top:14px; }
.brand__b { font-size:14px; line-height:1.85; color:#444; max-width:30rem; margin:14px auto 0; }
.brand__go { display:inline-block; margin-top:18px; font-size:13px; font-weight:600; border-bottom:1px solid var(--ink); padding-bottom:2px; }
.brand + .join { margin-top:32px; }

.about { max-width:44rem; margin:0 auto; padding:0 var(--gutter) 24px; }
.about__hero { text-align:center; padding:40px 0 24px; }
.about__k { font-size:11px; letter-spacing:.3em; color:var(--muted); }
.about__t { font-family:var(--serif); font-weight:600; font-size:clamp(22px,5.6vw,32px); line-height:1.5; padding-top:10px; }
.about__els { font-family:var(--serif); font-size:clamp(26px,7vw,36px); font-weight:600; letter-spacing:.45em; padding:22px 0 0 .45em; }
.about__sec { border-top:1px solid var(--rule); padding:30px 0 6px; }
.about__sec h2 { font-family:var(--serif); font-size:20px; font-weight:600; padding-bottom:12px; }
.about__sec p { font-size:15px; line-height:1.9; color:#333; padding-bottom:12px; word-break:keep-all; }
.about__two { display:grid; gap:12px; margin:6px 0 16px; }
@media (min-width:640px) { .about__two { grid-template-columns:1fr 1fr; } }
.about__two > div { background:var(--band); border-radius:12px; padding:18px 18px 8px; }
.about__two h3 { font-family:var(--serif); font-size:18px; font-weight:600; padding:2px 0 6px; }
.about__n { font-size:11px !important; letter-spacing:.2em; color:var(--muted) !important; padding:0 !important; }
.about__quote { font-family:var(--serif); font-size:17px !important; text-align:center; padding:14px 0 18px !important; color:var(--ink) !important; }
.about__en p { font-size:14px; color:#555; }
.about__go { text-align:center; padding:28px 0 8px; }
.about__sub { display:inline-block; margin-top:14px; font-size:13px; border-bottom:1px solid var(--rule); }

/* ══ 움직임 ══════════════════════════════════════════════════
   html.motion 일 때만(head 의 한 줄 스크립트, 움직임 줄이기 설정이면 안 붙음).
   과하지 않게: 투명도 + 14px 떠오르기, 0.7초. */
@keyframes ohFadeUp { from { opacity:0; transform:translateY(12px); } to { opacity:1; transform:none; } }
@keyframes ohFade { from { opacity:0; } to { opacity:1; } }
@keyframes ohWord { from { opacity:0; letter-spacing:.42em; } to { opacity:1; letter-spacing:.2em; } }

html.motion .rv { opacity:0; transform:translateY(14px);
  transition:opacity .7s cubic-bezier(.2,.7,.2,1) var(--rv-d,0ms), transform .7s cubic-bezier(.2,.7,.2,1) var(--rv-d,0ms); }
html.motion .rv.is-in { opacity:1; transform:none; }

/* 첫 화면: 워드마크가 모이며 나타나고, 오늘의 일진이 차례로 */
html.motion .masthead__wordmark { animation:ohWord 1.1s cubic-bezier(.2,.7,.2,1) both; }
html.motion .masthead__tag { animation:ohFade 1s ease .45s both; }
html.motion main { animation:ohFade .45s ease both; }
html.motion .today > * { animation:ohFadeUp .8s cubic-bezier(.2,.7,.2,1) both; }
html.motion .today > :nth-child(1) { animation-delay:.15s; }
html.motion .today > :nth-child(2) { animation-delay:.3s; }
html.motion .today > :nth-child(3) { animation-delay:.45s; }
html.motion .today > :nth-child(4) { animation-delay:.55s; }
html.motion .today > :nth-child(5) { animation-delay:.65s; }
html.motion .today > :nth-child(n+6) { animation-delay:.75s; }
html.motion .today__gz span { display:inline-block; animation:ohFadeUp 1s cubic-bezier(.2,.7,.2,1) both; }
html.motion .today__gz span:nth-child(1) { animation-delay:.35s; }
html.motion .today__gz span:nth-child(2) { animation-delay:.6s; }

/* 오행 글자는 들어올 때 한 자씩 */
html.motion .rv .brand__els span, html.motion .rv .about__els span { display:inline-block; opacity:0; transform:translateY(8px);
  transition:opacity .6s ease, transform .6s ease; }
html.motion .rv.is-in .brand__els span, html.motion .rv.is-in .about__els span { opacity:1; transform:none; }
html.motion .rv.is-in .brand__els span:nth-child(2), html.motion .rv.is-in .about__els span:nth-child(2) { transition-delay:.12s; }
html.motion .rv.is-in .brand__els span:nth-child(3), html.motion .rv.is-in .about__els span:nth-child(3) { transition-delay:.24s; }
html.motion .rv.is-in .brand__els span:nth-child(4), html.motion .rv.is-in .about__els span:nth-child(4) { transition-delay:.36s; }
html.motion .rv.is-in .brand__els span:nth-child(5), html.motion .rv.is-in .about__els span:nth-child(5) { transition-delay:.48s; }

/* 카드 그림은 손을 대면 천천히 */
.row .media { overflow:hidden; }
.tcard .media img, .row .media img { transition:transform .6s cubic-bezier(.2,.7,.2,1); }
@media (hover:hover) { .tcard:hover .media img, .row a:hover .media img { transform:scale(1.035); } }

/* 페이지 사이 이동도 부드럽게(지원하는 브라우저만. 나머지는 그냥 넘어갑니다) */
@view-transition { navigation:auto; }
::view-transition-old(root), ::view-transition-new(root) { animation-duration:.28s; }
@media (prefers-reduced-motion:reduce) { @view-transition { navigation:none; } }

/* ══ 이미지가 없을 때 ══════════════════════════════════════════
   회색 바탕 가운데 OHENA 를 옅게. 다른 그림으로 채우지 않습니다(실제와 다른 것이 나가면 안 됨).
   공유 미리보기 기본 그림(static/img/og.jpg)도 같은 모양입니다. */
.media__none { display:flex; align-items:center; justify-content:center; width:100%; height:100%;
  background:#ecebe7; color:rgba(17,17,17,.13);
  font-family:var(--serif); font-weight:600; font-size:clamp(14px, 4.2vw, 22px); letter-spacing:.28em; padding-left:.28em;
  user-select:none; }
.media--poster .media__none { font-size:clamp(13px, 3.6vw, 19px); }
.media__none--hero { position:absolute; inset:0; font-size:clamp(28px, 8vw, 56px); z-index:0; }

/* ══ 휴대폰: 상단 고정 ══════════════════════════════════════════
   내려가도 로고와 여행·패션·영화·드라마 칩이 위에 남습니다. 바탕은 반투명 + 흐림이라 뒤 내용이 살짝 비칩니다.
   조금 내려가면(html.is-scrolled, js/header.js) 로고가 작아지고 태그라인이 접혀 자리를 덜 차지합니다.
   흐림(backdrop-filter)은 ::before 에 겁니다. 헤더 자체에 걸면 안에 있는 하단 탭바(position:fixed)가 헤더 기준으로 붙어 버립니다. */
@media (max-width:759px) {
  .masthead { position:sticky; top:0; z-index:50; padding:14px var(--gutter) 4px; transition:padding .25s ease; }
  .masthead::before { content:""; position:absolute; inset:0; z-index:-1; pointer-events:none;
    background:rgba(255,255,255,.74); -webkit-backdrop-filter:saturate(1.5) blur(14px); backdrop-filter:saturate(1.5) blur(14px);
    border-bottom:1px solid transparent; transition:background .25s ease, border-color .25s ease; }
  .masthead__wordmark { transition:font-size .25s ease, letter-spacing .25s ease; }
  .masthead__tag { max-height:28px; overflow:hidden; transition:opacity .2s ease, max-height .25s ease, padding .25s ease; }
  .subnav { padding:10px 0 6px; transition:padding .25s ease; }

  html.is-scrolled .masthead { padding-top:8px; padding-bottom:2px; }
  html.is-scrolled .masthead::before { background:rgba(255,255,255,.66); border-bottom-color:rgba(0,0,0,.06); }
  html.is-scrolled .masthead__wordmark { font-size:19px; }
  html.is-scrolled .masthead__tag { opacity:0; max-height:0; padding-top:0; }
  html.is-scrolled .subnav { padding:6px 0 4px; }
  html.is-scrolled .subnav a { padding-block:4px; }
}
@supports not ((backdrop-filter:blur(1px)) or (-webkit-backdrop-filter:blur(1px))) {
  @media (max-width:759px) { .masthead::before { background:rgba(255,255,255,.95); } }
}

/* ══ 가로 넘침 막기 ══
   장식 요소가 화면 밖으로 조금만 나가도 휴대폰은 페이지 전체를 축소해 버립니다(하단바·상단 고정까지 어긋남).
   overflow-x:clip 은 hidden 과 달리 스크롤 영역을 만들지 않아 상단 고정(sticky)이 그대로 동작합니다. */
html, body { overflow-x:clip; }