/* 모듈 — 섹션 단위로 바로 가져다 쓰는 큰 덩어리들 */

/* ══ 그라데이션 패널 ═══════════════════════════════════
   큰 라운드 패널에 은은한 그라데이션을 깔고, 왼쪽에 큰 제목,
   오른쪽에 흰 알약 목록을 세운다. 목록이 길어도 지루하지 않다. */
.panel{position:relative;border-radius:var(--r-3xl);padding:48px;overflow:hidden;
  background:var(--canvas-alt)}
@media (max-width:767px){.panel{padding:32px 24px;border-radius:var(--r-2xl)}}
.panel--sky{background:linear-gradient(135deg,#E3F0FF 0%,#EAF5FF 45%,#F3F8FF 100%)}
.panel--sun{background:linear-gradient(135deg,#FFF6DA 0%,#FFF9E6 50%,#FFFDF4 100%)}
.panel--mint{background:linear-gradient(135deg,#DFF5EC 0%,#EDFAF5 55%,#F6FCFA 100%)}
.panel--lilac{background:linear-gradient(135deg,#EFE8FF 0%,#F5F0FF 55%,#FAF7FF 100%)}
[data-theme="dark"] .panel--sky{background:linear-gradient(135deg,#16283D 0%,#131F2E 60%,#111922 100%)}
[data-theme="dark"] .panel--sun{background:linear-gradient(135deg,#2E2716 0%,#231E13 60%,#1A1710 100%)}
[data-theme="dark"] .panel--mint{background:linear-gradient(135deg,#132B24 0%,#10211C 60%,#0E1A16 100%)}
[data-theme="dark"] .panel--lilac{background:linear-gradient(135deg,#251E38 0%,#1C1829 60%,#16131F 100%)}
@media (prefers-color-scheme:dark){:root:not([data-theme="light"]){
  .panel--sky{background:linear-gradient(135deg,#16283D 0%,#131F2E 60%,#111922 100%)}
  .panel--sun{background:linear-gradient(135deg,#2E2716 0%,#231E13 60%,#1A1710 100%)}
  .panel--mint{background:linear-gradient(135deg,#132B24 0%,#10211C 60%,#0E1A16 100%)}
  .panel--lilac{background:linear-gradient(135deg,#251E38 0%,#1C1829 60%,#16131F 100%)}}}
.panel__grid{display:grid;gap:32px;align-items:center}
@media (min-width:900px){.panel__grid{grid-template-columns:minmax(0,1fr) minmax(0,1.1fr);gap:48px}}

/* 흰 알약 목록 — 누를 수 있는 행 */
.pilllist{display:flex;flex-direction:column;gap:10px}
.pillrow{display:flex;align-items:center;gap:16px;min-height:72px;padding:16px 20px 16px 26px;
  background:var(--surface);border-radius:var(--r-full);
  font-size:var(--t-body-md);font-weight:600;color:var(--ink);letter-spacing:-.01em;cursor:pointer;
  transition:transform var(--d-3) var(--ease-out),box-shadow var(--d-3) var(--ease-out)}
.pillrow__text{flex:1;min-width:0}
.pillrow__chev{flex:none;color:var(--ink-subtle);transition:transform var(--d-3) var(--ease-out)}
@media (hover:hover){
  .pillrow:hover{transform:translateX(4px);box-shadow:var(--sh-md)}
  .pillrow:hover .pillrow__chev{transform:translateX(3px);color:var(--ink)}
}
@media (max-width:640px){.pillrow{min-height:62px;padding:14px 16px 14px 20px;font-size:var(--t-body-sm)}}

/* ══ 펼침 사진 카드 ════════════════════════════════════
   사진 위에 제목이 얹히고, 원형 + 버튼을 누르면 설명이 펼쳐진다. */
.photocard{position:relative;display:block;width:100%;text-align:left;
  border-radius:var(--r-xl);overflow:hidden;background:var(--neutral-800);
  aspect-ratio:16/11;cursor:pointer;isolation:isolate}
.photocard__img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;
  transition:transform var(--d-6) var(--ease-out)}
.photocard::after{content:"";position:absolute;inset:0;z-index:1;
  background:linear-gradient(180deg,rgba(10,14,20,.28) 0%,rgba(10,14,20,.10) 38%,rgba(10,14,20,.72) 100%)}
@media (hover:hover){.photocard:hover .photocard__img{transform:scale(1.04)}}
.photocard__inner{position:relative;z-index:2;display:flex;flex-direction:column;
  justify-content:flex-end;gap:14px;height:100%;padding:28px}
.photocard__title{color:#fff;font-size:var(--t-heading-md);line-height:var(--t-heading-md-lh);
  letter-spacing:var(--t-heading-md-ls);font-weight:700;max-width:22rem}
.photocard__plus{position:absolute;top:24px;right:24px;
  display:grid;place-items:center;width:38px;height:38px;border-radius:50%;
  border:1.5px solid rgba(255,255,255,.65);color:#fff;flex:none;
  transition:transform var(--d-3) var(--ease-out),background-color var(--d-2) var(--ease-inout)}
.photocard[aria-expanded="true"] .photocard__plus{transform:rotate(45deg);background:rgba(255,255,255,.18)}
.photocard__more{color:rgba(255,255,255,.86);font-size:var(--t-body-sm);line-height:1.6;
  max-width:26rem;
  display:grid;grid-template-rows:0fr;opacity:0;
  transition:grid-template-rows var(--d-4) var(--ease-inout),opacity var(--d-3) var(--ease-inout)}
.photocard__more > span{overflow:hidden}
.photocard[aria-expanded="true"] .photocard__more{grid-template-rows:1fr;opacity:1}

/* ══ 인용 캐러셀 ═══════════════════════════════════════ */
.quotes{position:relative;text-align:center}
.quotes__track{position:relative;z-index:0}
.quotes__track{overflow:hidden}
.quotes__rail{display:flex;transition:transform var(--d-5) var(--ease-out)}
.quotes__item{flex:0 0 100%;padding-inline:56px;display:flex;flex-direction:column;
  align-items:center;gap:22px}
@media (max-width:640px){.quotes__item{padding-inline:8px}}
.quotes__face{width:72px;height:72px;border-radius:50%;object-fit:cover;background:var(--canvas-sunken)}
.quotes__text{font-size:var(--t-body-lg);line-height:1.75;color:var(--ink-body);max-width:44rem;
  text-wrap:pretty}
.quotes__by{font-size:var(--t-body-sm);color:var(--ink-subtle)}
.quotes__nav{position:absolute;top:50%;translate:0 -50%;z-index:2;width:40px;height:40px;border-radius:50%;
  display:grid;place-items:center;background:var(--surface);color:var(--ink-muted);
  box-shadow:var(--sh-sm);cursor:pointer;
  transition:color var(--d-2) var(--ease-inout),transform var(--d-2) var(--ease-inout)}
.quotes__nav:hover{color:var(--ink);transform:translateY(-1px)}
.quotes__nav--prev{left:0}
.quotes__nav--next{right:0}
/* 점 — 버튼은 32×44 로 나란히 붙고, 보이는 점은 안쪽에 그린다.
   적중 영역을 가상 요소로 넓히면 이웃 점의 영역을 덮어 엉뚱한 점이 눌린다. */
.quotes__dots{display:flex;justify-content:center;margin-top:16px}
.quotes__dot{position:relative;display:grid;place-items:center;width:32px;height:44px;cursor:pointer}
.quotes__dot::after{content:"";width:6px;height:6px;border-radius:3px;background:var(--line-strong);
  transition:width var(--d-3) var(--ease-out),background-color var(--d-2) var(--ease-inout)}
.quotes__dot[aria-current="true"]::after{width:20px;background:var(--ink)}
@media (max-width:640px){.quotes__nav{display:none}}

/* ══ 가로 스냅 캐러셀 ══════════════════════════════════
   모바일에서 카드가 옆으로 살짝 보이게 두어 더 있다는 걸 알린다. */
.rail{display:flex;gap:16px;overflow-x:auto;scroll-snap-type:x mandatory;
  scrollbar-width:none;padding-block:4px;
  padding-inline:20px;margin-inline:-20px}
.rail::-webkit-scrollbar{display:none}
.rail > *{flex:0 0 auto;scroll-snap-align:center;width:min(78vw,340px)}
@media (min-width:768px){
  .rail{padding-inline:32px;margin-inline:-32px}
  .rail > *{scroll-snap-align:start;width:340px}
}
@media (min-width:1280px){.rail{padding-inline:40px;margin-inline:-40px}}

/* ══ 하단 고정 CTA 바 ══════════════════════════════════ */
.dockbar{position:fixed;left:50%;translate:-50% 0;z-index:var(--z-sticky);
  bottom:calc(var(--safe-b) + 16px);width:calc(100% - 32px);max-width:var(--w-base);
  display:flex;align-items:center;gap:16px;padding:12px 12px 12px 22px;
  background:color-mix(in srgb,var(--surface) 92%,transparent);
  backdrop-filter:saturate(180%) blur(16px);-webkit-backdrop-filter:saturate(180%) blur(16px);
  border-radius:var(--r-xl);box-shadow:var(--sh-lg),inset 0 0 0 1px var(--line);
  opacity:0;translate:-50% 12px;pointer-events:none;
  transition:opacity var(--d-4) var(--ease-out),translate var(--d-4) var(--ease-out)}
.dockbar[data-show]{opacity:1;translate:-50% 0;pointer-events:auto}
.dockbar__text{flex:1;min-width:0;font-size:var(--t-body-sm);color:var(--ink-muted);line-height:1.5}
.dockbar__text strong{display:block;color:var(--ink);font-weight:600}
@media (max-width:640px){
  .dockbar{padding:10px 10px 10px 16px;gap:10px}
  .dockbar__text{font-size:var(--t-caption)}
}

/* ══ 맨 위로 ═══════════════════════════════════════════ */
.totop{position:fixed;right:20px;bottom:calc(var(--safe-b) + 20px);z-index:var(--z-sticky);
  width:46px;height:46px;border-radius:50%;display:grid;place-items:center;
  background:color-mix(in srgb,var(--surface) 88%,transparent);color:var(--ink-muted);
  backdrop-filter:blur(12px);-webkit-backdrop-filter:blur(12px);
  box-shadow:var(--sh-md),inset 0 0 0 1px var(--line);cursor:pointer;
  opacity:0;translate:0 10px;pointer-events:none;
  transition:opacity var(--d-3) var(--ease-out),translate var(--d-3) var(--ease-out),
             color var(--d-2) var(--ease-inout)}
.totop[data-show]{opacity:1;translate:0;pointer-events:auto}
.totop:hover{color:var(--ink)}

/* ══ 기기 목업 ═════════════════════════════════════════
   화면을 보여줄 때 쓴다. 테두리는 얇게, 그림자는 넓고 옅게. */
.phone{position:relative;width:280px;max-width:100%;aspect-ratio:9/19.5;border-radius:44px;
  background:var(--neutral-950);padding:9px;box-shadow:var(--sh-xl);flex:none}
.phone__screen{position:relative;width:100%;height:100%;border-radius:36px;overflow:hidden;
  background:var(--surface);display:flex;flex-direction:column;isolation:isolate;
  -webkit-mask-image:-webkit-radial-gradient(#fff,#000)}  /* 사파리에서 자식이 모서리를 넘지 않게 */
.phone__notch{position:absolute;top:9px;left:50%;translate:-50% 0;width:96px;height:24px;
  background:var(--neutral-950);border-radius:0 0 14px 14px;z-index:2}
.showcase{position:relative;display:grid;place-items:center;padding:48px 24px;
  background:var(--canvas-alt);border-radius:var(--r-3xl);overflow:hidden}
@media (max-width:640px){.showcase{padding:32px 16px;border-radius:var(--r-2xl)}}
/* 목업 옆으로 떠 있는 작은 조각들 */
.float{position:absolute;border-radius:var(--r-lg);box-shadow:var(--sh-lg);overflow:hidden;
  background:var(--surface)}
.float--tl{top:12%;left:4%;width:112px}
.float--br{bottom:14%;right:4%;width:128px}
@media (max-width:900px){.float{display:none}}

/* ══ 글 본문 ═══════════════════════════════════════════ */
.prose{max-width:40rem;color:var(--ink-body);font-size:var(--t-body-md);line-height:1.75}
.prose > * + *{margin-top:20px}
.prose h2{font-size:var(--t-heading-md);line-height:var(--t-heading-md-lh);
  letter-spacing:var(--t-heading-md-ls);margin-top:48px}
.prose h3{font-size:var(--t-heading-sm);line-height:var(--t-heading-sm-lh);margin-top:36px}
.prose figure{margin-block:32px;background:var(--canvas-alt);border-radius:var(--r-lg);padding:24px;
  text-align:center}
.prose figcaption{margin-top:14px;font-size:var(--t-caption);color:var(--ink-subtle)}
.prose blockquote{padding-left:20px;box-shadow:inset 3px 0 0 var(--accent);color:var(--ink)}
.prose ul{list-style:disc;padding-left:1.2em}
.prose li + li{margin-top:8px}
.prose a{color:var(--accent-text);text-decoration:underline;text-underline-offset:3px}

/* ══ 서브 내비 (섹션 이동) ═════════════════════════════ */
.subnav{position:sticky;top:var(--nav-h);z-index:calc(var(--z-header) - 1);
  background:color-mix(in srgb,var(--canvas) 88%,transparent);
  backdrop-filter:blur(14px);-webkit-backdrop-filter:blur(14px);
  box-shadow:inset 0 -1px 0 var(--line)}
.subnav__list{display:flex;gap:2px;overflow-x:auto;scrollbar-width:none;height:52px;align-items:center}
.subnav__list::-webkit-scrollbar{display:none}
.subnav__item{flex:none;height:34px;padding-inline:12px;border-radius:var(--r-sm);
  font-size:var(--t-body-xs);font-weight:600;color:var(--ink-subtle);white-space:nowrap;
  display:inline-flex;align-items:center;
  transition:color var(--d-2) var(--ease-inout),background-color var(--d-2) var(--ease-inout)}
.subnav__item:hover{color:var(--ink-body)}
.subnav__item[aria-current="true"]{color:var(--ink);background:var(--tint)}