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

/* ══ 그라데이션 패널 ═══════════════════════════════════
   큰 라운드 패널에 은은한 그라데이션을 깔고, 왼쪽에 큰 제목,
   오른쪽에 흰 알약 목록을 세운다. 목록이 길어도 지루하지 않다. */
.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-*)이 라이트·다크를 함께 가진다 */
.panel--sky{background:var(--panel-sky)}
.panel--sun{background:var(--panel-sun)}
.panel--mint{background:var(--panel-mint)}
.panel--lilac{background:var(--panel-lilac)}
.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;text-align:left;-webkit-tap-highlight-color:transparent;
  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;word-break:keep-all;overflow-wrap:break-word}
.pillrow__chev{flex:none;color:var(--ink-subtle);transition:transform var(--d-3) var(--ease-out)}
@media (hover:none){.pillrow:active{transform:scale(.985)}}
.pillrow:focus-visible{border-radius:var(--r-full)}
@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(--media-base);
  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:var(--media-ink);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 color-mix(in srgb,var(--media-ink) 65%,transparent);color:var(--media-ink);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:color-mix(in srgb,var(--media-ink) 18%,transparent)}
.photocard__more{color:color-mix(in srgb,var(--media-ink) 86%,transparent);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)}
@media (hover:hover){.quotes__nav:hover{color:var(--ink);transform:translateY(-1px)}}
.quotes__nav:active{transform:scale(.94)}
.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;visibility:hidden;
  /* 숨는 동안에는 Tab 으로도 가지 않게 visibility 를 사라지는 움직임이 끝난 뒤에 끈다 */
  transition:opacity var(--d-3) var(--ease-out),translate var(--d-3) var(--ease-out),
             color var(--d-2) var(--ease-inout),visibility 0s linear var(--d-3)}
.totop[data-show]{opacity:1;translate:0;pointer-events:auto;visibility:visible;transition-delay:0s}
@media (hover:hover){.totop:hover{color:var(--ink)}}
.totop:active{scale:.94}
@media (max-width:767px){.totop{display:none}}
/* 하단 CTA 바가 떠 있을 때
   ~767px: 숨는다. 바 위로 비켜 서면 좁은 화면에서는 카드 오른쪽 끝 글자를 가린다. 바가 사라지면 다시 나타난다.
   768~1279px: 바 위로 비켜 선다(바의 버튼을 가리지 않게). 1280px~: 바가 가운데 좁게 떠 있어 제자리에 둔다. */
@media (max-width:767px){
  .dockbar[data-show]:not(.is-off) ~ .totop[data-show]{opacity:0;translate:0 10px;pointer-events:none;visibility:hidden;
    transition-delay:0s,0s,0s,var(--d-3)}
}
@media (min-width:768px) and (max-width:1279px){.dockbar[data-show]:not(.is-off) ~ .totop{translate:0 calc(-1 * (100% + 32px))}}

/* ══ 기기 목업 ═════════════════════════════════════════
   화면을 보여줄 때 쓴다. 테두리는 얇게, 그림자는 넓고 옅게. */
.phone{position:relative;width:280px;max-width:100%;aspect-ratio:9/19.5;border-radius:44px;
  background:var(--device);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(--device);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}}

/* ══ 브라우저 창 목업 ══════════════════════════════════
   데스크톱 화면을 보여줄 때 쓴다(.phone 과 같은 급). 창 테두리·그림자 + 위 막대(점 셋 · 뒤로/앞으로 · 주소창) + 안쪽 화면.
     .browser > [.browser__tabs] > .browser__bar > .browser__screen > .browser__canvas(설계 폭으로 그린 목업, 또는 iframe)
   화면 비율은 기본 16:10(--browser-ratio). 안의 목업은 설계 폭(--browser-design-w, 기본 1280px)으로 그리고 비율만 줄인다(--browser-k = 화면 폭 / 설계 폭).
   좁아져도 목업 속 글자가 다시 줄바꿈되지 않는다. --browser-k 는 CSS 가 화면 폭(컨테이너 단위)으로 먼저 계산해 첫 그리기부터 맞고, fx.js 가 잰 값으로 판마다 다시 적는다.
   크기: 기본(최대 960) · --sm(최대 560, 막대 32) · --lg(최대 1200, 막대 44). 비율: --16x9 --4x3 --3x2, 내용 높이대로 --fit(줄이지 않는다).
   점 셋에 신호등 색: --lights. 그림자 없이 선만: --flat. 창 폭이 480px 보다 좁으면 뒤로/앞으로를 숨기고 막대를 줄인다(창 기준 컨테이너 쿼리).
   부모는 폭이 정해진 상자여야 한다(창이 폭을 내용에서 재지 않는다). 창은 aria-hidden 이나 role="img" + aria-label 로 한 줄 설명을 준다(06_rails browser_frame). */
.browser{--browser-w:960px;--browser-bar-h:var(--s-40);--browser-r:var(--r-lg);--browser-ratio:16/10;--browser-design-w:1280px;
  position:relative;display:flex;flex-direction:column;width:100%;max-width:var(--browser-w);min-width:0;
  border-radius:var(--browser-r);background:var(--surface-alt);overflow:hidden;isolation:isolate;
  box-shadow:0 0 0 1px var(--line),var(--sh-xl);container:browser / inline-size}
.browser--sm{--browser-w:560px;--browser-bar-h:var(--s-32);--browser-r:var(--r-md)}
.browser--lg{--browser-w:1200px;--browser-bar-h:calc(var(--s-40) + var(--s-4));--browser-r:var(--r-xl)}
.browser--16x9{--browser-ratio:16/9}
.browser--4x3{--browser-ratio:4/3}
.browser--3x2{--browser-ratio:3/2}
.browser--flat{box-shadow:0 0 0 1px var(--line)}
/* 위 막대: 왼쪽(점 셋 · 뒤로/앞으로) | 가운데 주소창 | 오른쪽(도구, 없어도 된다). 양옆 칸이 같은 폭이라 주소창이 창 가운데에 선다. */
.browser__bar{display:grid;grid-template-columns:minmax(max-content,1fr) minmax(0,30rem) minmax(max-content,1fr);align-items:center;gap:var(--s-12);
  flex:none;height:var(--browser-bar-h);padding-inline:var(--s-16);background:var(--surface-alt);box-shadow:inset 0 -1px 0 var(--line)}
.browser__lead{display:flex;align-items:center;gap:var(--s-16);min-width:0}
.browser__dots{display:flex;align-items:center;gap:var(--s-6);flex:none}
.browser__dots > span{display:block;width:var(--s-10);height:var(--s-10);border-radius:var(--r-full);background:var(--line-strong)}
.browser--lights .browser__dots > span:nth-child(1){background:var(--bad)}
.browser--lights .browser__dots > span:nth-child(2){background:var(--warn)}
.browser--lights .browser__dots > span:nth-child(3){background:var(--good)}
.browser__nav{display:flex;align-items:center;gap:var(--s-6);color:var(--ink-subtle)}
.browser__nav .ico{width:var(--s-16);height:var(--s-16)}
.browser__nav > :last-child{opacity:.5}
.browser__url{grid-column:2;display:flex;align-items:center;justify-content:center;gap:var(--s-6);min-width:0;
  height:calc(var(--browser-bar-h) - var(--s-16));padding-inline:var(--s-12);border-radius:var(--r-sm);background:var(--surface);color:var(--ink-muted);
  font-size:var(--t-micro);line-height:1;white-space:nowrap;box-shadow:inset 0 0 0 1px var(--line)}
.browser__url > .ico{flex:none;width:var(--s-12);height:var(--s-12);color:var(--ink-subtle)}
.browser__addr{min-width:0;overflow:hidden;text-overflow:ellipsis}
.browser__host{color:var(--ink-body);font-weight:500}
.browser__tools{grid-column:3;justify-self:end;display:flex;align-items:center;gap:var(--s-8);color:var(--ink-subtle)}
.browser__tools .ico{width:var(--s-16);height:var(--s-16)}
/* 탭 줄(선택): 위 막대 위에 한 줄 더. 지금 탭은 막대와 같은 면이라 이어져 보인다. 점 셋은 탭 줄로 옮긴다. */
.browser__tabs{display:flex;align-items:flex-end;gap:var(--s-2);flex:none;height:calc(var(--browser-bar-h) - var(--s-4));padding-inline:var(--s-16) var(--s-12);
  background:var(--canvas-sunken)}
.browser__tabs > .browser__dots{align-self:center;margin-right:var(--s-12)}
.browser__tab{display:flex;align-items:center;gap:var(--s-8);flex:0 1 13rem;min-width:0;height:calc(100% - var(--s-6));padding-inline:var(--s-12);
  border-radius:var(--r-sm) var(--r-sm) 0 0;color:var(--ink-muted);font-size:var(--t-micro);line-height:1;white-space:nowrap}
.browser__tab > span{min-width:0;overflow:hidden;text-overflow:ellipsis}
.browser__tab--on{background:var(--surface-alt);color:var(--ink);font-weight:600}
.browser__fav{flex:none;width:var(--s-12);height:var(--s-12);border-radius:var(--r-xs);background:var(--accent);object-fit:contain}
img.browser__fav{background:none}
/* 안쪽 화면. 컨테이너라서 안의 판이 화면 폭(100cqw)을 안다. 사파리에서 줄인 자식이 둥근 모서리를 넘지 않게 마스크를 둔다.
   줄이는 비율: 등록한 길이 속성(--browser-cw)에 화면 폭을 px 로 받아 tan(atan2(화면 폭, 설계 폭)) 으로 숫자를 낸다.
   (컨테이너 단위를 atan2 에 바로 넣으면 크롬이 px 로 잘못 읽는다.) fx.js 가 잰 값을 판마다 인라인으로 다시 적는다. */
@property --browser-cw{syntax:"<length>";inherits:false;initial-value:640px}
.browser__screen{position:relative;flex:none;aspect-ratio:var(--browser-ratio);overflow:hidden;background:var(--canvas);container-type:inline-size;
  -webkit-mask-image:-webkit-radial-gradient(#fff,#000)}
.browser__canvas{--browser-cw:100cqw;--browser-k:.5;position:absolute;top:0;left:0;width:var(--browser-design-w);height:calc(var(--browser-design-w) / (var(--browser-ratio)));
  transform:scale(var(--browser-k));transform-origin:0 0;overflow:hidden;background:var(--canvas)}
@supports (width:calc(1px * tan(atan2(1px,1px)))){.browser__canvas{--browser-k:tan(atan2(var(--browser-cw),var(--browser-design-w)))}}
/* 화면 밖 창의 목업은 그리지 않는다(content-visibility). 설계 폭·높이가 정해져 있어 건너뛰어도 자리 크기는 그대로다. */
.browser__canvas{content-visibility:auto}
iframe.browser__canvas{display:block;border:0}
.browser--fit .browser__screen{aspect-ratio:auto;container-type:normal}
.browser--fit .browser__canvas{position:relative;width:auto;height:auto;transform:none;content-visibility:visible}
/* 창 폭에 따라 막대를 줄인다(창 속 목업이 작아질수록 막대도 비례해 얇게). 창 기준 컨테이너 쿼리라 놓인 자리와 상관없다.
   880 미만 36 · 600 미만 32 · 480 미만 30(탭 줄·뒤로/앞으로·도구를 숨기고 점 셋을 막대로 옮긴다) */
.browser__tabs + .browser__bar .browser__dots{display:none}
@container browser (max-width:879px){
  .browser__bar{height:calc(var(--s-32) + var(--s-4));padding-inline:var(--s-12);gap:var(--s-10)}
  .browser__url{height:calc(var(--s-20) + var(--s-2))}
  .browser__tabs{height:var(--s-32);padding-inline:var(--s-12) var(--s-10)}
  .browser__dots > span{width:9px;height:9px}
}
@container browser (max-width:599px){
  .browser__bar{height:var(--s-32)}
  .browser__url{height:var(--s-20);padding-inline:var(--s-10);font-size:var(--t-nano)}
  .browser__tabs{height:var(--s-28)}
  .browser__tab{padding-inline:var(--s-8);font-size:var(--t-nano)}
  .browser__nav .ico,.browser__tools .ico{width:var(--s-12);height:var(--s-12)}
}
@container browser (max-width:479px){
  .browser__bar{height:calc(var(--s-28) + var(--s-2));padding-inline:var(--s-10);gap:var(--s-8)}
  .browser__nav,.browser__tools,.browser__tabs{display:none}
  .browser__tabs + .browser__bar .browser__dots{display:flex}
  .browser__dots{gap:var(--s-4)}
  .browser__dots > span{width:var(--s-8);height:var(--s-8)}
  .browser__url{height:var(--s-20);padding-inline:var(--s-8)}
}
/* 창 + 떠 있는 조각(.float): 면(.showcase) 안에서 조각이 창 가장자리에 걸친다. 900px 미만에서는 조각이 사라진다(.float 규칙). */
.showcase--desktop{padding:var(--s-56) var(--s-64)}
.showcase--desktop > .float--tl{top:var(--s-40);left:var(--s-24);width:auto;max-width:15rem}
.showcase--desktop > .float--br{bottom:var(--s-32);right:var(--s-24);width:auto;max-width:15rem}
@media (max-width:640px){.showcase--desktop{padding:var(--s-24) var(--s-16)}}

/* ══ 글 본문 ═══════════════════════════════════════════ */
.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)}
.subnav::before{content:"";position:absolute;inset:0;z-index:-1;pointer-events:none;
  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;overscroll-behavior-x:contain}
.subnav__list::-webkit-scrollbar{display:none}
.subnav__item{position:relative;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)}
@media (hover:hover){.subnav__item:hover{color:var(--ink-body)}}
.subnav__item:focus-visible{outline-offset:-2px}
/* 보이는 칩은 34px, 누르는 범위는 위아래로만 44px(옆 칩과 겹치지 않게) */
.subnav__item::before{content:"";position:absolute;inset:-5px 0}
.subnav__item[aria-current="true"]{color:var(--ink);background:var(--tint)}