@charset "utf-8";
/* ==========================================================================
   쇼케이스 셸 — 목업을 한 화면에서 흐름대로 검토하기 위한 껍데기.
   실제 서비스에는 존재하지 않는다. .phone / .desk 안쪽만 실제 화면이다.
   ========================================================================== */

/* ---------- 상단 목업 고지 배너 ---------- */
.mock-banner {
  position: sticky; top: 0; z-index: 200; height: 28px;
  background: repeating-linear-gradient(135deg, #221F1D, #221F1D 10px, #322C29 10px, #322C29 20px);
  color: #F0E9E2; font-size: 11px; letter-spacing: .02em;
  display: flex; align-items: center; justify-content: center; gap: 8px;
  padding: 0 12px; text-align: center;
}
.mock-banner b { color: var(--accent); font-weight: 700; }
.mock-banner a { color: #F0E9E2; text-decoration: underline; text-underline-offset: 2px; }

/* ---------- 목업 세트 내비게이션 ---------- */
.mock-nav {
  position: sticky; top: 28px; z-index: 190;
  background: rgba(245,243,239,.92);
  backdrop-filter: saturate(1.4) blur(10px);
  border-bottom: 1px solid var(--line);
}
.mock-nav__in {
  max-width: 1560px; margin: 0 auto; padding: 0 24px;
  display: flex; align-items: center; gap: 6px; height: 46px;
  overflow-x: auto; scrollbar-width: none;
}
.mock-nav__in::-webkit-scrollbar { display: none; }
.mock-nav__home {
  display: inline-flex; align-items: center; gap: 6px;
  font-size: 12.5px; font-weight: 700; letter-spacing: -.02em;
  color: var(--ink); padding-right: 12px; margin-right: 4px;
  border-right: 1px solid var(--line); flex: none; height: 22px;
}
.mock-nav a.tab {
  flex: none; font-size: 12.5px; font-weight: 600; color: var(--ink-50);
  padding: 6px 12px; border-radius: var(--r-pill); white-space: nowrap;
  transition: .16s var(--ease);
}
.mock-nav a.tab:hover { color: var(--ink); background: var(--sand-soft); }
.mock-nav a.tab[aria-current="page"] { background: var(--ink); color: #fff; }

/* ---------- 쇼케이스 본문 ---------- */
.showcase { padding: 40px 24px 96px; }
.showcase__head { max-width: 1180px; margin: 0 auto 36px; }
.showcase__eyebrow {
  font-family: var(--serif); font-size: 12px; letter-spacing: .22em;
  text-transform: uppercase; color: var(--ink-50);
}
.showcase__title {
  font-size: clamp(22px, 4vw, 30px); font-weight: 800;
  letter-spacing: -.03em; line-height: 1.4; margin-top: 6px;
}
.showcase__lead { color: var(--ink-70); font-size: 14px; margin-top: 10px; max-width: 66ch; line-height: 1.7; }

/* 검토 포인트 박스 — "이 세트에서 무엇을 봐야 하는가" */
.review-box {
  max-width: 1180px; margin: 0 auto 40px;
  background: var(--paper); border: 1px solid var(--line);
  border-left: 3px solid var(--accent);
  border-radius: var(--r-card); padding: 16px 18px;
}
.review-box h2 {
  font-size: 12px; font-weight: 700; letter-spacing: .1em; text-transform: uppercase;
  color: var(--accent-ink); margin-bottom: 10px;
}
.review-box ul { display: grid; gap: 7px; }
.review-box li {
  font-size: 13px; color: var(--ink-70); line-height: 1.65;
  padding-left: 16px; position: relative;
}
.review-box li::before {
  content: ""; position: absolute; left: 3px; top: 8.5px;
  width: 4px; height: 4px; border-radius: 50%; background: var(--ink-30);
}
.review-box li b { color: var(--ink); font-weight: 700; }

/* 화면 목차 — mockup.js 가 .frames > section[id] 를 훑어 자동 생성한다 */
.fx { display: flex; flex-wrap: wrap; gap: 6px; margin-top: 12px; }
.fx a {
  display: inline-flex; align-items: center; gap: 6px;
  font-size: 12px; font-weight: 600; color: var(--ink-70);
  background: var(--paper); border: 1px solid var(--line);
  padding: 5px 11px 5px 5px; border-radius: var(--r-pill);
  transition: .16s var(--ease);
}
.fx a:hover { border-color: var(--ink); color: var(--ink); }
.fx a b {
  width: 18px; height: 18px; border-radius: 50%; flex: none;
  background: var(--sand-soft); color: var(--ink-70);
  display: grid; place-items: center; font-family: var(--mono); font-size: 10px; font-weight: 700;
}
.fx a:hover b { background: var(--ink); color: #fff; }

/* ---------- 프레임 그리드 ---------- */
.frames {
  display: grid; gap: 36px 26px; max-width: 1560px; margin: 0 auto;
  justify-content: center; align-items: start;
}
.frames--mobile { grid-template-columns: repeat(auto-fit, minmax(min(360px, 100%), 390px)); }
.frames--desk   { grid-template-columns: repeat(auto-fit, minmax(min(560px, 100%), 900px)); }

/* ---------- 프레임 캡션 (번호 · 화면명 · 설계 의도) ---------- */
.frame__cap { margin-bottom: 12px; max-width: 900px; }
.frame__no {
  display: inline-flex; align-items: center; justify-content: center;
  width: 22px; height: 22px; border-radius: 50%;
  background: var(--ink); color: #fff; font-size: 11px; font-weight: 700;
  margin-right: 7px; vertical-align: middle;
}
.frame__name { font-size: 14.5px; font-weight: 700; letter-spacing: -.02em; vertical-align: middle; }
.frame__role {
  display: inline-block; vertical-align: middle; margin-left: 8px;
  font-size: 10.5px; font-weight: 700; letter-spacing: .04em;
  padding: 2px 7px; border-radius: var(--r-pill);
  background: var(--sand-soft); color: var(--ink-70);
}
.frame__desc { font-size: 12.5px; color: var(--ink-70); line-height: 1.65; margin-top: 6px; }
.frame__desc b { color: var(--ink); font-weight: 700; }

/* 화면 간 이동 규칙 — "여기서 누르면 어디로 가는가" */
.frame__flow {
  margin-top: 8px; display: flex; flex-wrap: wrap; gap: 6px;
}
.flowtag {
  display: inline-flex; align-items: center; gap: 4px;
  font-size: 11px; font-weight: 600; color: var(--ink-70);
  background: var(--paper); border: 1px solid var(--line);
  padding: 3px 8px; border-radius: var(--r-pill);
}
.flowtag .ico { font-size: 13px; color: var(--ink-30); }
.flowtag b { color: var(--accent-ink); font-weight: 700; }

/* ==========================================================================
   디바이스 프레임
   ========================================================================== */

/* ---------- 모바일 : iPhone 14 기준 390×844 ----------
   폭은 min() 으로 잡아 360px 기기에서도 잘리지 않고 그대로 줄어든다.
   안쪽 화면 CSS 가 전부 유동 단위라 폭이 줄어도 레이아웃이 유지된다. */
.phone {
  width: min(390px, 100%); height: 844px;
  background: var(--cream);
  border-radius: 26px;
  box-shadow: var(--shadow-l);
  overflow: hidden; position: relative;
  display: flex; flex-direction: column;
  border: 1px solid rgba(0,0,0,.08);
}
.phone__scroll {
  flex: 1; overflow-y: auto; overscroll-behavior: contain;
  -webkit-overflow-scrolling: touch; position: relative;
}
.phone__scroll::-webkit-scrollbar { width: 0; }

/* 상태바 — 목업 사실감용 */
.statusbar {
  height: 34px; flex: none; display: flex; align-items: center; justify-content: space-between;
  padding: 0 20px; font-size: 11.5px; font-weight: 600;
  background: var(--paper); color: var(--ink); z-index: 5;
}
.statusbar--dark { background: var(--ink); color: #fff; }
.statusbar--trans { background: transparent; color: #fff; position: absolute; top: 0; left: 0; right: 0; }
.statusbar__dots { display: flex; gap: 3px; align-items: center; }
.statusbar__dots i { width: 4px; height: 4px; border-radius: 50%; background: currentColor; display: block; }

/* ---------- 데스크탑 : 1440×900 을 축소해서 얹는다 ----------
   .desk-wrap 이 축소된 실제 크기를 차지하고, .desk 는 1440px 로 그린 뒤 scale 된다.
   덕분에 안쪽 화면 CSS 는 실제 데스크탑 픽셀 그대로 쓸 수 있다. */
.desk-wrap {
  /* 기본 .625 (1440 × .625 = 900px). 좁은 화면에서는 들어갈 만큼 줄이되,
     .42 아래로는 줄이지 않는다 — 그 밑으로 가면 글자가 안 보여 검토 자체가 불가능하다.
     대신 부모 섹션이 가로 스크롤되어 손가락으로 밀어 볼 수 있게 한다. */
  --s: max(.42, min(.625, (100vw - 96px) / 1440));
  width: calc(1440px * var(--s));
  height: calc(900px * var(--s));
  max-width: 100%;
  border-radius: 10px;
  box-shadow: var(--shadow-l);
  overflow: hidden;
  border: 1px solid rgba(0,0,0,.10);
  background: var(--cream);
}
.desk {
  width: 1440px; height: 900px;
  transform: scale(var(--s)); transform-origin: top left;
  display: flex; flex-direction: column;
  background: var(--cream);
}

/* 브라우저 크롬 — 목업 사실감용 */
.browserbar {
  height: 38px; flex: none; display: flex; align-items: center; gap: 12px;
  padding: 0 16px; background: #E7E1D9; border-bottom: 1px solid var(--line);
}
.browserbar__dots { display: flex; gap: 6px; }
.browserbar__dots i { width: 10px; height: 10px; border-radius: 50%; background: var(--ink-30); display: block; }
.browserbar__url {
  flex: 1; height: 24px; border-radius: var(--r-pill); background: var(--paper);
  display: flex; align-items: center; gap: 6px; padding: 0 10px;
  font-family: var(--mono); font-size: 11px; color: var(--ink-50); max-width: 520px;
}
.browserbar__url .ico { font-size: 13px; color: var(--save); }

/* 데스크탑 화면 본체 */
.desk__body { flex: 1; display: flex; min-height: 0; }

/* ---------- 부분 화면(모달·시트·컴포넌트 단독) 프레임 ---------- */
.snippet {
  background: var(--paper); border: 1px solid var(--line);
  border-radius: var(--r-card); box-shadow: var(--shadow-m); overflow: hidden;
}

/* ==========================================================================
   반응형 — 이 목업은 검토자가 휴대폰으로 열어보는 경우가 실제로 많다.
   ========================================================================== */

/* 데스크탑 프레임은 좁은 화면에서 가로로 밀어 본다 */
.frames--desk > section { overflow-x: auto; overscroll-behavior-x: contain; padding-bottom: 4px; }
.frames--desk > section::-webkit-scrollbar { height: 6px; }
.frames--desk > section::-webkit-scrollbar-thumb { background: var(--ink-30); border-radius: 3px; }

@media (max-width: 900px) {
  .frames--desk > section .frame__cap::after {
    content: "가로로 밀어서 보세요 →";
    display: inline-block; margin-top: 8px;
    font-size: 11.5px; font-weight: 700; color: var(--accent-ink);
    background: var(--accent-dim); padding: 4px 10px; border-radius: var(--r-pill);
  }
}

@media (max-width: 720px) {
  .mock-banner { height: auto; min-height: 28px; padding: 6px 12px; line-height: 1.5; }
  .mock-nav { top: 0; position: sticky; }
  .mock-nav__in { padding: 0 14px; height: 44px; }
  .showcase { padding: 26px 14px 64px; }
  .showcase__lead { font-size: 13.5px; }
  .review-box { padding: 14px 15px; }
  .review-box li { font-size: 12.5px; }
  .frames { gap: 30px 16px; }
  .frame__desc { font-size: 12.5px; }
}

@media (max-width: 460px) {
  .showcase__title { font-size: 21px; }
  .frame__flow { gap: 5px; }
  .flowtag { font-size: 10.5px; padding: 3px 7px; }
  /* 화면 높이가 낮은 기기에서 프레임이 화면을 다 먹지 않도록 */
  .phone { height: min(844px, 78vh); min-height: 620px; border-radius: 20px; }
}

/* 인쇄 — 검토 회의용 출력 */
@media print {
  .mock-nav, .mock-banner { display: none; }
  .frames { display: block; }
  .frames > section { break-inside: avoid; page-break-inside: avoid; margin-bottom: 24px; }
  .phone, .desk-wrap { box-shadow: none; border: 1px solid #ccc; }
}