/* ===========================================================
   TYYNI — Wellness Curator
   brand stylesheet
   =========================================================== */

:root{
  --white:      #FFFFFF;   /* page ground */
  --paper:      #FFFFFF;   /* cards, character fill */
  --tint:       #F6F6F4;   /* alternating bands */
  --ink:        #1A1A1A;
  --ink-soft:   #52504C;
  --muted:      #8E8D89;
  --line:       #E6E5E1;
  /* 고정 헤더 높이 — main 상단 여백·히어로 음수 마진과 짝을 맞춘다.
     실제 높이(가장 높은 자식인 '시작하기' 43px + 위아래 패딩)와 같아야
     본문이 헤더 밑에 깔리거나 빈 띠가 생기지 않는다 */
  --nav-h:      72px;

  /* tone 1 — 블루 : 브랜드 · 티니 · 링크 */
  --blue:       #5C87C4;
  --blue-deep:  #3F69A6;
  --blue-soft:  #DCE6F5;
  --blue-mist:  #EFF4FB;

  /* tone 2 — 초록 : 사람의 흔적 · 선택 · 지금 */
  --green:      #57B98A;   /* 채움 · 아이콘 액센트 */
  --green-deep: #1E7A55;   /* 흰 배경 위 글자용 (대비 5.4:1) */
  --green-soft: #D5EFE1;
  --green-mist: #EDF8F2;
  --green-ink:  #0E3A27;   /* 초록 채움 위에 얹는 글자 */

  --lift: 0 1px 2px rgba(26,26,26,.035), 0 10px 28px -22px rgba(26,26,26,.28);
  --paw:url('data:image/svg+xml;utf8,%3Csvg%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20viewBox%3D%220%200%2017%2017%22%3E%3Cellipse%20cx%3D%229%22%20cy%3D%2212.4%22%20rx%3D%224.6%22%20ry%3D%223.9%22%20fill%3D%22%23000%22%2F%3E%3Cellipse%20cx%3D%223.6%22%20cy%3D%227.4%22%20rx%3D%222.1%22%20ry%3D%222.5%22%20fill%3D%22%23000%22%2F%3E%3Cellipse%20cx%3D%228.2%22%20cy%3D%224.6%22%20rx%3D%222.1%22%20ry%3D%222.6%22%20fill%3D%22%23000%22%2F%3E%3Cellipse%20cx%3D%2213.2%22%20cy%3D%226.4%22%20rx%3D%222.1%22%20ry%3D%222.5%22%20fill%3D%22%23000%22%2F%3E%3C%2Fsvg%3E');
  --rule:url('data:image/svg+xml;utf8,%3Csvg%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20viewBox%3D%220%200%20116%209%22%3E%3Cpath%20d%3D%22M0%204.4%20C11%201.4%2022%207.2%2033%204.6%20C44%202%2055%207.4%2066%204.8%20C77%202.2%2088%207%2099%204.4%20C106%202.8%20111%204%20116%204.6%22%20fill%3D%22none%22%20stroke%3D%22%23D6D5D0%22%20stroke-width%3D%221.9%22%20stroke-linecap%3D%22round%22%2F%3E%3C%2Fsvg%3E');
  --uline:url('data:image/svg+xml;utf8,%3Csvg%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20viewBox%3D%220%200%2064%206%22%3E%3Cpath%20d%3D%22M1%204.2%20C11%201.9%2021%205.3%2032%203.4%20C43%201.5%2053%204.6%2063%202.8%22%20fill%3D%22none%22%20stroke%3D%22currentColor%22%20stroke-width%3D%222%22%20stroke-linecap%3D%22round%22%2F%3E%3C%2Fsvg%3E');

  --r-sm: 14px;
  --r-md: 22px;
  --r-lg: 34px;

  --wrap: 1120px;
  --ease: cubic-bezier(.22,.68,.28,1);

  --kr: "Pretendard Variable", Pretendard, -apple-system, BlinkMacSystemFont,
        "Apple SD Gothic Neo", "Malgun Gothic", system-ui, sans-serif;
  --en: "Outfit", var(--kr);
  --mark: "Baloo 2", var(--kr);
}

*,*::before,*::after{ box-sizing:border-box; }

/* overflow-x는 body가 아니라 html에 둔다 — body에 두면 iOS 사파리에서
   position:fixed 헤더가 스크롤에 안 붙박이고 같이 흘러가버리는 버그가 있다 */
html{ scroll-behavior:smooth; scroll-padding-top:96px; overflow-x:hidden; }

body{
  margin:0;
  background:var(--white);
  color:var(--ink);
  font-family:var(--kr);
  font-size:17px;
  line-height:1.75;
  letter-spacing:-0.01em;
  -webkit-font-smoothing:antialiased;
  word-break:keep-all;
}

/* 헤더가 fixed 라 뜨는 만큼, 본문이 그 밑에서 시작하게 비워둔다 */
main{ padding-top:var(--nav-h); }

/* paper grain over everything */
body::after{
  content:"";
  position:fixed; inset:0; z-index:9999;
  pointer-events:none;
  opacity:.34;
  mix-blend-mode:multiply;
  background-image:url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='180' height='180'><filter id='n'><feTurbulence type='fractalNoise' baseFrequency='0.85' numOctaves='3' stitchTiles='stitch'/><feColorMatrix type='saturate' values='0'/></filter><rect width='180' height='180' filter='url(%23n)' opacity='0.32'/></svg>");
}

img,svg{ max-width:100%; }
.sprite{ position:absolute; width:0; height:0; overflow:hidden; }

.sr-only{
  position:absolute; width:1px; height:1px; padding:0; margin:-1px;
  overflow:hidden; clip:rect(0 0 0 0); white-space:nowrap; border:0;
}

.wrap{ width:min(var(--wrap), 100% - 48px); margin-inline:auto; }

/* ----------------------------------------------------------
   character drawing rules
   ---------------------------------------------------------- */
.ink{ fill:var(--paper); stroke:var(--ink); stroke-width:5; stroke-linejoin:round; }
.pap{ fill:var(--paper); stroke:none; }
.pap-out{ fill:var(--paper); stroke:var(--ink); stroke-width:4; }
.eye{ fill:var(--ink); }
.glint{ fill:var(--paper); }
.line{ fill:none; stroke:var(--ink); stroke-width:3.6; stroke-linecap:round; }
.inkline{ fill:none; stroke:var(--ink); stroke-width:3.6; stroke-linecap:round; }
.blue{ fill:var(--blue); stroke:none; }
.accent{ fill:var(--green); stroke:none; }
.accentline{ fill:none; stroke:var(--green); stroke-width:3.4; stroke-linecap:round; }
.accentline-thick{ fill:none; stroke:var(--green); stroke-width:5.5; stroke-linecap:round; }
.blueline{ fill:none; stroke:var(--blue); stroke-width:3.4; stroke-linecap:round; }
.blueline-thick{ fill:none; stroke:var(--blue); stroke-width:5.5; stroke-linecap:round; }
.paperline{ fill:none; stroke:var(--paper); stroke-width:3; stroke-linecap:round; }
.paperdash{ fill:none; stroke:var(--paper); stroke-width:2.4; stroke-linecap:round; stroke-dasharray:7 7; }
.paperfill{ fill:var(--paper); stroke:none; }
.blue-dot{ fill:none; stroke:var(--blue); stroke-width:4; stroke-linecap:round; stroke-dasharray:1 7; }
.blue-beads{ fill:none; stroke:var(--blue); stroke-width:9; stroke-linecap:round; stroke-dasharray:2 13; }

.tyyni{ display:block; width:100%; height:auto; overflow:visible; }

/* UI icons — 블루 선 + 코랄 액센트 */
.icon{ display:block; width:100%; height:100%; overflow:visible; }
.icon > use{
  fill:none; stroke:var(--blue);
  stroke-width:2.1; stroke-linecap:round; stroke-linejoin:round;
}
.ic-fill{ fill:var(--green); stroke:none; }

/* ----------------------------------------------------------
   type
   ---------------------------------------------------------- */

.h2{
  font-size:clamp(30px, 4.6vw, 52px);
  line-height:1.28;
  font-weight:700;
  letter-spacing:-0.035em;
  margin:0 0 18px;
}
.h2--mark .lower{
  font-family:var(--mark);
  font-weight:800;
  font-size:clamp(44px, 8vw, 88px);
  color:var(--blue);
  letter-spacing:-0.01em;
  display:inline-block;
  transform:rotate(-1.2deg);
}
.h2--big{ font-size:clamp(36px, 6vw, 68px); letter-spacing:-.045em; font-weight:800; }
.h3{ font-size:clamp(21px,2.6vw,28px); font-weight:700; letter-spacing:-0.03em; margin:0 0 14px; }

.lede{
  font-size:clamp(16px,1.6vw,18.5px);
  color:var(--ink-soft);
  max-width:44ch;
  margin:0 0 48px;
}

.section{ padding:clamp(92px,13vw,170px) 0; position:relative; }

/* 섹션 사이 물결 — 배경색이 같아도 구분이 된다 */
.section::before,
.foot::before{
  content:"";
  position:absolute; left:0; right:0; top:0;
  height:16px;
  background-image:url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='96' height='16'><path d='M0 11 Q12 2 24 11 T48 11 T72 11 T96 11' fill='none' stroke='%23BFD3E9' stroke-width='2.4' stroke-linecap='round'/></svg>");
  background-repeat:repeat-x;
  background-position:left center;
  pointer-events:none;
}
.section::after{
  content:"";
  position:absolute; left:0; right:0; bottom:0;
  height:16px;
  background-image:url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='96' height='16'><path d='M0 11 Q12 2 24 11 T48 11 T72 11 T96 11' fill='none' stroke='%23BFD3E9' stroke-width='2.4' stroke-linecap='round'/></svg>");
  background-repeat:repeat-x;
  background-position:left center;
  transform:scaleY(-1);
  pointer-events:none;
  opacity:0;
}
/* 마지막 섹션 아래쪽에도 하나 */
.section:last-of-type::after{ opacity:1; }
.foot{ position:relative; }

/* ----------------------------------------------------------
   wordmark
   ---------------------------------------------------------- */
.wordmark{
  position:relative;
  display:inline-flex; align-items:flex-end;
  font-family:var(--mark);
  font-weight:800;
  font-size:64px;
  line-height:.92;
  color:var(--blue);
  letter-spacing:-0.03em;
  padding-right:.34em;
}
.wordmark i{ font-style:normal; display:inline-block; }
.wordmark i:nth-child(1){ transform:rotate(-4deg)   translateY(-1px); }
.wordmark i:nth-child(2){ transform:rotate(3deg)    translateY(2px);  }
.wordmark i:nth-child(3){ transform:rotate(-2deg)   translateY(-1px); }
.wordmark i:nth-child(4){ transform:rotate(4deg)    translateY(1px);  }
.wordmark i:nth-child(5){ transform:rotate(-3deg); margin-left:.03em; }
.wordmark__star{
  position:absolute;
  width:.52em; height:.52em;
  right:-.02em; top:-.30em;
  overflow:visible;
}
.wordmark--sm{ font-size:34px; }

/* ----------------------------------------------------------
   nav
   ---------------------------------------------------------- */
.nav{
  position:fixed; top:0; left:0; right:0; z-index:80;
  display:flex; align-items:center; gap:28px;
  width:100%;
  /* main 의 위 여백(--nav-h)과 히어로의 음수 마진이 이 높이에 맞춰져 있다.
     내용이 더 높아지면 본문이 헤더 밑에 깔리므로 높이를 여기서 못박는다 */
  min-height:var(--nav-h);
  padding:14px clamp(20px,4vw,44px);
  background:color-mix(in srgb, var(--white) 82%, transparent);
  backdrop-filter:blur(12px);
  border-bottom:1px solid transparent;
  transition:border-color .3s var(--ease), padding .3s var(--ease), background-color .3s var(--ease);
}
.nav.is-stuck{ border-bottom-color:var(--line); padding-block:8px; }
.nav__brand{ display:flex; align-items:center; text-decoration:none; flex:0 0 auto; }
/* 이 칸은 로그인 상태에 따라 '시작하기' 또는 사람 아이콘을 담는다.
   inline 인 채로 두면 버튼 패딩이 칸 밖으로 새어 헤더 높이가 틀어진다 */
#navAcc{ display:flex; align-items:center; flex:0 0 auto; }
.nav__links{ display:flex; gap:26px; margin-left:auto; }
.nav__links a{
  font-size:14.5px; color:var(--ink-soft); text-decoration:none;
  padding:6px 0; position:relative; white-space:nowrap;
  transition:color .25s var(--ease);
}
.nav__links a::after{
  content:""; position:absolute; left:0; bottom:2px; height:1.5px; width:0;
  background:var(--blue); transition:width .3s var(--ease), background-color .25s var(--ease);
}
.nav__links a:hover{ color:var(--blue-deep); }
.nav__links a:hover::after{ width:100%; }
.nav__cta{
  flex:0 0 auto;
  font-size:14.5px; font-weight:600; text-decoration:none;
  color:var(--paper); background:var(--blue);
  padding:9px 20px; border-radius:999px;
  transition:background .25s var(--ease), transform .25s var(--ease), color .25s var(--ease);
}
.nav__cta:hover{ background:var(--blue-deep); transform:translateY(-1px); }
.nav__cta--menu{ display:none; }

/* --- 히어로 위: 투명 헤더 (스크롤하면 원래 모습으로) --- */
/* 히어로 이미지가 밝거나 복잡해도 글자가 읽히게, 옅은 그림자 스크림을 깐다.
   스크림을 헤더 박스 자체 배경으로 두면 헤더 높이에서 뚝 끊겨 경계선처럼
   보여서, 헤더보다 더 아래까지 내려가는 별도 레이어로 부드럽게 뺀다 */
.nav--hero{ background:transparent; backdrop-filter:none; border-bottom-color:transparent; }
.nav--hero::before{
  content:""; position:absolute; left:0; right:0; top:0; height:170%;
  background:linear-gradient(rgba(0,0,0,.32), rgba(0,0,0,.08) 55%, transparent);
  pointer-events:none; z-index:-1;
  transition:opacity .3s var(--ease);
}
.nav--hero .wordmark{ color:#fff; transition:color .3s var(--ease); text-shadow:0 1px 6px rgba(0,0,0,.35); }
.nav--hero .nav__links a{ color:rgba(255,255,255,.95); text-shadow:0 1px 6px rgba(0,0,0,.35); }
.nav--hero .nav__links a:hover{ color:#fff; }
.nav--hero .nav__links a::after{ background:#fff; }
.nav--hero .nav__burger{
  color:#fff;
  transition:color .3s var(--ease);
}
.nav--hero .nav__burger:hover{ color:rgba(255,255,255,.75); }
.nav--hero .nav__cta{
  background:var(--blue); color:var(--paper);
  box-shadow:0 2px 14px rgba(0,0,0,.18);
}
.nav--hero .nav__cta:hover{ background:var(--blue-deep); }
.nav--hero .nav__me{ color:#fff; transition:color .3s var(--ease); }
.nav--hero .nav__me:hover{ color:rgba(255,255,255,.75); }

.nav--hero.is-stuck{
  background:color-mix(in srgb, var(--white) 82%, transparent);
  backdrop-filter:blur(12px);
  border-bottom-color:var(--line);
}
.nav--hero.is-stuck::before{ opacity:0; }
.nav--hero.is-stuck .wordmark{ color:var(--blue); text-shadow:none; }
.nav--hero.is-stuck .nav__links a{ color:var(--ink-soft); text-shadow:none; }
.nav--hero.is-stuck .nav__links a:hover{ color:var(--blue-deep); }
.nav--hero.is-stuck .nav__links a::after{ background:var(--blue); }
.nav--hero.is-stuck .nav__burger{ color:var(--ink); }
.nav--hero.is-stuck .nav__cta{ background:var(--blue); color:var(--paper); box-shadow:none; }
.nav--hero.is-stuck .nav__cta:hover{ background:var(--blue-deep); }
.nav--hero.is-stuck .nav__me{ color:var(--ink); }
.nav__burger{
  display:none; flex:0 0 auto; align-items:center; justify-content:center;
  width:38px; height:38px; padding:0; border:none; background:none;
  color:var(--ink); font-size:19px; line-height:1; cursor:pointer;
  transition:color .2s var(--ease);
}
.nav__burger:hover{ color:var(--blue); }

/* ----------------------------------------------------------
   1. hero — 하늘과 풀밭, 그리고 모서리에서 튀어나오는 티니
   ---------------------------------------------------------- */
.hero{
  position:relative; overflow:hidden; isolation:isolate;
  margin-top:calc(var(--nav-h) * -1);
  min-height:100svh;
  display:grid; place-items:center;
  padding:clamp(30px,6vw,64px) 24px clamp(190px,24vw,260px);
  text-align:center;
}

/* --- 장면 --- */
.hero__bg{
  position:absolute; inset:0; z-index:-1; pointer-events:none;
  background:url("../img/hero_bg.png") center bottom / cover no-repeat;
}

/* --- 가운데 카피 --- */
.hero__inner{ width:min(880px,100%); position:relative; z-index:2; }
.hero__title{ margin:0 0 24px; }
.hero__title-imgs{
  display:flex; flex-wrap:wrap; align-items:center; justify-content:center;
}
.hero__title-img{ display:block; height:clamp(100px,14vw,230px); width:auto; max-width:88vw; }
.hero__title-img--1{ transform:rotate(-3deg) translateY(14px); position:relative; z-index:1; }
.hero__title-img--2{ transform:rotate(1deg) translateY(-10px); margin-left:clamp(-32px,-5vw,-50px); position:relative; z-index:2; }
@media (max-width:560px){
  .hero__title-imgs{ flex-direction:column; align-items:center; gap:8px; }
  .hero__title-img{ height:auto; width:54vw; max-width:220px; max-height:none; }
  .hero__title-img--1{ align-self:center; margin:0 10% 0 0; transform:rotate(-3deg); }
  .hero__title-img--2{ align-self:center; margin:0 0 0 10%; transform:rotate(1deg); }
}
.hero__sub{
  display:inline-block;
  font-family:"Jua", var(--kr);
  font-size:clamp(16.5px,2.1vw,20.5px);
  line-height:1.5; letter-spacing:-.01em;
  color:var(--ink); margin:0 auto 22px;
  padding:12px 22px;
  border-radius:999px;
  background:rgba(255,255,255,.72);
  backdrop-filter:blur(4px);
  box-shadow:0 4px 20px rgba(0,0,0,.06);
}
.scrollcue{
  display:inline-flex; align-items:center; gap:10px;
  font-size:15px; font-weight:600;
  color:var(--blue-deep); text-decoration:none;
  padding:10px 4px;
}
.scrollcue__arrow{ animation:bob 2s ease-in-out infinite; }
@keyframes bob{ 0%,100%{transform:translateY(0)} 50%{transform:translateY(5px)} }

.floaty{ animation:float 6.5s ease-in-out infinite; transform-origin:center; }
@keyframes float{
  0%,100%{ transform:translateY(0) rotate(0deg); }
  50%    { transform:translateY(-9px) rotate(-1deg); }
}
.twitch{ animation:twitch 3.4s ease-in-out infinite; transform-origin:center; }
@keyframes twitch{
  0%,86%,100%{ opacity:.25; transform:scale(.9); }
  90%        { opacity:1;  transform:scale(1.08); }
}

/* --- 모서리에서 슉 --- */
.peeks{ position:absolute; inset:0; z-index:3; pointer-events:none; }
.peek{
  position:absolute;
  display:flex; align-items:center; gap:14px;
  opacity:0;
  /* 사라질 땐 다른 동작 없이 페이드아웃만 — 자리(transform)는 완전히 투명해진 다음 조용히 되돌린다 */
  transition:opacity .4s ease, transform 0s linear .4s;
}
.peek__ty{ width:clamp(88px,11vw,124px); height:auto; overflow:visible; flex:0 0 auto; }

/* 대각선으로 스윽 들어오면서 살짝 기울어졌다 펴지는, 부끄러운 듯한 등장 */
/* 위쪽 두 개는 고정 헤더 밑으로 내려서 헤더와 안 겹치게 한다 */
.peek--bl{ left:clamp(10px,4vw,60px);  bottom:clamp(18px,3vw,40px); transform:translate(-58%,72%) rotate(-11deg); flex-direction:row-reverse; }
.peek--br{ right:clamp(10px,4vw,60px); bottom:clamp(18px,3vw,40px); transform:translate(58%,72%) rotate(11deg); }
.peek--tl{ left:clamp(10px,4vw,60px);  top:calc(var(--nav-h) + clamp(10px,2vw,26px)); transform:translate(-58%,-78%) rotate(11deg); flex-direction:row-reverse; }
.peek--tr{ right:clamp(10px,4vw,60px); top:calc(var(--nav-h) + clamp(10px,2vw,26px)); transform:translate(58%,-78%) rotate(-11deg); }
.peek.is-in{
  opacity:1; transform:translate(0,0) rotate(0deg);
  /* 나타날 땐 캐릭터가 먼저, 지연 없이 바로 자리 잡는다 */
  transition:transform 1s cubic-bezier(.16,1.05,.32,1), opacity .5s ease;
}

/* --- 말풍선: 캐릭터가 자리 잡은 다음에 열린다 --- */
.bubble{
  position:relative;
  max-width:min(52vw, 360px);
  background:var(--white);
  border:2px solid var(--ink);
  border-radius:20px;
  padding:13px 20px;
  font-size:clamp(14.5px,1.6vw,17px); font-weight:600;
  letter-spacing:-.03em; white-space:nowrap;
  box-shadow:0 6px 0 -1px rgba(26,26,26,.10);
  opacity:0;
  clip-path:inset(0 100% 0 0 round 20px);
  /* 사라질 땐 다른 동작 없이 페이드아웃만 — 모양(clip-path)은 완전히 투명해진 다음 조용히 되돌린다 */
  transition:opacity .4s ease, clip-path 0s linear .4s;
}
.peek--bl .bubble, .peek--tl .bubble{ clip-path:inset(0 100% 0 0 round 20px); }
.peek--br .bubble, .peek--tr .bubble{ clip-path:inset(0 0 0 100% round 20px); }
.peek.is-in .bubble{
  opacity:1;
  clip-path:inset(0 0 0 0 round 20px);
  /* 나타날 땐 캐릭터가 자리 잡을 때까지 기다렸다가 연다 */
  transition:clip-path .5s ease-out .8s, opacity .3s ease .8s;
}

/* 꼬리 */
.bubble::after{
  content:""; position:absolute; bottom:16px; width:0; height:0;
  border:9px solid transparent;
}
.peek--bl .bubble::after, .peek--tl .bubble::after{
  left:-18px; border-right-color:var(--ink);
}
.peek--br .bubble::after, .peek--tr .bubble::after{
  right:-18px; border-left-color:var(--ink);
}

/* 글자는 한쪽에서부터 그라데이션으로 배어 나온다 */
.bubble span{
  display:inline-block;
  -webkit-mask-image:linear-gradient(90deg,#000 38%,rgba(0,0,0,.35) 58%,transparent 76%);
          mask-image:linear-gradient(90deg,#000 38%,rgba(0,0,0,.35) 58%,transparent 76%);
  -webkit-mask-size:280% 100%; mask-size:280% 100%;
  -webkit-mask-position:100% 0; mask-position:100% 0;
  -webkit-mask-repeat:no-repeat; mask-repeat:no-repeat;
  transition:-webkit-mask-position .62s .12s ease-out, mask-position .62s .12s ease-out;
}
.peek--bl.is-in .bubble span, .peek--tl.is-in .bubble span{
  -webkit-mask-position:0 0; mask-position:0 0;
}
.peek--br .bubble span, .peek--tr .bubble span{
  -webkit-mask-image:linear-gradient(270deg,#000 38%,rgba(0,0,0,.35) 58%,transparent 76%);
          mask-image:linear-gradient(270deg,#000 38%,rgba(0,0,0,.35) 58%,transparent 76%);
  -webkit-mask-position:0 0; mask-position:0 0;
}
.peek--br.is-in .bubble span, .peek--tr.is-in .bubble span{
  -webkit-mask-position:100% 0; mask-position:100% 0;
}

@media (max-width:720px){
  .peek__ty{ width:84px; }
  .bubble{ font-size:13.5px; padding:11px 15px; white-space:normal; max-width:44vw; }
  .peek--bl,.peek--br{ bottom:2px; }
  /* 화면이 좁으면 헤더·타이틀을 가리니, 위쪽에서 튀어나오던 애들도 아래로 */
  .peek--tl{ top:auto; bottom:2px; transform:translate(-58%,72%) rotate(-11deg); }
  .peek--tr{ top:auto; bottom:2px; transform:translate(58%,72%) rotate(11deg); }
}

/* ----------------------------------------------------------
   2. 티티의 무물
   ---------------------------------------------------------- */
.ask{ background:var(--white); }

/* 무물 — 실제 인스타 스토리 그대로. 카드 프레임 없음 */
.ask{ padding-top:0; }
.story{
  position:relative;
  width:100vw; margin-inline:calc(50% - 50vw);
  min-height:clamp(560px, 78vh, 760px);
  display:flex; flex-direction:column; align-items:center;
  padding:clamp(26px,4vw,40px) 20px clamp(30px,4vw,46px);
  /* 하늘 — 광선 없이 납작하게 */
  background:
    radial-gradient(120% 26% at 22% 96%, rgba(255,255,255,.55) 0%, rgba(255,255,255,0) 70%),
    radial-gradient(100% 22% at 80% 88%, rgba(255,255,255,.42) 0%, rgba(255,255,255,0) 72%),
    linear-gradient(180deg, #8FBFEA 0%, #AFD2F0 38%, #D3E7F8 72%, #FFFFFF 100%);
}

/* 진행 바 */
.story__bars{
  display:flex; gap:4px;
  width:min(430px, 92%);
  margin-bottom:13px;
}
.mumul__bar{
  flex:1; height:3px; border-radius:2px;
  background:rgba(255,255,255,.5); overflow:hidden; cursor:pointer;
}
.mumul__bar i{ display:block; height:100%; width:0; background:#FFFFFF; border-radius:2px; }
.mumul__bar.is-done i{ width:100%; }
.mumul__bar.is-now i{ animation:barfill var(--dur,5s) linear forwards; }
@keyframes barfill{ from{ width:0; } to{ width:100%; } }

/* 계정 줄 */
.story__top{
  display:flex; align-items:center; gap:9px;
  width:min(430px, 92%);
  margin-bottom:clamp(30px,6vw,58px);
}
.story__ava{
  width:30px; height:30px; flex:0 0 auto;
  display:grid; place-items:center;
  background:rgba(255,255,255,.95);
  border-radius:50%;
}
.story__ava svg{ width:21px; height:21px; margin-top:2px; }
.story__who{
  font-size:13.5px; font-weight:700; letter-spacing:-.03em; color:#FFFFFF;
  text-shadow:0 1px 4px rgba(20,50,80,.3);
}
.story__ago{
  margin-left:auto;
  font-family:var(--en); font-size:11.5px; letter-spacing:.06em;
  color:rgba(255,255,255,.88);
  text-shadow:0 1px 4px rgba(20,50,80,.3);
}

/* 스토리 내용 — 스티커는 위, 답은 아래 */
.story__canvas{
  display:flex; flex-direction:column; align-items:center;
  width:min(430px, 92%);
  flex:1 1 auto;
  padding-top:clamp(6px,2vh,22px);
}

/* 질문 스티커 : 검정 라벨 바 + 흰 질문 박스 */
.qsticker{
  width:min(340px, 88%);
  border-radius:7px; overflow:hidden;
  box-shadow:0 6px 20px -10px rgba(20,40,70,.35);
}
.qsticker__from{
  margin:0; padding:11px 14px;
  background:#2B2B2B; color:rgba(255,255,255,.92);
  font-size:12px; font-weight:500; letter-spacing:-.02em; text-align:center;
}
.qsticker__q{
  margin:0; padding:20px 18px;
  background:#FFFFFF; color:#1A1A1A;
  font-size:clamp(14.5px,1.7vw,16px); font-weight:500;
  line-height:1.6; letter-spacing:-.03em; text-align:center;
}

/* 답 : 인스타 텍스트 배경 채우기 — 줄마다 검정 블록 */
.story__answer{
  margin:auto 0 0;
  text-align:center;
  font-size:clamp(15.5px,1.9vw,18px); font-weight:600;
  line-height:2.05; letter-spacing:-.03em;
}
.story__answer span{
  display:inline;
  background:rgba(22,22,24,.52); color:#FFFFFF;
  padding:5px 12px;
  border-radius:3px;
  -webkit-box-decoration-break:clone;
          box-decoration-break:clone;
}

.story__ty{ width:min(140px, 34%); margin:clamp(24px,4vw,42px) 0 auto; }
.story__ty svg, .story__ty .pose-img{ display:block; width:100%; height:auto; overflow:visible; }

/* 등장 */
.js-anim .story__canvas .qsticker__q,
.js-anim .story__canvas .story__answer span{
  -webkit-mask-image:linear-gradient(90deg,#000 40%,rgba(0,0,0,.4) 62%,transparent 80%);
          mask-image:linear-gradient(90deg,#000 40%,rgba(0,0,0,.4) 62%,transparent 80%);
  -webkit-mask-size:280% 100%; mask-size:280% 100%;
  -webkit-mask-repeat:no-repeat; mask-repeat:no-repeat;
  -webkit-mask-position:100% 0; mask-position:100% 0;
  transition:-webkit-mask-position .66s ease-out, mask-position .66s ease-out, opacity .3s ease;
}
.js-anim .story__canvas .story__answer{ opacity:0; transition:opacity .3s .3s ease; }
.js-anim .story__canvas .story__answer span{ transition-delay:.3s; }
.js-anim .story__canvas .story__ty{
  opacity:0; transform:translateY(12px);
  transition:opacity .4s .5s ease, transform .5s .5s cubic-bezier(.2,1.4,.4,1);
}
.js-anim .story__canvas.is-open .qsticker__q,
.js-anim .story__canvas.is-open .story__answer span{
  -webkit-mask-position:0 0; mask-position:0 0;
}
.js-anim .story__canvas.is-open .story__answer{ opacity:1; }
.js-anim .story__canvas.is-open .story__ty{ opacity:1; transform:none; }

/* 넘기기 */
.story__nav{ display:flex; align-items:center; justify-content:center; gap:12px; margin-top:18px; }
.mnav{
  width:36px; height:36px; border-radius:50%;
  border:0; background:rgba(255,255,255,.82);
  color:#3A4A5C; font-size:18px; line-height:1;
  cursor:pointer; transition:all .2s var(--ease);
  box-shadow:0 2px 8px -3px rgba(20,40,70,.3);
}
.mnav:hover{ background:#FFFFFF; color:var(--blue-deep); }

/* 카드 밖 물어보기 */
.qask{
  display:flex; gap:8px; flex-wrap:wrap;
  width:min(440px, 92%);
  margin:clamp(34px,5vw,52px) auto 0;
}
/* 아주 좁은 화면(320px)에서는 입력칸과 보내기 버튼이 한 줄에 못 들어간다.
   줄바꿈을 허용해 두면 이 줄이 부모를 넓혀 페이지가 가로로 밀리는 걸 막는다 */
.qask input{
  flex:1 1 200px; min-width:0;
  font-family:inherit; font-size:15px; color:var(--ink);
  background:var(--white);
  border:1.5px solid var(--line); border-radius:999px;
  padding:13px 20px;
  transition:border-color .25s var(--ease);
}
.qask input::placeholder{ color:var(--muted); }
.qask input:focus{ outline:none; border-color:var(--blue); }
.qask button{
  flex:0 0 auto;
  font-family:inherit; font-size:15px; font-weight:600;
  color:var(--paper); background:var(--blue);
  border:0; border-radius:999px; padding:13px 22px;
  cursor:pointer; transition:background .25s var(--ease);
}
.qask button:hover{ background:var(--blue-deep); }
.qask__hint{ text-align:center; font-size:13px; color:var(--muted); margin:12px 0 0; }
.qask__hint.is-ok{ color:var(--blue-deep); font-weight:500; }

@media (max-width:560px){
  .qsticker__q{ font-size:13.5px; }
  .story__answer{ font-size:14.5px; }
}

/* 물어보기 */

.creed{
  margin:clamp(64px,9vw,110px) auto 0;
  max-width:620px; text-align:center;
  font-size:clamp(20px,2.9vw,30px);
  line-height:1.72; letter-spacing:-.035em;
  color:var(--ink-soft); border:0; padding:0;
}
.creed em{ font-style:normal; color:var(--muted); text-decoration:line-through; text-decoration-thickness:1.5px; }
.creed strong{ font-weight:700; color:var(--blue-deep); }
.creed--left{ text-align:left; margin-inline:0; font-size:clamp(18px,2.3vw,24px); }

/* ----------------------------------------------------------
   3. find your rest
   ---------------------------------------------------------- */
.cards{
  display:grid;
  grid-template-columns:repeat(3,1fr);
  gap:6px;
  border-top:1px solid var(--line);
  padding-top:8px;
}
.rcard{
  position:relative;
  display:flex; flex-direction:column; gap:12px;
  text-align:left;
  font-family:inherit;
  background:transparent;
  border:0;
  border-radius:var(--r-md);
  padding:24px 22px 22px;
  cursor:pointer;
  transition:background .28s var(--ease), transform .28s var(--ease);
}
.rcard::after{
  content:""; position:absolute; left:22px; right:22px; bottom:0;
  height:1px; background:var(--line);
}
.rcard:nth-last-child(-n+3)::after{ display:none; }   /* 3열 마지막 줄 */
.rcard:hover{ background:#FAFAF9; }
.rcard.is-on{ background:var(--green-mist); }
.rcard.is-on .icon > use{ stroke:var(--green-deep); }
.rcard.is-on .rcard__label{ color:var(--green-deep); }

.rcard__ic{ width:34px; height:34px; display:block; }
.rcard__label{ font-size:16.5px; font-weight:600; letter-spacing:-.03em; transition:color .25s var(--ease); }

.result{ margin-top:56px; }
.result[hidden]{ display:none; }
.result__card{
  position:relative; overflow:hidden;
  background:var(--paper);
  border:1.5px solid var(--line);
  border-radius:var(--r-lg);
  padding:clamp(36px,5vw,60px);
  text-align:center;
  max-width:640px; margin-inline:auto;
  box-shadow:var(--lift);
  animation:pop .55s var(--ease) both;
}
@keyframes pop{ from{opacity:0; transform:translateY(22px) scale(.985)} to{opacity:1; transform:none} }
.result__art{ width:min(190px,54%); margin:0 auto 26px; }
.result__art svg, .result__art .pose-img{ display:block; width:100%; height:auto; overflow:visible; }

.result__title{
  font-size:clamp(23px,3.2vw,31px); font-weight:700;
  letter-spacing:-0.04em; line-height:1.42; margin:0 0 20px;
}
.result__body{ color:var(--ink-soft); margin:0 auto 16px; max-width:34ch; font-size:16.5px; }
.result__tip{
  display:inline-block;
  background:var(--green-mist); color:var(--green-deep);
  font-size:14.5px; font-weight:500;
  padding:10px 20px; border-radius:999px; margin:6px 0 0;
}
.result__sign{
  font-family:var(--en); font-size:10px; letter-spacing:.32em;
  color:var(--muted); margin:34px 0 0;
}

.result__actions{ display:flex; flex-wrap:wrap; gap:10px; justify-content:center; margin-top:28px; }
.result__note{ text-align:center; font-size:13px; color:var(--muted); margin-top:14px; }

.btn{
  font-family:inherit; font-size:15px; font-weight:600;
  border-radius:999px; padding:13px 26px;
  border:1.5px solid var(--line); background:var(--paper); color:var(--ink-soft);
  cursor:pointer;
  transition:all .25s var(--ease);
}
.btn:hover{ border-color:var(--blue); color:var(--blue-deep); transform:translateY(-2px); }
.btn--primary{ background:var(--blue); border-color:var(--blue); color:var(--paper); }
.btn--primary:hover{ background:var(--blue-deep); border-color:var(--blue-deep); color:var(--paper); }
.btn--ghost{ background:transparent; border-color:transparent; color:var(--muted); }
.btn--ghost:hover{ border-color:transparent; }
.btn[disabled]{ opacity:.5; pointer-events:none; }

/* --- 가벼운 일상 질문 --- */
.quiz{
  max-width:640px; margin:44px auto 0;
  padding-top:30px; border-top:1px solid var(--line);
  text-align:center;
}
.quiz__lead{ font-size:15px; color:var(--muted); margin:0 0 22px; }
.quiz__q{ margin-bottom:20px; }
.quiz__ask{ font-size:16px; font-weight:600; letter-spacing:-.03em; margin:0 0 12px; }
.quiz__opts{ display:flex; flex-wrap:wrap; gap:8px; justify-content:center; }
.qchip{
  font-family:inherit; font-size:14.5px; color:var(--ink-soft);
  background:var(--paper); border:1.5px solid var(--line); border-radius:999px;
  padding:10px 20px; cursor:pointer;
  transition:all .22s var(--ease);
}
.qchip:hover{ border-color:var(--green); color:var(--green-deep); }
.qchip.is-on{
  background:var(--green); border-color:var(--green);
  color:var(--green-ink); font-weight:600;
}

/* --- 조용한 구독 --- */

/* ----------------------------------------------------------
   4. archive — 원형으로 도는 쉴거리
   ---------------------------------------------------------- */
.archive{ background:var(--white); }

.archive .lede{ margin-top:14px; }
.ringwrap{
  display:grid; place-items:center;
  margin:clamp(44px,7vw,86px) 0 clamp(52px,8vw,96px);
  /* 활성 orb가 팝업 애니메이션으로 커질 때 링 반지름을 살짝 넘는 경우가
     있어서, 여유 패딩을 두고 여기서 완전히 가둔다 (페이지 가로 밀림 방지) */
  padding:0 44px; overflow:hidden;
}
.ring{
  position:relative;
  width:min(520px, 86vw); aspect-ratio:1;
  display:grid; place-items:center;
}

.ring__orbit{
  position:absolute; inset:0;
  animation:spin 64s linear infinite;
}
.ring:hover .ring__orbit{ animation-play-state:paused; }
@keyframes spin{ to{ transform:rotate(360deg); } }

.orb{
  position:absolute; left:50%; top:50%;
  width:66px; height:66px; margin:-33px;
  padding:0; border:0; background:none; cursor:pointer;
  transform:rotate(var(--deg)) translateY(calc(min(228px, 37vw) * -1));
}
/* 두 겹으로 회전을 되돌린다: 배치 각도 + 공전 */
.orb{ -webkit-tap-highlight-color:transparent; user-select:none; }
.orb:focus{ outline:none; }
.orb:focus-visible{ outline:none; }
.orb:focus-visible .orb__in .emo{ outline:2.5px solid var(--blue); outline-offset:5px; border-radius:50%; }
.orb__fix{
  display:block; width:100%; height:100%;
  transform:rotate(calc(var(--deg) * -1));
}
.orb__in{
  display:grid; place-items:center;
  width:100%; height:100%;
  /* 도형 없이 이모지만 떠 있게 */
  background:none; border:0; box-shadow:none;
  /* 링이 돌아도 이모지는 똑바로 */
  animation:spin-back 64s linear infinite;
}
.ring:hover .orb__in{ animation-play-state:paused; }
@keyframes spin-back{ to{ transform:rotate(-360deg); } }

.orb__in .emo{
  width:44px; height:44px; display:block;
  opacity:.62;
  filter:saturate(.88);
  transition:opacity .3s var(--ease), transform .3s var(--ease), filter .3s var(--ease);
}
.orb:hover .orb__in .emo{ opacity:.85; transform:scale(1.1); }
.orb.is-on .orb__in .emo{
  opacity:1; filter:none;
  transform:scale(1.42);
  animation:orbpop .45s var(--ease);
}
@keyframes orbpop{
  0%{ transform:scale(1); }
  55%{ transform:scale(1.6); }
  100%{ transform:scale(1.42); }
}
.orb--mine .orb__in .emo{ opacity:.75; }

/* 가운데 — 테두리 없이 글자만. 뒤로 지나가는 이모지는 은은하게 가린다 */
.ring__center{
  position:relative; z-index:2;
  width:62%;
  display:grid; place-items:center;
  padding:10px 0;
}
.ring__center::before{
  content:""; position:absolute; z-index:-1;
  left:-18%; right:-18%; top:-42%; bottom:-42%;
  background:radial-gradient(closest-side,
    var(--white) 0%, var(--white) 58%, rgba(255,255,255,0) 100%);
}
.ring__text{
  position:relative; margin:0; padding:0; text-align:center;
  font-size:clamp(24px,5vw,34px);
  font-weight:700; line-height:1.42; letter-spacing:-.045em;
  color:var(--ink);
  text-wrap:balance;
}
/* 트랜지션으로 처리합니다. 탭이 가려져 있으면 CSS 애니메이션이 멈춰서
   첫 프레임(opacity:0)에 갇히는데, 트랜지션은 끝값이 바로 적용돼 안전해요. */
.ring__text{
  opacity:1; transform:none;
  transition:opacity .38s var(--ease), transform .38s var(--ease);
}
.ring__text.is-out{ opacity:0; transform:translateY(10px); }

.archive__ask{
  text-align:center; max-width:600px; margin-inline:auto;
  padding-top:clamp(16px,2.4vw,28px);
}
.archive__ask .h3{ margin-bottom:clamp(16px,2.2vw,22px); }
.askform{ display:flex; gap:10px; margin-top:6px; }
.askform input{
  flex:1 1 auto; min-width:0;
  font-family:inherit; font-size:16px; color:var(--ink);
  background:var(--white);
  border:1.5px solid var(--line); border-radius:999px;
  padding:14px 24px;
  transition:border-color .25s var(--ease);
}
.askform input::placeholder{ color:var(--muted); }
.askform input:focus{ outline:none; border-color:var(--blue); }
.askform .btn{ flex:0 0 auto; }
.askform__hint{ font-size:13.5px; color:var(--muted); margin-top:14px; }
.askform__hint.is-ok{ color:var(--blue-deep); font-weight:500; }

@media (max-width:560px){
  .orb{ width:46px; height:46px; margin:-23px; transform:rotate(var(--deg)) translateY(calc(min(260px, 40vw) * -1)); }
  .orb__in svg{ width:22px; height:22px; }
  .ring__text{ font-size:14.5px; }
}

/* ----------------------------------------------------------
   5. meet tyyni
   ---------------------------------------------------------- */
.meet__rail{
  display:grid;
  grid-auto-flow:column;
  grid-auto-columns:minmax(212px,1fr);
  gap:18px;
  overflow-x:auto;
  padding:8px 2px 26px;
  scroll-snap-type:x mandatory;
  scrollbar-width:thin;
}
.meet__rail::-webkit-scrollbar{ height:6px; }
.meet__rail::-webkit-scrollbar-thumb{ background:var(--line); border-radius:99px; }

.pose{
  scroll-snap-align:start;
  background:transparent;
  border:0;
  padding:6px 8px 4px;
  text-align:center;
  transition:transform .3s var(--ease);
}
.pose:hover{ transform:translateY(-6px); }
.pose svg{ display:block; width:100%; height:auto; overflow:visible; }
.pose__name{ font-size:15.5px; font-weight:600; margin:14px 0 2px; letter-spacing:-0.03em; }

/* ----------------------------------------------------------
   6. curation
   ---------------------------------------------------------- */
.rest__head{ display:flex; flex-wrap:wrap; align-items:baseline; justify-content:space-between; gap:14px 28px; margin-bottom:clamp(34px,5vw,52px); }
.rest__head .lede{ margin-bottom:0; }
.rest__week{ font-family:var(--en); font-size:12.5px; letter-spacing:.14em; color:var(--muted); margin:0; }

/* --- 사진 슬롯: 카드를 가득 채운다 --- */
.shot{ position:absolute; inset:0; z-index:0; overflow:hidden; background:var(--blue-mist); }
.shot__fallback{
  position:absolute; inset:0;
  display:none; place-items:center; padding:11%;
  background:radial-gradient(120% 90% at 78% 12%, #FFFFFF 0%, transparent 58%), var(--blue-mist);
}
.shot--noimg .shot__fallback{ display:grid; }
.shot__fallback svg, .shot__fallback .pose-img{ width:100%; max-width:230px; height:auto; overflow:visible; }

.shot__img{
  position:absolute; inset:0; width:100%; height:100%;
  object-fit:cover; display:block;
  transition:transform .8s var(--ease);
}
/* 앨범아트·책표지처럼 잘리면 안 되는 이미지: 같은 사진을 흐리게 깔고 그 위에 온전히 */
.shot__bg{
  position:absolute; inset:0; width:100%; height:100%;
  object-fit:cover; display:block;
  filter:blur(26px) saturate(1.25) brightness(.92);
  transform:scale(1.25);
}
.shot--contain .shot__img{
  object-fit:contain;
  padding:14% 16% 34%;
  filter:drop-shadow(0 18px 34px rgba(0,0,0,.34));
}
.shot__credit{ display:none; }
.cap{
  margin:8px 0 clamp(14px,2vw,20px);
  font-size:11px; line-height:1.5; color:var(--muted);
  letter-spacing:.005em;
}
.row .cap{ display:none; }

/* --- 카드 그리드 (뉴닉 · 고구마팜 결) --- */
.curation{
  display:grid; grid-template-columns:repeat(2,1fr);
  gap:clamp(34px,4.4vw,52px) clamp(20px,2.6vw,32px);
  margin-top:0;
}
.card{
  position:relative; display:flex; flex-direction:column; min-width:0;
  text-decoration:none; color:inherit;
}
.card:hover .card__title{ color:var(--blue-deep); }

.card__shot{
  position:relative; aspect-ratio:16/9;
  border-radius:12px; overflow:hidden;
  background:var(--blue-mist);
  margin-bottom:14px;
}
.card:hover .shot__img{ transform:scale(1.04); }

.card__top{
  display:flex; align-items:center; justify-content:space-between;
  gap:10px; margin-bottom:9px;
}
.tgs{ display:flex; flex-wrap:wrap; gap:5px; min-width:0; }
.tg{
  font-size:12px; font-weight:600; letter-spacing:-.02em;
  color:var(--green-deep); background:var(--green-soft);
  padding:3px 9px; border-radius:6px; white-space:nowrap;
}
.card__date{ font-size:12.5px; color:var(--muted); white-space:nowrap; flex:0 0 auto; }

.card__title{
  font-size:clamp(18px,2vw,21px); font-weight:700;
  line-height:1.45; letter-spacing:-.035em;
  margin:0 0 6px; color:var(--ink);
}
.card__sub{ font-size:14.5px; line-height:1.6; color:var(--ink-soft); margin:0; }
.card__text{ font-size:14.5px; line-height:1.78; color:var(--ink-soft); margin:0 0 16px; }

/* --- 접기 --- */
.fold{ min-width:0; }

.fold__btn{
  list-style:none; cursor:pointer;
  display:inline-flex; align-items:center; gap:7px;
  font-size:14px; font-weight:600; color:var(--green-deep);
  padding:9px 0; user-select:none;
}
.fold__btn::-webkit-details-marker{ display:none; }
.fold__btn::after{
  content:""; width:7px; height:7px; margin-top:-3px;
  border-right:1.8px solid currentColor; border-bottom:1.8px solid currentColor;
  transform:rotate(45deg); transition:transform .25s var(--ease);
}
.fold[open] .fold__btn::after{ transform:rotate(-135deg); margin-top:2px; }
.fold__in{ padding-top:4px; }
@media (min-width:861px){ .fold__btn{ display:none; } .fold__in{ padding-top:0; } }

/* --- 티니의 한 줄 --- */
.tnote{
  display:flex; gap:11px; align-items:flex-start;
  background:var(--blue-mist); border-radius:16px;
  padding:14px 17px; margin:0 0 20px;
  font-size:14px; line-height:1.68; color:var(--blue-deep);
}
.tnote svg{ width:19px; height:19px; flex:0 0 auto; margin-top:2px; overflow:visible; }

/* --- 실용 정보 --- */
.metas{ margin:0; padding-top:16px; border-top:1px solid var(--line); display:grid; gap:8px; }
.metas__row{ display:grid; grid-template-columns:62px 1fr; gap:12px; align-items:baseline; }
.metas dt{ font-size:12.5px; color:var(--muted); }
.metas dd{ margin:0; font-size:14.5px; line-height:1.6; color:var(--ink-soft); }

.tags{ display:flex; flex-wrap:wrap; gap:7px; margin:18px 0 0; }
.tag{ font-size:12.5px; color:var(--muted); border:1px solid var(--line); border-radius:999px; padding:5px 12px; }

.cur__go{
  display:inline-block; align-self:flex-start;
  font-size:14px; font-weight:600; color:var(--blue-deep);
  margin-top:16px; text-decoration:none;
  border-bottom:1.5px solid transparent;
  transition:border-color .25s var(--ease);
}
.cur__go:hover{ border-bottom-color:var(--blue); }

.rest__foot{
  display:flex; flex-wrap:wrap; align-items:center; justify-content:space-between;
  gap:14px; margin-top:44px; padding-top:24px; border-top:1px solid var(--line);
}
.rest__foot p{ margin:0; font-size:14.5px; color:var(--muted); }
.rest__more{ font-size:14.5px; font-weight:600; color:var(--blue-deep); text-decoration:none; white-space:nowrap; }
.rest__more:hover{ text-decoration:underline; text-underline-offset:4px; }

@media (max-width:960px){
  .curation{ grid-template-columns:repeat(2,1fr); gap:18px; }
  
  
}

/* ----------------------------------------------------------
   footer
   ---------------------------------------------------------- */
.foot{ padding:clamp(70px,9vw,110px) 0 0; }
.foot__inner{ display:grid; grid-template-columns:1.1fr 1fr; gap:48px; align-items:start; }
.foot__tag{
  font-family:var(--en); font-size:12px; font-weight:500;
  letter-spacing:.38em; color:var(--blue-deep);
  margin:10px 0 0; padding-left:4px;
}
.foot__icons{ display:flex; align-items:center; gap:14px; margin-top:30px; }
.foot__icons svg{ width:34px; height:38px; }
.foot__icons span{ width:1px; height:26px; background:var(--blue); opacity:.45; }

.foot__cols{ display:grid; grid-template-columns:1fr 1fr; gap:32px; }
.foot__cols h4{
  font-family:var(--en); font-size:11px; font-weight:600;
  letter-spacing:.26em; color:var(--muted);
  margin:0 0 16px;
}
.foot__cols a{ display:block; font-size:15px; color:var(--ink-soft); text-decoration:none; padding:5px 0; }
.foot__cols a:hover{ color:var(--blue-deep); }

.foot__bottom{
  display:flex; flex-wrap:wrap; gap:16px; justify-content:space-between;
  width:min(var(--wrap), 100% - 48px);
  margin:clamp(56px,8vw,90px) auto 0;
  padding:22px 0 30px;
  border-top:1px solid var(--line);
  font-size:12.5px; color:var(--muted);
}

/* ----------------------------------------------------------
   reveal on scroll
   ---------------------------------------------------------- */
.reveal{ opacity:0; transform:translateY(20px); }
.reveal.in{
  opacity:1; transform:none;
  transition:opacity .8s var(--ease), transform .8s var(--ease);
}
.reveal[data-d="1"].in{ transition-delay:.07s; }
.reveal[data-d="2"].in{ transition-delay:.14s; }
.reveal[data-d="3"].in{ transition-delay:.21s; }
.reveal[data-d="4"].in{ transition-delay:.28s; }
.reveal[data-d="5"].in{ transition-delay:.35s; }
.reveal[data-d="6"].in{ transition-delay:.42s; }

:focus-visible{ outline:2.5px solid var(--blue); outline-offset:3px; border-radius:6px; }

/* ----------------------------------------------------------
   responsive
   ---------------------------------------------------------- */
@media (max-width:1040px){
  /* 링크가 숨는 만큼, 그 다음에 남는 첫 요소(시작하기/내 정보)를 오른쪽으로 밀고
     햄버거는 맨 뒤에 그대로 둬서 맨 우측 끝에 오게 한다 */
  .nav__burger{ display:flex; }
  #navAcc, .nav__me{ margin-left:auto; }
  #navAcc .nav__cta{ display:none; }
  .nav__cta--menu{ display:inline-flex; align-items:center; gap:6px; margin:8px 0 2px; }
  .nav__links{
    display:none; position:absolute; top:100%; left:0; right:0;
    flex-direction:column; gap:2px; padding:10px clamp(20px,4vw,44px) 16px;
    background:var(--white); border-bottom:1px solid var(--line);
    box-shadow:0 12px 24px -16px rgba(0,0,0,.18);
  }
  .nav__links.is-open{ display:flex; }
  .nav__links a{ padding:11px 0; }
  .nav__links a.nav__cta--menu{ padding:9px 20px; }

  /* 드롭다운은 이 폭에서 항상 흰 배경이라, 히어로용 흰 글자를 여기선 쓰지 않는다 */
  .nav--hero .nav__links a{ color:var(--ink-soft); text-shadow:none; }
  .nav--hero .nav__links a:hover{ color:var(--blue-deep); }
  .nav--hero .nav__links a::after{ background:var(--blue); }
  .nav__links a.nav__cta--menu,
  .nav--hero .nav__links a.nav__cta--menu{ color:var(--paper); }
  .nav__links a.nav__cta--menu:hover,
  .nav--hero .nav__links a.nav__cta--menu:hover{ color:var(--paper); background:var(--blue-deep); }
  .nav__links a.nav__cta--menu::after{ display:none; }
}
@media (max-width:860px){
  
  
  .cards{ grid-template-columns:repeat(2,1fr); }
  .curation{ grid-template-columns:1fr; }
  .foot__inner{ grid-template-columns:1fr; }
}
@media (max-width:860px){
  .cards{ grid-template-columns:repeat(2,1fr); }
  .rcard:nth-last-child(-n+3)::after{ display:block; }
  .rcard:nth-last-child(-n+2)::after{ display:none; }
}
@media (max-width:560px){
  body{ font-size:16px; }
  .wrap{ width:min(var(--wrap), 100% - 36px); }
  /* 쉼 카드 6개 = 아이콘 한 줄 리스트 */
  .cards{ grid-template-columns:1fr; gap:0; }
  .rcard{
    flex-direction:row; align-items:center; gap:16px;
    padding:16px 12px;
  }
  .rcard::after{ left:12px; right:12px; }
  .rcard:nth-last-child(-n+2)::after{ display:block; }
  .rcard:last-child::after{ display:none; }
  .rcard__ic{ width:28px; height:28px; flex:0 0 auto; }
  .rcard__label{ font-size:15.5px; flex:1 1 auto; }
  .askform,
  .ask__form{ flex-direction:column; }
  
  .ask__form .btn{ width:100%; }
  .quiz__opts{ gap:7px; }
  .qchip{ font-size:14px; padding:9px 16px; }
  .askform .btn{ width:100%; }
  .wordmark{ font-size:52px; }
  .foot__cols{ grid-template-columns:1fr; }
  .foot__bottom{ flex-direction:column; gap:6px; }
  .result__actions .btn{ flex:1 1 100%; }
}

@media (prefers-reduced-motion:reduce){
  html{ scroll-behavior:auto; }
  *,*::before,*::after{ animation-duration:.001ms !important; animation-iteration-count:1 !important; transition-duration:.001ms !important; }
  .reveal{ opacity:1; transform:none; }
}

/* ----------------------------------------------------------
   fine tuning
   ---------------------------------------------------------- */
.h2, .h3{ scroll-margin-top:110px; }

@media (max-width:640px){
  .wordmark--sm{ font-size:27px; }
  /* 패딩이 줄어든 만큼 헤더 높이 값도 같이 줄인다 */
  :root{ --nav-h:64px; }
  .nav{ padding-block:10px; }
  .drift .note{ font-size:14px; padding:10px 20px; }
  .meet__rail{ grid-auto-columns:minmax(196px,1fr); }
}

/* ----------------------------------------------------------
   지난 큐레이션 — 쌓여 있지만 잠겨 있다
   ---------------------------------------------------------- */
.vault{
  margin-top:clamp(48px,6vw,72px);
  padding-top:clamp(30px,4vw,42px);
  border-top:1px solid var(--line);
}
.vault__head{ margin-bottom:22px; }
.vault__title{ font-size:clamp(19px,2.2vw,23px); font-weight:700; letter-spacing:-.035em; margin:0 0 6px; }
.vault__lead{ font-size:14px; color:var(--muted); margin:0; }

/* 썸네일이 한 줄로 흘러간다 */
.vault__flow{
  display:flex;
  width:100vw; max-width:100vw; margin-inline:calc(50% - 50vw);
  /* hidden 만으로는 안쪽에서 계속 움직이는 transform 때문에 모바일에서
     문서 전체가 가로로 스크롤되는 경우가 있어 clip으로 강하게 막는다 */
  overflow:hidden; overflow:clip;
  -webkit-mask-image:linear-gradient(90deg,transparent,#000 5%,#000 95%,transparent);
          mask-image:linear-gradient(90deg,transparent,#000 5%,#000 95%,transparent);
}
.vault__track{
  display:flex; flex:0 0 auto; gap:20px; padding-right:20px;
  animation:vflow 64s linear infinite;
  will-change:transform;
}
.vault__flow:hover .vault__track{ animation-play-state:paused; }
@keyframes vflow{ from{ transform:translateX(0); } to{ transform:translateX(-100%); } }

.vcard{
  flex:0 0 auto; width:clamp(140px,15vw,176px);
  display:flex; flex-direction:column;
  text-decoration:none; color:inherit;
}
.vcard:hover .vcard__title{ color:var(--blue-deep); }
.vthumb{
  position:relative; overflow:hidden;
  aspect-ratio:1; margin-bottom:9px;
  background:var(--blue-mist);
  border:1.5px solid var(--line);
  border-radius:14px;
  transition:border-color .25s var(--ease), transform .25s var(--ease);
}
.vcard:hover .vthumb{ transform:translateY(-3px); }
.vcard:hover .vthumb{ border-color:var(--blue); }
.vthumb__img{ position:absolute; inset:0; z-index:1; width:100%; height:100%; object-fit:cover; display:block; }
.vthumb__art{
  position:absolute; inset:0; z-index:0; display:grid; place-items:center; padding:15%;
  background:radial-gradient(120% 90% at 76% 14%, #FFFFFF 0%, transparent 60%), var(--blue-mist);
}
.vthumb__art svg, .vthumb__art .pose-img{ width:100%; height:auto; overflow:visible; }

.vcard__title{
  font-size:12.5px; font-weight:600; line-height:1.45; letter-spacing:-.035em;
  margin:0; color:var(--ink-soft);
  min-height:2.9em;
  display:-webkit-box; -webkit-line-clamp:2; -webkit-box-orient:vertical; overflow:hidden;
}
.vcard__sub{ display:none; }

.vault__cta{ margin:24px 0 0; text-align:center; }
.vault__cta a{
  font-size:14.5px; font-weight:600; color:var(--blue-deep); text-decoration:none;
  border-bottom:1.5px solid transparent; transition:border-color .25s var(--ease);
}
.vault__cta a:hover{ border-bottom-color:var(--blue); }

/* ----------------------------------------------------------
   6. 멤버십 — 되고 안 되고 비교표
   ---------------------------------------------------------- */
.member{ background:var(--white); }
.ptable{ overflow-x:auto; padding-top:16px; }
.pt{
  width:100%; min-width:520px;
  border-collapse:separate; border-spacing:0;
}

/* 머리 */
.pt__corner{ width:40%; border-bottom:1px solid var(--line); }
.pt__h{
  position:relative;
  width:20%; vertical-align:bottom;
  padding:30px 10px 18px; text-align:center;
  border-bottom:1px solid var(--line);
}
.pt__h.is-best{
  background:var(--green-mist);
  border-radius:16px 16px 0 0;
  border-bottom-color:var(--green);
}
.pt__flag{
  position:absolute; top:-10px; left:50%; transform:translateX(-50%);
  z-index:2;
  font-size:11px; font-weight:700; letter-spacing:-.02em; white-space:nowrap;
  color:#FFFFFF; background:var(--green);
  padding:4px 12px; border-radius:999px;
}
.pt__e{ display:block; margin-bottom:8px; }
.pt__e .emo{ width:30px; height:30px; margin-inline:auto; }
.pt__name{ display:block; font-size:15.5px; font-weight:700; letter-spacing:-.03em; color:var(--ink); }
.pt__price{ display:block; font-size:14.5px; font-weight:700; color:var(--green-deep); margin-top:3px; }
.pt__sub{ display:block; font-size:11.5px; color:var(--muted); margin-top:4px; }

/* 몸통 */
.pt__f{
  text-align:left; font-weight:500;
  font-size:14.5px; letter-spacing:-.025em; color:var(--ink-soft);
  padding:15px 14px 15px 2px;
  border-bottom:1px solid var(--line);
}
.pt__c{
  text-align:center; padding:15px 10px;
  border-bottom:1px solid var(--line);
}
.pt__c.is-best{ background:var(--green-mist); }
.pt tbody tr:last-child .pt__c.is-best{ border-radius:0 0 16px 16px; }
.pt__yes{ color:var(--green-deep); font-size:16px; font-weight:800; }
.pt__no{ color:#C9CACC; font-size:16px; }

@media (max-width:640px){
  .pt{ min-width:440px; }
  .pt__f{ font-size:13px; padding:13px 8px 13px 2px; }
  .pt__h{ padding:28px 6px 14px; }
  .pt__name{ font-size:13.5px; }
  .pt__price{ font-size:13px; }
  .pt__sub{ font-size:10.5px; }
  .pt__e .emo{ width:26px; height:26px; }
}

@media (max-width:860px){
  
  
}
@media (max-width:560px){
  .vault__head{ flex-direction:column; }
}

/* 카드 그리드 — 모바일 */
@media (max-width:700px){
  .curation{ grid-template-columns:1fr; gap:34px; }
  .card__title{ font-size:18px; }
  .card__sub{ font-size:14px; }
}

/* ----------------------------------------------------------
   포스팅 페이지
   ---------------------------------------------------------- */
.pg{ padding-bottom:clamp(60px,8vw,110px); }
.pg__loading{ text-align:center; padding:120px 0; color:var(--muted); }

.pg__head{ padding-top:clamp(34px,5vw,66px); max-width:760px; }
.pg__back{
  display:inline-block; margin-bottom:clamp(20px,3vw,30px);
  font-size:14px; font-weight:600; color:var(--muted); text-decoration:none;
}
.pg__back:hover{ color:var(--blue-deep); }
.pg__kicker{ margin:0 0 14px; }
.pg__title{
  font-size:clamp(28px,4.4vw,46px); font-weight:800;
  line-height:1.28; letter-spacing:-.045em; margin:0 0 12px;
}
.pg__sub{ font-size:clamp(16px,1.9vw,19px); color:var(--blue-deep); font-weight:500; margin:0 0 22px; }
.pg__by{
  display:flex; align-items:center; gap:8px; flex-wrap:wrap;
  font-size:13.5px; color:var(--muted); margin:0 0 clamp(26px,4vw,40px);
}
.pg__by b{ color:var(--ink); font-weight:700; }
.pg__dot{ opacity:.5; }
.pg__ava{
  width:28px; height:28px; display:grid; place-items:center;
  background:var(--blue-mist); border-radius:50%;
}
.pg__ava svg{ width:20px; height:20px; margin-top:2px; }

.pg__hero{ margin-bottom:clamp(28px,4vw,44px); }
.pg__hero img{
  display:block; width:min(var(--wrap), 100% - 48px);
  margin-inline:auto; border-radius:var(--r-md);
  aspect-ratio:16/9; object-fit:cover;
}
.pg__hero .cap{ text-align:center; margin-top:10px; }

.pg__body{ max-width:660px; }
.pg__body p{ font-size:16.5px; line-height:1.92; color:var(--ink-soft); margin:0 0 22px; }
.pg__body p b{ color:var(--ink); font-weight:700; }
.pg__body mark{
  background:linear-gradient(to top, var(--green-soft) 0, var(--green-soft) 44%, transparent 44%);
  color:var(--ink); font-weight:600; padding:0 2px; border-radius:2px;
}
.pg__body h2{
  display:flex; align-items:center; gap:10px;
  font-size:clamp(20px,2.4vw,25px); font-weight:800;
  letter-spacing:-.04em; line-height:1.4;
  margin:clamp(38px,5vw,56px) 0 16px; color:var(--ink);
}
.pg__emo{ display:inline-flex; flex:0 0 auto; margin-right:.32em; }
.emo{
  width:1.08em; height:1.08em; display:block;
  vertical-align:-.16em;
}

.pg__box, .pg__list, .pg__tip, .pg__info{
  background:#F6F7F8;
  border:1px solid #ECEDEF;
  border-radius:12px;
}
.pg__list{
  list-style:none; margin:0 0 24px; padding:18px 20px;
  display:grid; gap:9px;
}
.pg__list li{
  position:relative; padding-left:17px;
  font-size:15px; line-height:1.7; color:var(--ink-soft);
}
.pg__list li{ padding-left:26px; }
.pg__list li::before{
  content:""; position:absolute; left:0; top:.42em;
  width:15px; height:12px;
  background:currentColor; color:var(--green);
  -webkit-mask:var(--paw) center/contain no-repeat;
          mask:var(--paw) center/contain no-repeat;
}

.pg__fig{ margin:0 0 26px; }
.pg__fig img{ display:block; width:100%; border-radius:14px; }
.pg__fig--two div{ display:grid; grid-template-columns:1fr 1fr; gap:6px; }
.pg__fig--two img{ aspect-ratio:1; object-fit:cover; border-radius:10px; }
.pg__fig figcaption{ margin-top:9px; text-align:center; font-size:11.5px; color:var(--muted); }

.pg__tip{
  display:flex; gap:11px; align-items:flex-start;
  padding:16px 18px; margin:0 0 24px !important;
  font-size:15px !important; line-height:1.7 !important; color:var(--ink-soft) !important;
}
.pg__tip-face{
  flex:0 0 auto; width:36px; height:36px;
  background:#fff; border:1px solid #ECEDEF; border-radius:50%;
  padding:4px; box-sizing:border-box; object-fit:contain;
}

.pg__info{
  margin-top:clamp(34px,4.4vw,48px);
  padding:clamp(20px,2.6vw,26px);
}
.pg__info h3{ font-size:15px; font-weight:700; letter-spacing:-.03em; margin:0 0 14px; }
.pg__info .metas{ padding-top:0; border-top:0; }

/* 가로 구분선 */
.pg__hr{
  border:0; height:9px;
  margin:clamp(34px,4.6vw,52px) 0;
  background:var(--rule) center/auto 9px repeat-x;
  opacity:.9;
}

/* 좋아요 */
.likes{
  display:flex; align-items:center; gap:11px;
  margin-top:clamp(34px,4.4vw,48px);
}
.likes__btn{
  display:inline-flex; align-items:center; gap:7px;
  padding:9px 17px; border-radius:999px;
  border:1.5px solid var(--line); background:var(--white);
  font-family:inherit; font-size:14.5px; font-weight:600; color:var(--ink-soft);
  cursor:pointer; transition:all .2s var(--ease);
}
.likes__heart{ display:inline-flex; color:var(--muted); transition:color .2s var(--ease), transform .2s var(--ease); }
.likes__btn:hover{ border-color:var(--green); }
.likes__btn.is-on{ border-color:var(--green); background:var(--green-mist); color:var(--green-deep); }
.likes__btn.is-on .likes__heart{ color:#E8607A; transform:scale(1.12); }
.likes__t{ font-size:13px; color:var(--muted); }

/* 캐릭터 배너 */
.promo{
  position:relative; overflow:hidden;
  display:flex; align-items:center;
  min-height:132px; margin-top:clamp(30px,4vw,44px);
  padding:22px clamp(20px,3vw,30px);
  border-radius:16px; text-decoration:none;
  background:linear-gradient(100deg, #3FBF9A 0%, #57B98A 34%, #6FA8DC 100%);
  transition:transform .25s var(--ease), box-shadow .25s var(--ease);
}
.promo:hover{ transform:translateY(-2px); box-shadow:0 18px 34px -20px rgba(40,90,90,.6); }
.promo__txt{ display:grid; gap:6px; max-width:62%; z-index:2; }
.promo__txt b{ font-size:clamp(15.5px,1.9vw,18px); font-weight:700; letter-spacing:-.035em; color:#FFFFFF; }
.promo__txt i{ font-style:normal; font-size:13.5px; color:rgba(255,255,255,.9); }
.promo__ty{
  position:absolute; right:clamp(6px,2vw,22px); bottom:-6px;
  width:clamp(86px,14vw,118px); z-index:1;
}
.promo__ty svg, .promo__ty .pose-img{ display:block; width:100%; height:auto; overflow:visible; }
.promo__tag{
  position:absolute; right:12px; top:12px; z-index:3;
  font-family:var(--en); font-size:10px; font-weight:600; letter-spacing:.1em;
  color:#FFFFFF; background:rgba(0,0,0,.22);
  padding:4px 9px; border-radius:999px;
}

.pg__more{ margin-top:clamp(60px,8vw,100px); padding-top:clamp(34px,4vw,48px); border-top:1px solid var(--line); }
.pg__more-t{ font-size:clamp(19px,2.2vw,23px); font-weight:700; letter-spacing:-.035em; margin:0 0 clamp(22px,3vw,32px); }
.pg__more .curation{ grid-template-columns:repeat(3,1fr); }

@media (max-width:860px){ .pg__more .curation{ grid-template-columns:1fr; } }
@media (max-width:560px){
  .pg__hero img{ width:100%; border-radius:0; }
  .pg__body p{ font-size:16px; line-height:1.88; }
}

/* 멤버십 배너 */
.promo--wide{ min-height:158px; margin-top:clamp(30px,4vw,46px); border-radius:20px; }
.promo--wide .promo__txt b{ font-size:clamp(17px,2.2vw,21px); }
.promo--wide .promo__ty{ width:clamp(96px,15vw,132px); }
.member .qask{ margin-top:clamp(16px,2.4vw,22px); }
.member .qask__hint{ margin-top:11px; }

/* ----------------------------------------------------------
   큐레이션 목록 페이지 (list.html)
   ---------------------------------------------------------- */
.nav__links a.is-here{ color:var(--ink); font-weight:600; }
.nav__links a.is-here::after{ width:100%; background:var(--green); }

.lst__head{ padding-top:clamp(34px,5vw,64px); max-width:760px; text-align:left; }
.lst__head .h2{ text-align:left; }
.lst__head .lede{ margin:12px 0 0; text-align:left; max-width:520px; }

.lst__bar{
  display:flex; align-items:center; gap:14px;
  margin:clamp(26px,3.4vw,40px) 0 clamp(24px,3vw,34px);
  padding-bottom:16px; border-bottom:1px solid var(--line);
}
.lst__cats{ display:flex; flex-wrap:wrap; gap:8px; min-width:0; }
.lcat{
  font-family:inherit; font-size:14px; font-weight:500; letter-spacing:-.025em;
  color:var(--ink-soft); background:var(--tint);
  border:1px solid transparent; border-radius:999px;
  padding:7px 15px; cursor:pointer;
  transition:background .2s var(--ease), color .2s var(--ease), border-color .2s var(--ease);
}
.lcat:hover{ color:var(--green-deep); border-color:var(--green-soft); }
.lcat.is-on{
  color:var(--green-ink); background:var(--green-soft);
  border-color:var(--green-soft); font-weight:600;
}
.lst__count{ margin-left:auto; flex:0 0 auto; font-size:13px; color:var(--muted); }

.lst__grid{ grid-template-columns:repeat(3,1fr); }

/* 잠긴 지난 콘텐츠 */
.card__lock{
  position:absolute; right:11px; top:11px; z-index:3;
  display:block; line-height:0; color:#FFFFFF;
}
.ic-lock{
  display:block; width:22px; height:22px;
  filter:drop-shadow(0 1px 3px rgba(26,26,26,.45));
}
.ic-lock--dim{
  width:14px; height:14px; color:var(--muted);
  filter:none; flex:0 0 auto;
}
.card--locked .shot__img{ filter:saturate(.55) brightness(1.04); opacity:.72; }
.card--locked:hover .shot__img{ filter:none; opacity:1; }
.card--locked .card__title{ color:var(--ink-soft); }
.card--locked:hover .card__title{ color:var(--blue-deep); }

@media (max-width:900px){
  .lst__grid{ grid-template-columns:repeat(2,1fr); }
}
@media (max-width:560px){
  .lst__grid{ grid-template-columns:1fr; }
  .lst__bar{ flex-direction:column; align-items:flex-start; gap:10px; }
  .lst__count{ margin-left:0; }
}

/* ----------------------------------------------------------
   지난 큐레이션 — 멤버십으로 막힌 글
   ---------------------------------------------------------- */
.tg--lock{ color:var(--blue-deep); background:var(--blue-soft); }
.pg__hero--dim img{ filter:saturate(.6) brightness(1.06); }

.gate{ position:relative; padding-top:6px; }
.gate__skel{ display:grid; gap:14px; }
.gate__skel i{
  display:block; height:13px; border-radius:7px;
  background:linear-gradient(90deg, var(--tint), #EFEFEC, var(--tint));
}
.gate__skel i:nth-child(4){ margin-bottom:12px; }
.gate::after{
  content:""; position:absolute; left:0; right:0; bottom:0; height:72%;
  background:linear-gradient(to bottom, rgba(255,255,255,0), var(--white) 62%);
  pointer-events:none;
}
.gate__box{
  position:relative; z-index:2;
  margin-top:-26px; text-align:center;
  background:var(--white);
  border:1px solid var(--line); border-radius:20px;
  padding:clamp(26px,4vw,40px) clamp(20px,3vw,34px) clamp(22px,3vw,30px);
  box-shadow:var(--lift);
}
.gate__ty{ display:block; width:clamp(84px,13vw,112px); margin:0 auto 14px; }
.gate__ty svg, .gate__ty .pose-img{ display:block; width:100%; height:auto; overflow:visible; }
.gate__box h3{
  font-size:clamp(17px,2.1vw,20px); font-weight:700; letter-spacing:-.035em;
  line-height:1.5; margin:0 0 10px; color:var(--ink);
}
.gate__box p{ font-size:14.5px; line-height:1.7; color:var(--ink-soft); margin:0 0 20px; }
.gate__row{ display:flex; flex-wrap:wrap; justify-content:center; gap:10px; }
.gate__box small{ display:block; margin-top:16px; font-size:12.5px; color:var(--muted); }
.btn--go{
  background:var(--green); border-color:var(--green); color:#FFFFFF; font-weight:600;
}
.btn--go:hover{ background:var(--green-deep); border-color:var(--green-deep); color:#FFFFFF; }

.pg__more-open{ margin-top:clamp(44px,6vw,70px); }

/* ----------------------------------------------------------
   쉼 리포트 (report.html)
   ---------------------------------------------------------- */
.rp .wrap{ max-width:620px; }
.rp__kick{
  font-size:13px; font-weight:600; letter-spacing:.02em;
  color:var(--green-deep); margin:0 0 10px;
}
.rp__ty{ display:block; width:clamp(96px,16vw,130px); margin:0 auto 18px; }
.rp__ty svg, .rp__ty .pose-img{ display:block; width:100%; height:auto; overflow:visible; }
.rp__ty--big{ width:clamp(116px,20vw,152px); margin-bottom:14px; }
/* 쉼 유형 일러스트 (assets/img/rest-types) — 캐릭터 포즈 대신 유형 그림을 크게 */
.rp__ty--art{ width:clamp(150px,26vw,208px); }
.rp__ty--art img{ display:block; width:100%; height:auto; }

/* --- 들어가기 --- */
.rp__intro{ padding-top:clamp(36px,6vw,78px); text-align:center; }
.rp__h1{
  font-size:clamp(26px,4.4vw,38px); font-weight:800;
  letter-spacing:-.045em; line-height:1.32; margin:0 0 16px;
}
.rp__lede{ font-size:16px; line-height:1.85; color:var(--ink-soft); margin:0 0 clamp(26px,3.4vw,34px); }
.rp__row{ display:flex; flex-wrap:wrap; justify-content:center; gap:10px; }
.rp__fine{
  margin:clamp(24px,3vw,32px) auto 0; max-width:480px;
  font-size:12.5px; line-height:1.75; color:var(--muted);
}
.rp__fine.is-ok{ color:var(--green-deep); font-weight:500; }

/* --- 문항 --- */
.rp__q{ padding-top:clamp(34px,5vw,62px); }
.rp__bar{ height:4px; border-radius:999px; background:var(--tint); overflow:hidden; }
.rp__bar i{
  display:block; height:100%; border-radius:999px;
  background:var(--green); transition:width .35s var(--ease);
}
.rp__step{ margin:16px 0 10px; font-size:13px; color:var(--muted); }
.rp__qt{
  font-size:clamp(22px,3.4vw,30px); font-weight:700;
  letter-spacing:-.04em; line-height:1.4; margin:0 0 clamp(22px,3vw,30px);
}
.rp__as{ display:grid; gap:10px; }
.rpa{
  font-family:inherit; font-size:16px; letter-spacing:-.025em; text-align:left;
  color:var(--ink); background:var(--white);
  border:1px solid var(--line); border-radius:14px;
  padding:17px 20px; cursor:pointer;
  transition:border-color .2s var(--ease), background .2s var(--ease), transform .2s var(--ease);
}
.rpa:hover{ border-color:var(--green); background:var(--green-mist); transform:translateX(3px); }
.rpa.is-on{ border-color:var(--green); background:var(--green-soft); font-weight:600; }
.rp__back{
  margin-top:22px; padding:0; border:0; background:none; cursor:pointer;
  font-family:inherit; font-size:14px; color:var(--muted);
}
.rp__back:hover{ color:var(--blue-deep); }

/* --- 결과 --- */
.rp__res{ padding-top:clamp(34px,5vw,62px); text-align:center; }
.rp__name{
  font-size:clamp(30px,5vw,44px); font-weight:800;
  letter-spacing:-.045em; margin:0 0 8px;
}
.rp__line{ font-size:clamp(16px,2vw,18px); color:var(--blue-deep); font-weight:500; margin:0 0 clamp(28px,3.6vw,40px); }
.rp__card{
  text-align:left; background:var(--tint);
  border-radius:16px; padding:clamp(20px,2.8vw,26px);
  margin-bottom:14px;
}
.rp__card h2{
  display:flex; align-items:center; gap:8px;
  font-size:15px; font-weight:700; letter-spacing:-.03em; margin:0 0 12px; color:var(--ink);
}
.rp__card h2 .emo{ width:19px; height:19px; }
.rp__card p{ font-size:15px; line-height:1.85; color:var(--ink-soft); margin:0; }
.rp__tips{ margin:0; padding:0; list-style:none; counter-reset:rt; display:grid; gap:11px; }
.rp__tips li{
  counter-increment:rt; position:relative; padding-left:30px;
  font-size:15px; line-height:1.7; color:var(--ink-soft);
}
.rp__tips li::before{
  content:counter(rt); position:absolute; left:0; top:2px;
  display:grid; place-items:center; width:21px; height:21px;
  font-size:11.5px; font-weight:700; border-radius:50%;
  color:var(--green-ink); background:var(--green-soft);
}
.rp__res .rp__row{ margin-top:clamp(24px,3vw,32px); }
.rp .pg__more{ max-width:var(--wrap); }
.rp .pg__more .curation{ grid-template-columns:repeat(3,1fr); }

@media (max-width:700px){
  .rp .pg__more .curation{ grid-template-columns:1fr; }
}

/* ----------------------------------------------------------
   랜딩 — 쉼 리포트 안내
   ---------------------------------------------------------- */
.rpt{ background:var(--white); }
.rpt__in{
  display:grid; grid-template-columns:1.15fr .85fr;
  align-items:center; gap:clamp(24px,4vw,56px);
}
.rpt__txt .h2, .rpt__txt .lede{ text-align:left; margin-inline:0; }
.rpt__steps{
  list-style:none; margin:clamp(24px,3vw,32px) 0 0; padding:0;
  display:grid; gap:11px;
}
.rpt__steps li{
  display:flex; align-items:center; gap:11px;
  font-size:15px; letter-spacing:-.025em; color:var(--ink-soft);
}
.rpt__steps b{
  flex:0 0 auto; display:grid; place-items:center;
  width:23px; height:23px; border-radius:50%;
  font-size:12px; font-weight:700;
  color:var(--green-ink); background:var(--green-soft);
}
.rpt__go{ display:flex; flex-wrap:wrap; align-items:center; gap:12px 16px; margin:clamp(26px,3.2vw,34px) 0 0; }
.rpt__go span{ font-size:13px; color:var(--muted); }
.rpt__art{ max-width:340px; margin-inline:auto; width:100%; }

@media (max-width:760px){
  .rpt__in{ grid-template-columns:1fr; }
  .rpt__art{ order:-1; }
  .rpt__txt .h2, .rpt__txt .lede{ text-align:center; }
  .rpt__steps li{ justify-content:center; }
  .rpt__go{ justify-content:center; }
}

.find__next{
  margin:clamp(22px,3vw,30px) 0 0; text-align:center;
  font-size:14.5px; color:var(--ink-soft);
}
.find__next a{ color:var(--green-deep); font-weight:600; border-bottom:1.5px solid var(--green-soft); text-decoration:none; }
.find__next a:hover{ border-bottom-color:var(--green); }

/* ----------------------------------------------------------
   쉼 리포트 — 본문
   ---------------------------------------------------------- */
/* 들어가기 목차 */
.rp__toc{
  text-align:left; margin:clamp(28px,3.6vw,40px) auto 0;
  background:var(--tint); border-radius:18px;
  padding:clamp(22px,3vw,28px) clamp(20px,3vw,28px);
}
.rp__toc-t{ margin:0 0 14px; font-size:13px; font-weight:700; letter-spacing:-.02em; color:var(--green-deep); }
.rp__toc ol{ margin:0; padding:0; list-style:none; counter-reset:tc; display:grid; gap:10px; }
.rp__toc li{
  counter-increment:tc; position:relative; padding-left:28px;
  font-size:14.5px; line-height:1.65; color:var(--ink-soft);
}
.rp__toc li b{ color:var(--ink); font-weight:700; }
.rp__toc li::before{
  content:counter(tc); position:absolute; left:0; top:2px;
  display:grid; place-items:center; width:19px; height:19px;
  font-size:11px; font-weight:700; border-radius:50%;
  color:var(--green-ink); background:var(--green-soft);
}
.rp__toc--one{
  text-align:center; font-size:15.5px; font-weight:600;
  color:var(--ink); line-height:1.6; padding:18px clamp(20px,3vw,28px);
}

/* 표지 */
.rp__stamp{ margin:0; font-size:12.5px; color:var(--muted); }
.rp__keep{
  display:flex; align-items:flex-start; gap:11px; text-align:left;
  margin:clamp(26px,3.4vw,34px) 0 0;
  background:var(--green-mist); border:1px solid var(--green-soft);
  border-radius:16px; padding:18px 20px;
  font-size:15.5px; font-weight:600; line-height:1.6; letter-spacing:-.03em;
  color:var(--green-ink);
}
.rp__keep .emo{ width:19px; height:19px; flex:0 0 auto; margin-top:3px; }

/* 섹션 */
.rp__doc{ padding-top:clamp(36px,5vw,60px); }
.rsec{ padding-top:clamp(34px,4.4vw,52px); border-top:1px solid var(--line); margin-top:clamp(34px,4.4vw,52px); }
.rsec:first-child{ border-top:0; margin-top:0; padding-top:0; }
.rsec__n{
  margin:0 0 8px; font-family:var(--en, inherit);
  font-size:12px; font-weight:700; letter-spacing:.12em; color:var(--green);
}
.rsec__t{ font-size:clamp(19px,2.4vw,24px); font-weight:700; letter-spacing:-.04em; margin:0 0 8px; }
.rsec__note{ margin:0 0 20px; font-size:13.5px; color:var(--muted); }
.rsec__t + .rsec__p, .rsec__t + .rax, .rsec__t + .rdist,
.rsec__t + .rweek, .rsec__t + .rtrap, .rsec__t + .rfit{ margin-top:20px; }
.rsec__p{ font-size:16px; line-height:1.9; color:var(--ink-soft); margin:0 0 16px; }
.rsec__p b{ color:var(--ink); font-weight:700; }

/* 성향 축 */
.rax{ display:grid; gap:clamp(20px,2.6vw,26px); }
.rax__t{ margin:0 0 9px; font-size:13px; font-weight:700; color:var(--ink); }
.rax__bar{ display:flex; align-items:center; gap:12px; }
.rax__l, .rax__r{ flex:0 0 auto; width:72px; font-size:12.5px; color:var(--muted); }
.rax__r{ text-align:right; }
.rax__track{
  position:relative; flex:1 1 auto; height:8px;
  border-radius:999px; background:var(--tint);
}
.rax__track::before{
  content:""; position:absolute; left:50%; top:-4px; bottom:-4px;
  width:1px; background:var(--line);
}
.rax__track i{
  position:absolute; top:50%; width:18px; height:18px; border-radius:50%;
  transform:translate(-50%,-50%);
  background:var(--green); border:3px solid var(--white);
  box-shadow:0 2px 8px -2px rgba(26,26,26,.35);
}
.rax__read{ margin:9px 0 0; font-size:14px; color:var(--ink-soft); }

/* 유형 분포 */
.rdist{ display:grid; gap:11px; }
.rdist__row{ display:flex; align-items:center; gap:12px; font-size:14px; }
.rdist__n{ flex:0 0 auto; width:84px; color:var(--ink-soft); letter-spacing:-.03em; white-space:nowrap; }
.rdist__bar{ flex:1 1 auto; height:10px; border-radius:999px; background:var(--tint); overflow:hidden; }
.rdist__bar i{ display:block; height:100%; border-radius:999px; background:var(--blue-soft); }
.rdist__p{ flex:0 0 auto; width:40px; text-align:right; font-size:13px; color:var(--muted); }
.rdist__row.is-top .rdist__n{ color:var(--ink); font-weight:700; }
.rdist__row.is-top .rdist__bar i{ background:var(--green); }
.rdist__row.is-top .rdist__p{ color:var(--green-deep); font-weight:700; }
.rdist__row.is-zero{ opacity:.45; }

/* 고른 답 다시 보기 */
.rrec{
  margin-top:8px; background:var(--tint);
  border-radius:14px; padding:0 18px;
}
.rrec summary{
  cursor:pointer; list-style:none; padding:15px 0;
  font-size:14px; font-weight:600; color:var(--ink-soft);
}
.rrec summary::-webkit-details-marker{ display:none; }
.rrec summary::after{ content:" ▾"; color:var(--muted); }
.rrec[open] summary::after{ content:" ▴"; }
.rrec ol{ margin:0; padding:0 0 16px; list-style:none; counter-reset:rr; display:grid; gap:12px; }
.rrec li{ counter-increment:rr; display:grid; gap:3px; padding-left:26px; position:relative; }
.rrec li::before{
  content:counter(rr); position:absolute; left:0; top:1px;
  font-size:11.5px; font-weight:700; color:var(--muted);
}
.rrec li b{ font-size:13.5px; font-weight:500; color:var(--muted); }
.rrec li span{ font-size:14.5px; font-weight:600; color:var(--ink); letter-spacing:-.03em; }

/* 7일 */
.rweek{ margin:0; padding:0; list-style:none; display:grid; gap:1px; background:var(--line); border-radius:14px; overflow:hidden; }
.rweek li{ display:flex; align-items:center; gap:14px; background:var(--white); padding:14px 16px; }
.rweek li b{
  flex:0 0 auto; display:grid; place-items:center;
  width:26px; height:26px; border-radius:8px;
  font-size:12.5px; font-weight:700;
  color:var(--green-ink); background:var(--green-soft);
}
.rweek li span{ font-size:15px; letter-spacing:-.025em; color:var(--ink-soft); }

/* 함정 */
.rtrap{ margin:0; padding:0; list-style:none; display:grid; gap:11px; }
.rtrap li{
  position:relative; padding:15px 18px 15px 44px;
  background:var(--tint); border-radius:14px;
  font-size:15px; line-height:1.7; color:var(--ink-soft);
}
.rtrap li::before{
  content:"!"; position:absolute; left:16px; top:15px;
  display:grid; place-items:center; width:19px; height:19px;
  font-size:12px; font-weight:800; border-radius:50%;
  color:#FFFFFF; background:var(--blue);
}

/* 궁합 */
.rfit{ display:grid; grid-template-columns:1fr 1fr; gap:12px; }
.rfit__c{ border-radius:14px; padding:18px 18px 20px; }
.rfit__c--good{ background:var(--green-mist); }
.rfit__c--hard{ background:var(--tint); }
.rfit__h{ display:flex; align-items:center; gap:7px; margin:0 0 8px; font-size:13px; font-weight:700; color:var(--ink); }
.rfit__h .emo{ width:17px; height:17px; }
.rfit__c p:last-child{ margin:0; font-size:15px; line-height:1.6; letter-spacing:-.025em; color:var(--ink-soft); }

.rp__row--end{ margin-top:clamp(38px,5vw,56px); }

@media (max-width:560px){
  .rfit{ grid-template-columns:1fr; }
  .rax__l, .rax__r{ width:58px; font-size:11.5px; }
  .rdist__n{ width:74px; font-size:13px; }
}

/* ----------------------------------------------------------
   주마다 바뀌는 추천 (리포트 07 · 내 기록)
   ---------------------------------------------------------- */
.curation--one{ grid-template-columns:minmax(0,440px); gap:0; }
.rwk__w{ margin:0 0 12px; font-size:12.5px; font-weight:700; color:var(--green-deep); }
.rwk__why, .mes__why{
  display:flex; align-items:flex-start; gap:9px;
  margin:16px 0 0; font-size:14.5px; line-height:1.7; color:var(--ink-soft);
}
.rwk__why .emo, .mes__why .emo{ width:17px; height:17px; flex:0 0 auto; margin-top:4px; }

.metodo{
  margin-top:18px; background:var(--green-mist);
  border-radius:14px; padding:16px 18px;
}
.metodo__t{ margin:0 0 5px; font-size:12px; font-weight:700; color:var(--green-deep); }
.metodo__b{ margin:0; font-size:16px; font-weight:600; letter-spacing:-.03em; color:var(--green-ink); }

.rwk__next, .ml__next{ display:grid; grid-template-columns:1fr 1fr; gap:12px; margin-top:16px; }
.mnx{ background:var(--tint); border-radius:14px; padding:16px 18px; }
.mnx__w{ margin:0 0 6px; font-size:11.5px; font-weight:700; color:var(--muted); }
.mnx__s{ margin:0 0 10px; font-size:14.5px; font-weight:600; letter-spacing:-.03em; color:var(--ink-soft); }
.mnx__p{ display:flex; align-items:center; gap:6px; margin:0; font-size:12.5px; color:var(--muted); }
.mnx__p .emo{ width:14px; height:14px; }

.rwk__form, .ml__form{
  margin-top:clamp(24px,3vw,32px);
  border-top:1px solid var(--line); padding-top:clamp(22px,3vw,28px);
}
.rwk__form-t, .ml__form-t{ margin:0 0 12px; font-size:15.5px; font-weight:700; letter-spacing:-.03em; }
.qask__hint a{ color:var(--blue-deep); border-bottom:1px solid var(--blue-soft); text-decoration:none; }

/* ----------------------------------------------------------
   티니의 레터 (mail.html)
   ---------------------------------------------------------- */
.ml .wrap{ max-width:680px; }
.ml__head{ padding-top:clamp(30px,4.4vw,56px); }
.ml__head .h2, .ml__head .lede{ text-align:left; margin-inline:0; }
.ml__head .lede{ margin-top:12px; max-width:520px; }

.ml__bar{ margin:clamp(26px,3.4vw,38px) 0 clamp(18px,2.4vw,24px); }
.ml__bar-t{ display:block; margin-bottom:10px; font-size:13px; color:var(--muted); }
.ml__cats{ display:flex; flex-wrap:wrap; gap:8px; }
.ml__hint{
  display:flex; align-items:center; gap:9px; margin:0 0 18px;
  background:var(--blue-mist); border-radius:12px; padding:13px 16px;
  font-size:13.5px; color:var(--ink-soft);
}
.ml__hint .emo{ width:16px; height:16px; flex:0 0 auto; }
.ml__hint a{ color:var(--blue-deep); font-weight:600; text-decoration:none; border-bottom:1px solid var(--blue-soft); }

/* 메일 봉투 */
.ltr{
  border:1px solid var(--line); border-radius:18px; overflow:hidden;
  background:var(--white); box-shadow:var(--lift);
}
.ltr__head{
  display:flex; align-items:center; gap:11px;
  padding:16px 20px; border-bottom:1px solid var(--line); background:var(--tint);
}
.ltr__ava{
  flex:0 0 auto; display:grid; place-items:center;
  width:34px; height:34px; border-radius:50%; background:var(--white); border:1px solid var(--line);
}
.ltr__ava svg{ width:21px; height:21px; }
.ltr__from{ display:grid; min-width:0; }
.ltr__from b{ font-size:14px; font-weight:700; letter-spacing:-.03em; }
.ltr__from i{ font-style:normal; font-size:12px; color:var(--muted); }
.ltr__when{ margin-left:auto; flex:0 0 auto; font-size:12px; color:var(--muted); }

.ltr__subject{
  margin:0; padding:clamp(22px,3vw,28px) clamp(20px,3vw,30px) 0;
  font-size:clamp(19px,2.4vw,23px); font-weight:700; letter-spacing:-.04em; line-height:1.4;
}
.ltr__body{ padding:clamp(18px,2.4vw,24px) clamp(20px,3vw,30px) clamp(24px,3vw,32px); }
.ltr__hello{ margin:0 0 clamp(22px,3vw,28px); font-size:16px; line-height:1.8; color:var(--ink-soft); }
.ltr__n{
  margin:0 0 12px; font-size:11.5px; font-weight:700; letter-spacing:.06em; color:var(--green-deep);
}
.ltr__n:not(:first-of-type){ margin-top:clamp(26px,3.4vw,34px); }

.ltr__pick{
  display:flex; gap:14px; align-items:center;
  text-decoration:none; color:inherit;
  background:var(--tint); border-radius:14px; padding:12px;
}
.ltr__pick:hover b{ color:var(--blue-deep); }
.ltr__shot{
  position:relative; flex:0 0 auto; width:104px; aspect-ratio:4/3;
  border-radius:10px; overflow:hidden; background:var(--blue-mist);
}
.ltr__shot img{ width:100%; height:100%; object-fit:cover; display:block; }
.ltr__pick.is-locked .ltr__shot img{ filter:saturate(.5); opacity:.72; }
.ltr__shot .card__lock{ right:7px; top:7px; }
.ltr__shot .ic-lock{ width:18px; height:18px; }
.ltr__pt{ display:grid; gap:5px; min-width:0; }
.ltr__pt .tg{ justify-self:start; }
.ltr__pt b{ font-size:16px; font-weight:700; letter-spacing:-.035em; line-height:1.35; }
.ltr__pt i{ font-style:normal; font-size:13.5px; color:var(--ink-soft); }
.ltr__why{ display:flex; align-items:flex-start; gap:8px; margin:13px 0 0; font-size:14px; line-height:1.7; color:var(--ink-soft); }
.ltr__why .emo{ width:16px; height:16px; flex:0 0 auto; margin-top:3px; }

.ltr__todo{
  margin:0; background:var(--green-mist); border-radius:14px; padding:17px 19px;
  font-size:16.5px; font-weight:600; letter-spacing:-.03em; color:var(--green-ink);
}
.ltr__keep{
  margin:0; padding:0 0 0 16px; border-left:3px solid var(--blue-soft);
  font-size:16px; line-height:1.75; color:var(--ink);
}
.ltr__bye{ margin:clamp(26px,3.4vw,34px) 0 0; font-size:15px; color:var(--muted); }

.ltr__gate{ text-align:center; padding:clamp(26px,4vw,40px) 24px clamp(28px,4vw,40px); }
.ltr__ty{ display:block; width:92px; margin:0 auto 12px; }
.ltr__ty svg, .ltr__ty .pose-img{ display:block; width:100%; height:auto; overflow:visible; }
.ltr__gate p{ margin:0 0 6px; font-size:16px; }
.ltr__gate-s{ color:var(--muted); font-size:13.5px; margin-bottom:18px; }

.ltr__foot{
  display:flex; flex-wrap:wrap; gap:6px 16px; justify-content:center;
  padding:15px 20px; border-top:1px solid var(--line); background:var(--tint);
  font-size:11.5px; color:var(--muted);
}

.ml__next-t{
  margin:clamp(34px,4.4vw,50px) 0 0;
  font-size:15px; font-weight:700; letter-spacing:-.03em;
}

/* ----------------------------------------------------------
   내 쉼 기록 (me.html)
   ---------------------------------------------------------- */
.me .wrap{ max-width:720px; }
.me__head{ padding-top:clamp(30px,4.4vw,56px); }
.mehero{ display:flex; align-items:center; gap:clamp(16px,3vw,30px); }
.mehero__ty{ flex:0 0 auto; width:clamp(80px,12vw,112px); }
.mehero__ty svg, .mehero__ty .pose-img{ display:block; width:100%; height:auto; overflow:visible; }
.mehero__n{ font-size:clamp(28px,4.4vw,40px); font-weight:800; letter-spacing:-.045em; margin:0 0 6px; }
.mehero__l{ margin:0 0 10px; font-size:clamp(15px,1.9vw,17px); color:var(--blue-deep); font-weight:500; }
.mehero__d{ margin:0; font-size:12.5px; color:var(--muted); }
.mehero__d a{ color:var(--blue-deep); text-decoration:none; border-bottom:1px solid var(--blue-soft); }
.mehero--none .mehero__l{ color:var(--ink-soft); font-weight:400; font-size:15px; line-height:1.7; }
.mehero--none .mehero__d{ margin-top:16px; }

.me__doc{ padding-top:clamp(8px,1.4vw,14px); }
.mes{ padding-top:clamp(30px,4vw,44px); margin-top:clamp(30px,4vw,44px); border-top:1px solid var(--line); }
.mes--now{ border-top:0; }
.mes__t{ font-size:clamp(17px,2.2vw,21px); font-weight:700; letter-spacing:-.04em; margin:0 0 8px; }
.mes__t em{ font-style:normal; color:var(--green-deep); }
.mes__note{ margin:0 0 20px; font-size:13.5px; color:var(--muted); }
.mes__t + .curation, .mes__t + .melist{ margin-top:18px; }
.mes__empty{ margin:0; font-size:14.5px; color:var(--muted); }
.mes__empty a{ color:var(--blue-deep); font-weight:600; text-decoration:none; border-bottom:1px solid var(--blue-soft); }
.mes__go{
  display:inline-block; margin-top:18px; font-size:14px; font-weight:600;
  color:var(--green-deep); text-decoration:none; border-bottom:1.5px solid var(--green-soft);
}
.mes__ok{ display:flex; align-items:flex-start; gap:9px; margin:0; font-size:14.5px; line-height:1.7; color:var(--ink-soft); }
.mes__ok .emo{ width:17px; height:17px; flex:0 0 auto; margin-top:3px; }

.melist{ margin:0; padding:0; list-style:none; display:grid; gap:10px; }
.melist li{ background:var(--tint); border-radius:14px; padding:15px 18px; }
.melist li p{ margin:0; font-size:15px; line-height:1.7; letter-spacing:-.025em; color:var(--ink); }
.melist li span{ display:block; margin-top:7px; font-size:12.5px; color:var(--muted); }
.melist--q li{ background:var(--blue-mist); }

.me__fine{
  margin:clamp(34px,4.4vw,50px) 0 0; padding-top:clamp(22px,3vw,28px);
  border-top:1px solid var(--line);
  font-size:12.5px; line-height:1.75; color:var(--muted);
}

@media (max-width:620px){
  .rwk__next, .ml__next{ grid-template-columns:1fr; }
  .mehero{ flex-direction:column; text-align:center; }
  .ltr__pick{ flex-direction:column; align-items:stretch; }
  .ltr__shot{ width:100%; aspect-ratio:16/9; }
}

/* ----------------------------------------------------------
   계정 — 네비 · 시작하기 · 마이페이지
   ---------------------------------------------------------- */
.nav__me{
  flex:0 0 auto; display:flex; align-items:center; justify-content:center;
  width:38px; height:38px; padding:0;
  text-decoration:none; color:var(--ink);
  transition:color .2s var(--ease);
}
.nav__me:hover{ color:var(--blue); }
.nav__ini{ width:23px; height:23px; color:currentColor; }

/* 시작하기 */
.jn__box{
  max-width:440px; padding-top:clamp(40px,7vw,90px); text-align:center;
}
.jn__ty{ display:block; width:clamp(90px,14vw,118px); margin:0 auto 16px; }
.jn__ty svg, .jn__ty .pose-img{ display:block; width:100%; height:auto; overflow:visible; }
.jn__h1{ font-size:clamp(25px,4vw,34px); font-weight:800; letter-spacing:-.045em; margin:0 0 14px; }
.jn__lede{ font-size:15.5px; line-height:1.8; color:var(--ink-soft); margin:0 0 clamp(24px,3vw,32px); }
.jn__lede b{ color:var(--ink); }

.jn__form{ display:grid; gap:10px; text-align:left; }
.jn__lb{ font-size:12.5px; font-weight:700; color:var(--ink-soft); }
.jn__form input{
  font-family:inherit; font-size:16px; color:var(--ink);
  background:var(--white); border:1px solid var(--line); border-radius:13px;
  padding:15px 17px; width:100%; box-sizing:border-box;
  transition:border-color .2s var(--ease);
}
.jn__form input:focus{ outline:none; border-color:var(--green); }
.jn__err{ margin:0; font-size:13px; color:#C0483C; }
.jn__go{ width:100%; margin-top:4px; }
.jn__prev{ width:100%; }
.jn__go2{ display:flex; flex-wrap:wrap; justify-content:center; gap:10px; }

.jn__back-acc{
  display:flex; align-items:center; gap:11px; width:100%; text-align:left;
  font-family:inherit; cursor:pointer;
  background:var(--green-mist); border:1px solid var(--green-soft); border-radius:14px;
  padding:14px 16px; margin-bottom:16px;
}
.jn__back-acc:hover{ border-color:var(--green); }
.jn__back-acc .emo{ width:20px; height:20px; flex:0 0 auto; }
.jn__back-acc span{ display:grid; gap:2px; min-width:0; }
.jn__back-acc b{ font-size:14.5px; font-weight:600; color:var(--green-ink); }
.jn__back-acc i{ font-style:normal; font-size:12.5px; color:var(--ink-soft); }

.jn__fine{
  display:flex; align-items:flex-start; gap:9px; text-align:left;
  margin:clamp(26px,3.4vw,34px) 0 0; padding-top:clamp(20px,2.6vw,26px);
  border-top:1px solid var(--line);
  font-size:12.5px; line-height:1.75; color:var(--muted);
}
.jn__fine .emo{ width:15px; height:15px; flex:0 0 auto; margin-top:3px; }

/* 마이페이지 계정 머리 */
.acc{ display:flex; align-items:center; gap:16px; }
.acc__ini{
  flex:0 0 auto; display:grid; place-items:center;
  width:clamp(54px,8vw,68px); height:clamp(54px,8vw,68px); border-radius:50%;
  font-size:clamp(22px,3vw,28px); font-weight:800; color:#FFFFFF; background:var(--green);
}
.acc__txt{ min-width:0; }
.acc__n{ font-size:clamp(22px,3.2vw,29px); font-weight:800; letter-spacing:-.045em; margin:0 0 3px; }
.acc__e{ margin:0; font-size:13.5px; color:var(--muted); word-break:break-all; }
.acc__plan{
  margin-left:auto; flex:0 0 auto;
  font-size:12px; font-weight:700; letter-spacing:-.02em;
  color:var(--ink-soft); background:var(--tint);
  padding:6px 13px; border-radius:999px;
}
.acc__plan.is-paid{ color:#FFFFFF; background:var(--green); }

/* 멤버십 상태 */
.plan2{ background:var(--tint); border-radius:16px; padding:clamp(20px,2.8vw,26px); }
.plan2__l{ margin:0 0 4px; font-size:12px; font-weight:700; color:var(--muted); }
.plan2__v{ margin:0 0 14px; font-size:21px; font-weight:800; letter-spacing:-.04em; color:var(--ink); }
.plan2__v em{ font-style:normal; font-size:12px; font-weight:700; color:var(--green-deep);
  background:var(--green-soft); padding:4px 10px; border-radius:999px; vertical-align:middle; }
.plan2__d{ margin:0 0 18px; font-size:14.5px; line-height:1.75; color:var(--ink-soft); }
.plan2__row{ display:flex; flex-wrap:wrap; gap:10px; }
.mes__fine{
  display:flex; align-items:flex-start; gap:8px; margin:14px 0 0;
  font-size:12.5px; line-height:1.7; color:var(--muted);
}
.mes__fine .emo{ width:15px; height:15px; flex:0 0 auto; margin-top:3px; }
.mes--danger .me__fine{ border-top:0; padding-top:14px; margin-top:0; }
.btn.is-warn{ color:#C0483C; border-color:#E9C4BF; }

/* 멤버십이면 열리는 다음 주 레터 */
.mnx.is-open{ background:var(--green-mist); }
.mnx__go{
  display:inline-block; font-size:13px; font-weight:600;
  color:var(--green-deep); text-decoration:none; border-bottom:1.5px solid var(--green-soft);
}

/* ----------------------------------------------------------
   무물 아카이브 (ask.html)
   ---------------------------------------------------------- */
.ak .wrap{ max-width:760px; }
.ak__head{ padding-top:clamp(30px,4.4vw,58px); text-align:center; }
.ak__ty{ display:block; width:clamp(92px,14vw,120px); margin:0 auto 14px; }
.ak__ty svg, .ak__ty .pose-img{ display:block; width:100%; height:auto; overflow:visible; }
.ak__head .lede{ margin-top:12px; }

.lst__cats .lcat i{
  font-style:normal; margin-left:6px; font-size:11.5px; font-weight:700;
  color:var(--muted);
}
.lcat.is-on i{ color:var(--green-deep); }

.qas{ display:grid; gap:clamp(14px,2vw,18px); }
.qa{
  position:relative;
  border:1px solid var(--line); border-radius:18px;
  padding:clamp(20px,2.6vw,26px) clamp(18px,2.4vw,24px) clamp(18px,2.4vw,22px);
  background:var(--white);
  transition:border-color .2s var(--ease);
}
.qa.is-open{ border-color:var(--green-soft); }

.qa__q{ display:flex; gap:11px; align-items:flex-start; margin-bottom:16px; }
.qa__mark{
  flex:0 0 auto; display:grid; place-items:center;
  width:24px; height:24px; border-radius:50%;
  font-size:12px; font-weight:800;
  color:var(--blue-deep); background:var(--blue-soft);
}
.qa__q p{
  margin:0; font-size:clamp(16px,2vw,17.5px); font-weight:600;
  letter-spacing:-.035em; line-height:1.55; color:var(--ink);
}

.qa__a{ display:flex; gap:12px; align-items:flex-start; }
.qa__ty{ flex:0 0 auto; width:clamp(56px,9vw,74px); margin-top:-4px; }
.qa__ty svg, .qa__ty .pose-img{ display:block; width:100%; height:auto; overflow:visible; }
.qa__bub{
  flex:1 1 auto; min-width:0;
  background:var(--green-mist); border-radius:4px 16px 16px 16px;
  padding:15px 18px;
}
.qa__bub p{ margin:0; font-size:15.5px; line-height:1.75; letter-spacing:-.025em; color:var(--green-ink); }
.qa__more{
  margin-top:12px !important; padding-top:12px;
  border-top:1px solid rgba(30,122,85,.16);
  color:var(--ink-soft) !important; font-size:14.5px !important;
}
.qa__btn{
  margin:14px 0 0; padding:0; border:0; background:none; cursor:pointer;
  font-family:inherit; font-size:13.5px; font-weight:600;
  color:var(--green-deep); border-bottom:1.5px solid var(--green-soft);
}
.qa__btn:hover{ border-bottom-color:var(--green); }
.qa__cat{
  position:absolute; right:clamp(18px,2.4vw,24px); top:clamp(20px,2.6vw,26px);
  font-size:11.5px; color:var(--muted);
}

.ak__form{
  display:flex; align-items:center; gap:clamp(14px,2.4vw,24px);
  margin-top:clamp(36px,4.6vw,56px);
  background:var(--tint); border-radius:20px;
  padding:clamp(22px,3vw,30px) clamp(20px,3vw,30px);
}
.ak__fty{ flex:0 0 auto; width:clamp(72px,11vw,96px); }
.ak__fty svg, .ak__fty .pose-img{ display:block; width:100%; height:auto; overflow:visible; }
.ak__fin{ flex:1 1 auto; min-width:0; }
.ak__ft{ margin:0 0 4px; font-size:17px; font-weight:700; letter-spacing:-.035em; }
.ak__fs{ margin:0 0 14px; font-size:13.5px; color:var(--muted); }

@media (max-width:560px){
  .qa__cat{ position:static; display:block; margin-top:12px; }
  .ak__form{ flex-direction:column; text-align:center; }
  .ak__fty{ width:110px; }
}

/* ----------------------------------------------------------
   소셜 로그인 버튼
   ---------------------------------------------------------- */
.sbs{ display:grid; gap:9px; text-align:left; }
.sb{
  display:flex; align-items:center; justify-content:center; gap:10px;
  width:100%; padding:14px 18px; cursor:pointer;
  font-family:inherit; font-size:15px; font-weight:600; letter-spacing:-.03em;
  border-radius:13px; border:1px solid var(--line);
  transition:transform .15s var(--ease), box-shadow .15s var(--ease), opacity .15s var(--ease);
}
.sb:hover{ transform:translateY(-1px); box-shadow:0 6px 16px -10px rgba(26,26,26,.5); }
.sb:disabled{ opacity:.6; cursor:default; transform:none; }
.sb__i{ width:18px; height:18px; flex:0 0 auto; }
.sb--google{ background:#FFFFFF; color:#1F1F1F; }
.sb--kakao{ background:#FEE500; color:#191600; border-color:#FEE500; }

.sbor{
  position:relative; text-align:center;
  margin:clamp(18px,2.4vw,24px) 0 clamp(14px,2vw,18px);
}
.sbor::before{
  content:""; position:absolute; left:0; right:0; top:50%;
  height:1px; background:var(--line);
}
.sbor span{
  position:relative; padding:0 12px;
  background:var(--white); font-size:12.5px; color:var(--muted);
}

.jn__demo{
  display:flex; align-items:flex-start; gap:9px; text-align:left;
  margin:clamp(20px,2.6vw,26px) 0 0;
  background:var(--blue-mist); border-radius:13px; padding:14px 16px;
  font-size:13px; line-height:1.7; color:var(--ink-soft);
}
.jn__demo .emo{ width:16px; height:16px; flex:0 0 auto; margin-top:3px; }
.jn__demo b{ color:var(--ink); }
.jn__fine b{ color:var(--ink-soft); font-weight:600; }

.acc__via{ display:block; margin-top:3px; font-size:12px; color:var(--muted); }

/* ----------------------------------------------------------
   손그림 기호 — 화살표 · 체크 · 하트 · 발자국
   전부 currentColor 라 글자색을 그대로 따라갑니다.
   ---------------------------------------------------------- */
.mk{
  display:inline-block; vertical-align:-.12em;
  width:1.15em; height:.72em; overflow:visible;
  transition:transform .22s var(--ease);
}
.mk--arw{ margin-left:.4em; }
.mk--back{ margin:0 .42em 0 0; transform:scaleX(-1); }

/* 링크·버튼에 붙으면 hover 때 살짝 나아간다 */
a:hover > .mk--arw, button:hover > .mk--arw,
a:hover .mk--arw, button:hover .mk--arw{ transform:translateX(3px); }
a:hover .mk--back, button:hover .mk--back{ transform:scaleX(-1) translateX(3px); }

/* 멤버십 비교표 */
.pt__yes, .pt__no{ display:inline-block; line-height:0; }
.pt__yes .mk{ width:21px; height:17px; color:var(--green-deep); }
.pt__no  .mk{ width:21px; height:17px; color:#CBCCCE; }

/* 좋아요 */
.likes__heart .mk{ width:17px; height:17px; vertical-align:-.22em; }
.likes__btn.is-on .likes__heart .mk{ fill:currentColor; }

/* 뒤로가기 링크 */
.pg__back{ display:inline-flex; align-items:center; }
.pg__back .mk{ width:1.05em; height:.7em; }

/* 손그림 밑줄 - 본문 안내 링크에 */
.cur__go, .mes__go, .rest__more, .vault__cta a, .find__next a, .mehero__d a{
  position:relative; display:inline-block;
  text-decoration:none; border-bottom:0 !important;
  padding-bottom:5px;
}
.cur__go::after, .mes__go::after, .rest__more::after,
.vault__cta a::after, .find__next a::after, .mehero__d a::after{
  content:""; position:absolute; left:0; right:0; bottom:0; height:6px;
  background:currentColor;
  -webkit-mask:var(--uline) left bottom/auto 6px repeat-x;
          mask:var(--uline) left bottom/auto 6px repeat-x;
  opacity:.45; transition:opacity .22s var(--ease);
}
.cur__go:hover::after, .mes__go:hover::after, .rest__more:hover::after,
.vault__cta a:hover::after, .find__next a:hover::after, .mehero__d a:hover::after{ opacity:1; }

/* 좁은 화면에선 이모지가 커진 만큼 궤도를 조금 벌려준다.
   단, 링 반지름(43vw)에 너무 바짝 붙이면 버튼 절반 폭(23px)만큼
   링 밖으로 튀어나가 페이지가 가로로 밀린다 — 26px 여유를 둔다 */
@media (max-width:560px){
  .orb{ transform:rotate(var(--deg)) translateY(calc((40vw - 26px) * -1)); }
  .ring__center{ width:56%; }
  .orb__in .emo{ width:38px; height:38px; }
}

/* 마침표는 브랜드색으로 */
.dot{ font-style:normal; color:var(--green); }
.rp__keep .dot, .metodo__b .dot{ color:var(--green); opacity:.75; }
.ring__text .dot{ color:var(--green); }

/* 준비 중 / 이벤트 표시 */
.pt__flag--ev{ background:var(--blue); }
.promo__tag--soon{ background:rgba(255,255,255,.24); }
.pt__h .pt__price{ letter-spacing:-.04em; }

/* ----------------------------------------------------------
   랜딩 쉼 리포트 - 예시 리포트 카드
   ---------------------------------------------------------- */
.rmock{ position:relative; display:block; }
.rmock__card{
  background:var(--white);
  border:1px solid var(--line); border-radius:20px;
  padding:clamp(18px,2.2vw,22px);
  transform:rotate(-1.4deg);
  transition:transform .4s var(--ease);
}
.rpt:hover .rmock__card{ transform:rotate(0deg) translateY(-3px); }

.rmock__top{ text-align:center; padding-bottom:15px; }
.rmock__ty{ display:block; width:74px; margin:0 auto 6px; }
.rmock__ty svg, .rmock__ty .pose-img, .rmock__ty img{ display:block; width:100%; height:auto; overflow:visible; }
.rmock__name{ margin:0 0 3px; font-size:19px; font-weight:800; letter-spacing:-.045em; color:var(--ink); }
.rmock__line{ margin:0; font-size:11.5px; color:var(--blue-deep); font-weight:500; }

.rmock__sec{ padding-top:13px; margin-top:13px; border-top:1px solid var(--line); }
.rmock__h{
  margin:0 0 10px; font-size:10px; font-weight:700;
  letter-spacing:.04em; color:var(--green-deep);
}

/* 성향 축 */
.rmock__axrow{ display:flex; align-items:center; gap:7px; margin-bottom:9px; }
.rmock__axrow:last-child{ margin-bottom:0; }
.rmock__axl, .rmock__axr{
  flex:0 0 auto; width:40px; font-size:9.5px; color:var(--muted); line-height:1.2;
}
.rmock__axr{ text-align:right; }
.rmock__ax{ position:relative; flex:1 1 auto; height:6px; border-radius:999px; background:var(--tint); }
.rmock__ax::before{
  content:""; position:absolute; left:50%; top:-3px; bottom:-3px; width:1px; background:var(--line);
}
.rmock__ax i{
  position:absolute; top:50%; width:12px; height:12px; border-radius:50%;
  transform:translate(-50%,-50%);
  background:var(--green); border:2.5px solid var(--white);
}

/* 유형 분포 */
.rmock__bar{ display:flex; align-items:center; gap:8px; margin-bottom:7px; }
.rmock__bar:last-child{ margin-bottom:0; }
.rmock__bn{ flex:0 0 auto; width:38px; font-size:10px; color:var(--ink-soft); letter-spacing:-.03em; }
.rmock__track{ flex:1 1 auto; height:7px; border-radius:999px; background:var(--tint); overflow:hidden; }
.rmock__track i{ display:block; height:100%; border-radius:999px; background:var(--blue-soft); }
.rmock__track i.is-top{ background:var(--green); }
.rmock__bp{ flex:0 0 auto; width:26px; text-align:right; font-size:9.5px; color:var(--muted); }
.rmock__bar:first-of-type .rmock__bn{ color:var(--ink); font-weight:700; }
.rmock__bar:first-of-type .rmock__bp{ color:var(--green-deep); font-weight:700; }

/* 해볼 것 */
.rmock__tip{ display:flex; align-items:flex-start; gap:8px; margin:0 0 8px; }
.rmock__tip:last-child{ margin-bottom:0; }
.rmock__tip b{
  flex:0 0 auto; display:grid; place-items:center;
  width:16px; height:16px; border-radius:50%; margin-top:1px;
  font-size:9px; font-weight:700;
  color:var(--green-ink); background:var(--green-soft);
}
.rmock__tip span{ font-size:11.5px; line-height:1.5; letter-spacing:-.03em; color:var(--ink-soft); }



/* 카드 둘레에 뿌려둔 손그림 낙서 */
.rmock{ isolation:isolate; }
.rmock__sp{
  position:absolute; display:block; z-index:-1;
  pointer-events:none; line-height:0;
  animation:tw 3.8s var(--ease) infinite;
}
.rmock__sp svg{ display:block; width:100%; height:auto; overflow:visible; }

/* 크기랑 각도만 움직입니다. 투명도는 건드리지 않아요 */
@keyframes tw{
  0%, 100%{ transform:rotate(var(--r,0deg)) scale(1); }
  50%     { transform:rotate(calc(var(--r,0deg) + 12deg)) scale(.7); }
}
/* 반짝이가 아닌 낙서는 더 느긋하게 */
.rmock__sp.is-cloud, .rmock__sp.is-wave,
.rmock__sp.is-ring, .rmock__sp.is-heart{ animation-name:sway; animation-duration:5.4s; }
@keyframes sway{
  0%, 100%{ transform:rotate(var(--r,0deg)) translateY(0); }
  50%     { transform:rotate(calc(var(--r,0deg) - 5deg)) translateY(-5px); }
}
.rmock__sp.is-dots{ animation-name:sway; animation-duration:4.6s; }
.rpt:hover .rmock__sp{ animation-duration:1.8s; }

/* 1 - 우측 상단 /// */
.rmock__sp--1{ width:30px; top:-30px; right:2px; color:var(--green); --r:-10deg; animation-delay:0s; }

/* 2~4 왼쪽 · 5~7 오른쪽 - 같은 높이에 좌우 대칭으로 */
.rmock__sp--2{ width:32px; top:20%; left:-46px;  color:var(--green);     --r:-8deg; animation-delay:.6s; }
.rmock__sp--3{ width:30px; top:48%; left:-48px;  color:var(--blue-soft); --r:-4deg; animation-delay:1.4s; }
.rmock__sp--4{ width:24px; top:76%; left:-42px;  color:var(--green-soft);--r:10deg; animation-delay:2.2s; }

.rmock__sp--5{ width:24px; top:20%; right:-42px; color:var(--green-soft);--r:8deg;  animation-delay:1.8s; }
.rmock__sp--6{ width:30px; top:48%; right:-48px; color:var(--blue-soft); --r:4deg;  animation-delay:1.0s; }
.rmock__sp--7{ width:32px; top:76%; right:-46px; color:var(--green);     --r:-10deg;animation-delay:2.6s; }

@media (prefers-reduced-motion:reduce){
  .rmock__sp{ animation:none; transform:rotate(var(--r,0deg)); }
}

/* 카드 밖으로 40px 넘게 튀어나오는 반짝이 장식들 — 양옆 여백이 그만큼 없으면
   페이지가 가로로 밀린다. 리포트 칸이 2단인 동안에도 1000px 아래로 내려가면
   카드가 오른쪽 끝에 붙어 장식이 화면 밖으로 나간다(761~999px에서 24px까지
   밀렸다). 여백이 확실한 1000px 위에서만 보여준다. */
@media (max-width:1000px){
  .rmock__sp{ display:none; }
}

@media (max-width:760px){
  .rmock__card{ max-width:340px; margin-inline:auto; transform:none; }
}

/* 성향 축 */
.rmock__ax{ position:relative; height:7px; border-radius:999px; background:var(--tint); }
.rmock__ax::before{
  content:""; position:absolute; left:50%; top:-3px; bottom:-3px; width:1px; background:var(--line);
}
.rmock__ax i{
  position:absolute; top:50%; width:13px; height:13px; border-radius:50%;
  transform:translate(-50%,-50%);
  background:var(--green); border:2.5px solid var(--white);
}

/* 유형 분포 */
.rmock__bar{ display:flex; align-items:center; gap:9px; }
.rmock__track{ flex:1 1 auto; height:8px; border-radius:999px; background:var(--tint); overflow:hidden; }
.rmock__track i{ display:block; height:100%; border-radius:999px; background:var(--blue-soft); }
.rmock__track i.is-top{ background:var(--green); }

/* 해볼 것 */
.rmock__tip{ display:flex; align-items:center; gap:9px; margin:0; }
.rmock__tip b{
  flex:0 0 auto; display:grid; place-items:center;
  width:17px; height:17px; border-radius:50%;
  font-size:9.5px; font-weight:700;
  color:var(--green-ink); background:var(--green-soft);
}


@media (max-width:760px){
  .rmock__card{ max-width:330px; margin-inline:auto; transform:none; }
}

/* ----------------------------------------------------------
   얼굴 아바타
   ---------------------------------------------------------- */
.face{ display:block; width:100%; height:auto; }

.fpick{
  display:grid; grid-template-columns:repeat(6, 1fr); gap:8px;
  margin:clamp(20px,2.6vw,26px) 0;
}
.fpick__b{
  padding:7px; cursor:pointer; line-height:0;
  background:var(--white); border:1.5px solid var(--line); border-radius:13px;
  transition:border-color .18s var(--ease), transform .18s var(--ease), background .18s var(--ease);
}
.fpick__b:hover{ transform:translateY(-2px); border-color:var(--green-soft); }
.fpick__b.is-on{ border-color:var(--green); background:var(--green-mist); }
.fpick--inline{ margin:16px 0 0; }

.jn__face{ display:block; width:96px; margin:0 auto 10px; }

.acc__face{
  position:relative; flex:0 0 auto; padding:0; cursor:pointer;
  width:clamp(58px,9vw,74px); line-height:0;
  background:var(--tint); border:1.5px solid var(--line); border-radius:50%;
  overflow:hidden;
  transition:border-color .2s var(--ease);
}
.acc__face:hover{ border-color:var(--green); }
.acc__face i{
  position:absolute; left:0; right:0; bottom:0;
  font-style:normal; font-size:9.5px; line-height:15px;
  color:#FFFFFF; background:rgba(26,26,26,.55);
  opacity:0; transition:opacity .2s var(--ease);
}
.acc__face:hover i{ opacity:1; }

/* ----------------------------------------------------------
   후기 (지어낸 예시)
   ---------------------------------------------------------- */
.revs{ background:var(--white); }
.revs__grid{
  margin-top:clamp(30px,4vw,44px);
  display:grid; grid-template-columns:repeat(3,1fr);
  gap:clamp(14px,2vw,20px);
}
.rev{
  margin:0; display:flex; flex-direction:column; gap:16px;
  background:var(--tint); border-radius:18px;
  padding:clamp(20px,2.6vw,26px);
}
.rev blockquote{
  margin:0; flex:1 1 auto;
  font-size:15px; line-height:1.8; letter-spacing:-.025em; color:var(--ink-soft);
}
.rev figcaption{ display:flex; align-items:center; gap:10px; }
.rev__face{
  flex:0 0 auto; width:40px; height:40px; line-height:0;
  background:var(--white); border-radius:50%; padding:4px; box-sizing:border-box;
}
.rev__face .face{ height:100%; object-fit:contain; }
.rev__who{ display:grid; gap:2px; min-width:0; }
.rev__who b{ font-size:14px; font-weight:700; letter-spacing:-.03em; color:var(--ink); }
.rev__who i{ font-style:normal; font-size:11.5px; color:var(--muted); }

.revs__fine{
  margin:clamp(22px,3vw,28px) 0 0; text-align:center;
  font-size:12px; color:var(--muted);
}

/* ----------------------------------------------------------
   소개 페이지
   ---------------------------------------------------------- */
.ab .wrap{ max-width:680px; }
.ab__hero{ padding-top:clamp(34px,5vw,66px); text-align:center; }
.ab__ty{ display:block; width:clamp(96px,15vw,130px); margin:0 auto 14px; }
.ab__h1{
  font-size:clamp(30px,5.2vw,46px); font-weight:800;
  letter-spacing:-.05em; margin:0 0 16px;
}
.ab__lede{ font-size:16.5px; line-height:1.85; color:var(--ink-soft); margin:0; }
.ab__lede b{ color:var(--ink); font-weight:700; }

.ab__doc{ padding-top:clamp(18px,2.4vw,26px); }
.abs{ padding-top:clamp(34px,4.6vw,54px); margin-top:clamp(34px,4.6vw,54px); border-top:1px solid var(--line); }
.abs__n{ margin:0 0 8px; font-size:12px; font-weight:700; letter-spacing:.12em; color:var(--green); }
.abs__t{ font-size:clamp(20px,2.6vw,26px); font-weight:700; letter-spacing:-.04em; margin:0 0 18px; }
.abs__p{ font-size:16px; line-height:1.92; color:var(--ink-soft); margin:0 0 18px; }
.abs__p b{ color:var(--ink); font-weight:700; }
.abs__mail{ margin:0; font-size:15px; color:var(--ink-soft); }
.abs__mail a{ color:var(--green-deep); font-weight:600; }

.ab__cast{ display:flex; align-items:flex-start; gap:clamp(16px,2.6vw,26px); }
.ab__cast-ty{ flex:0 0 auto; width:clamp(84px,13vw,112px); }

.ab__rules{ margin:0; padding:0; list-style:none; counter-reset:ar; display:grid; gap:14px; }
.ab__rules li{
  counter-increment:ar; position:relative; padding-left:36px;
  display:grid; gap:4px;
}
.ab__rules li::before{
  content:counter(ar); position:absolute; left:0; top:1px;
  display:grid; place-items:center; width:24px; height:24px;
  font-size:12px; font-weight:700; border-radius:50%;
  color:var(--green-ink); background:var(--green-soft);
}
.ab__rules b{ font-size:16.5px; font-weight:700; letter-spacing:-.035em; color:var(--ink); }
.ab__rules span{ font-size:15px; line-height:1.75; color:var(--ink-soft); }

.ab__grid{ display:grid; grid-template-columns:1fr 1fr; gap:12px; }
.abg{
  display:grid; gap:6px; text-decoration:none; color:inherit;
  background:var(--tint); border-radius:16px; padding:20px 20px 18px;
  transition:transform .2s var(--ease), background .2s var(--ease);
}
.abg:hover{ transform:translateY(-2px); background:var(--green-mist); }
.abg__e{ line-height:0; margin-bottom:2px; }
.abg__e .emo{ width:24px; height:24px; }
.abg b{ font-size:16px; font-weight:700; letter-spacing:-.035em; }
.abg i{ font-style:normal; font-size:13.5px; line-height:1.6; color:var(--ink-soft); }
.abg__go{ margin-top:6px; font-size:13px; font-weight:600; color:var(--green-deep); }

@media (max-width:860px){
  .revs__grid{ grid-template-columns:1fr 1fr; }
}
@media (max-width:620px){
  .revs__grid{ grid-template-columns:1fr; }
  .ab__grid{ grid-template-columns:1fr; }
  .ab__cast{ flex-direction:column; align-items:center; text-align:center; }
  .fpick{ grid-template-columns:repeat(4, 1fr); }
}

/* 소개 - 이름 뜻 카드 */
.ab__word{
  display:grid; gap:10px; text-align:left;
  max-width:420px; margin:clamp(26px,3.4vw,36px) auto 0;
  background:var(--tint); border-radius:18px;
  padding:clamp(20px,2.6vw,26px);
}
.ab__word-w{
  font-family:"Baloo 2", var(--kr); font-size:34px; font-weight:800;
  letter-spacing:-.03em; color:var(--blue-deep); line-height:1;
}
.ab__word-m{ font-size:14.5px; font-weight:600; letter-spacing:-.03em; color:var(--ink); }
.ab__word-e{
  padding-left:14px; border-left:2.5px solid var(--blue-soft);
  font-size:13px; line-height:1.75; color:var(--muted);
}
.ab__word-e b{ color:var(--ink-soft); font-weight:700; }
.ab__word-e i{ font-style:normal; }