* { box-sizing: border-box; }
  html, body { -webkit-text-size-adjust: 100%; overflow-x: hidden; }
  body { margin: 0; background: var(--z-paper); color: var(--z-ink); font: 400 16px/1.6 var(--z-body); word-break: keep-all; -webkit-font-smoothing: antialiased; }
  a { color: inherit; text-decoration: none; }
  button { font: inherit; color: inherit; }
  .wrap { max-width: 560px; margin: 0 auto; padding: 0 var(--z-s2); }
  .z-btn { justify-content: center; }

  /* ---- 맨 위 검정 띠 ---- */
  .strip { background: var(--z-black); color: #fff; height: 40px; display: flex; align-items: center; justify-content: center; }
  .strip .z-mono { color: #fff; letter-spacing: .14em; }
  .strip i { font-style: normal; color: var(--z-red); }

  /* ---- 표지: 사진(아래쪽이 둥근 반달) → 라벨 → 큰 이름 → 기울인 한 줄 ---- */
  .hero { position: relative; padding-top: var(--z-s2); }
  .hero figure { position: relative; z-index: 2; margin: 0; aspect-ratio: 4 / 4.2; overflow: hidden; background: var(--z-soft); border-radius: 0 0 50% 50% / 0 0 26% 26%; }
  .hero figure img { width: 100%; height: 100%; object-fit: cover; object-position: 22% 30%; display: block; }
  .hero .bubble { position: absolute; right: 2px; top: 34px; z-index: 3; padding: 12px 20px; border: 2px solid var(--z-ink); border-radius: 50%; background: var(--z-paper); font: 700 12px/1 var(--z-ui); letter-spacing: .12em; transform: rotate(6deg); }
  .hero .bubble::after { content: ''; position: absolute; left: 22%; bottom: -9px; width: 14px; height: 14px; background: var(--z-paper); border: 2px solid var(--z-ink); border-top: 0; border-left: 0; transform: rotate(45deg); }
  .hero .copy { position: relative; z-index: 2; padding-top: var(--z-s4); }
  .hero h1 { font: 400 clamp(76px, 24vw, 120px)/.95 var(--z-display-ko); letter-spacing: -.02em; margin: 10px 0 14px; }
  .hero .z-lead { color: var(--z-mute); margin: 0; font-size: 28px; }
  .hero .who { font-size: 17px; line-height: 1.6; margin: 10px 0 0; }
  .hero .who b { font-weight: 700; }
  .curve { position: absolute; pointer-events: none; fill: none; stroke: var(--z-red); stroke-width: 1.5; }
  .hero .curve { left: -24vw; top: 44%; width: calc(100% + 48vw); height: 20%; z-index: 1; }

  /* ---- 바로 연결: 한 번 누르면 앱이 열림 (빨강 면은 전화 하나만) ---- */
  .acts { display: grid; grid-template-columns: 1fr 1fr; gap: 10px; margin-top: var(--z-s4); }
  .acts .z-btn { min-height: 58px; font-size: 13px; letter-spacing: .1em; gap: 9px; }
  .acts .z-btn b { font: 700 16px/1 var(--z-body); letter-spacing: 0; }
  .acts svg { width: 20px; height: 20px; flex: none; }
  .office { display: flex; justify-content: space-between; align-items: center; min-height: 58px; margin-top: 10px; padding: 0 22px; border: 1.5px solid var(--z-ink); border-radius: var(--z-r-pill); }
  .office span { font-size: 14px; color: var(--z-mute); }
  .office b { font: 400 22px/1 var(--z-display); letter-spacing: .03em; }
  .save { display: grid; grid-template-columns: 1fr 1fr; gap: 10px; margin-top: 10px; }
  .save .z-btn { min-height: 52px; }
  .save .z-btn b, .film .more .z-btn b { font: 700 15px/1 var(--z-body); letter-spacing: 0; }
  .save .z-btn b, .office b { font-variant-numeric: tabular-nums; }

  /* ---- 구역 머리 (라벨 → 큰 제목 → 기울인 한 줄) ---- */
  section { position: relative; padding: var(--z-s7) 0 0; }
  .head h2 { font: 400 clamp(40px, 11vw, 56px)/1.04 var(--z-display-ko); letter-spacing: -.02em; margin: 10px 0 8px; }
  .head .z-lead { margin: 0; font-size: 26px; color: var(--z-mute); }
  .head p.body { margin: 14px 0 0; font-size: 16px; line-height: 1.7; }

  /* ---- 영상 (검정 구역, 위가 둥근) ---- */
  .film { background: var(--z-black); color: #fff; margin-top: var(--z-s7); padding: var(--z-s7) 0 var(--z-s7); border-radius: 40px 40px 0 0; }
  .film .head .z-lead { color: #9a9a9a; }
  .player { position: relative; margin-top: var(--z-s4); aspect-ratio: 16 / 9; border-radius: var(--z-r-card); overflow: hidden; background: #1a1a1a; }
  .player img, .player iframe { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; border: 0; display: block; }
  .player button.play { position: absolute; inset: 0; width: 100%; border: 0; background: linear-gradient(to top, rgba(0,0,0,.55), rgba(0,0,0,0) 45%); cursor: pointer; }
  .play i { position: absolute; left: 50%; top: 50%; width: 76px; height: 76px; margin: -38px 0 0 -38px; border-radius: 50%; background: #fff; transition: transform var(--z-dur) var(--z-ease); }
  .play i::after { content: ''; position: absolute; left: 31px; top: 25px; border-left: 20px solid var(--z-ink); border-top: 13px solid transparent; border-bottom: 13px solid transparent; }
  .play:hover i { transform: scale(1.08); }
  .play .z-mono { position: absolute; left: 18px; bottom: 14px; color: #fff; text-align: left; }
  .floors { list-style: none; margin: var(--z-s3) 0 0; padding: 0; border-top: 1px solid #333; }
  .floors button { width: 100%; display: grid; grid-template-columns: 52px 1fr auto; align-items: center; gap: 12px; min-height: 64px; padding: 10px 0; background: none; border: 0; border-bottom: 1px solid #333; color: #fff; text-align: left; cursor: pointer; }
  .floors b { font: 400 26px/1 var(--z-display); color: #6d6d6d; transition: color .2s; }
  .floors strong { display: block; font-size: 16px; font-weight: 700; }
  .floors span { display: block; font-size: 13px; color: #9a9a9a; margin-top: 2px; }
  .floors em { font: normal 400 11px/1 var(--z-mono); letter-spacing: var(--z-ls-mono); color: #9a9a9a; }
  .floors button[aria-current="true"] b { color: var(--z-red); }
  .floors button[aria-current="true"] em { color: var(--z-red); }

  /* 쇼츠: 세로 카드 가로 넘기기 (첫 카드만 살짝 기울임) */
  .shorts-head { margin-top: var(--z-s7); }
  .shorts { display: flex; gap: 14px; overflow-x: auto; scroll-snap-type: x mandatory; scroll-padding: 0 var(--z-s2); margin: var(--z-s4) calc(-1 * var(--z-s2)) 0; padding: 6px var(--z-s2) 10px; scrollbar-width: none; }
  .shorts::-webkit-scrollbar { display: none; }
  .shorts button { flex: 0 0 46%; max-width: 220px; scroll-snap-align: start; background: none; border: 0; padding: 0; color: #fff; text-align: left; cursor: pointer; }
  .shorts figure { position: relative; margin: 0; aspect-ratio: 9 / 16; border-radius: var(--z-r-card); overflow: hidden; background: #1a1a1a; }
  .shorts button:first-child figure { transform: rotate(-2deg); }
  .shorts img { width: 100%; height: 100%; object-fit: cover; display: block; transition: transform var(--z-dur) var(--z-ease); }
  .shorts button:hover img { transform: scale(1.04); }
  .shorts figure::after { content: ''; position: absolute; right: 12px; top: 12px; width: 34px; height: 34px; border-radius: 50%; background: rgba(0,0,0,.55) url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath d='M9 7l8 5-8 5z' fill='%23fff'/%3E%3C/svg%3E") center/20px no-repeat; }
  .shorts .z-mono { display: block; margin-top: 14px; color: #8e8e8e; }
  .shorts strong { display: block; margin-top: 4px; font-size: 15px; line-height: 1.45; font-weight: 700; }
  .film .more { display: flex; gap: 10px; margin-top: var(--z-s4); }
  .film .more .z-btn { flex: 1; min-height: 52px; }
  .film .z-btn.line { color: #fff; border-color: #fff; }
  .film .z-btn.white { background: #fff; border-color: #fff; color: var(--z-ink); }

  /* 영상 창 (쇼츠는 세로) */
  .modal { position: fixed; inset: 0; z-index: 50; background: rgba(0,0,0,.92); display: none; align-items: center; justify-content: center; padding: 56px 16px 24px; }
  .modal.on { display: flex; }
  .modal .box { width: min(100%, calc((100vh - 96px) * 9 / 16)); aspect-ratio: 9 / 16; border-radius: var(--z-r-card); overflow: hidden; background: #000; }
  .modal iframe { width: 100%; height: 100%; border: 0; display: block; }
  .modal .x { position: absolute; right: 14px; top: 10px; width: 44px; height: 44px; border-radius: 50%; border: 1.5px solid #fff; background: none; color: #fff; font-size: 20px; cursor: pointer; }

  /* ---- 인사 ---- */
  .greet blockquote { margin: var(--z-s4) 0 0; font: 400 26px/1.4 var(--z-display-ko); letter-spacing: -.01em; }
  .greet blockquote::before { content: '“'; display: block; font: 400 72px/.6 var(--z-serif); color: var(--z-red); margin-bottom: 8px; }
  .greet p { margin: 18px 0 0; font-size: 16px; line-height: 1.75; }
  .greet .sign { margin-top: 18px; display: flex; align-items: center; gap: 12px; }
  .greet .sign i { width: 40px; height: 1.5px; background: var(--z-ink); }

  /* ---- 숫자 ---- */
  .stats { display: grid; grid-template-columns: repeat(3, 1fr); gap: 8px; margin-top: var(--z-s4); padding-top: var(--z-s3); border-top: 1.5px solid var(--z-ink); }
  .stats b { display: block; font: 400 40px/1 var(--z-display); color: var(--z-mute); letter-spacing: .01em; }
  .stats b small { font: 400 15px/1 var(--z-display-ko); margin-left: 2px; }
  .stats .z-mono { display: block; margin-top: 10px; letter-spacing: .04em; }
  .cats { display: flex; flex-wrap: wrap; gap: 8px; list-style: none; margin: var(--z-s3) 0 0; padding: 0; }
  .cats li { border: 1.5px solid var(--z-ink); border-radius: var(--z-r-pill); padding: 8px 14px; font-size: 14px; }
  .cats b { font: 400 14px/1 var(--z-display); letter-spacing: .03em; margin-left: 4px; color: var(--z-red); }

  /* ---- 실물 명함 (앞: 검정 · 뒤: QR) — 누르면 뒤집힘 ---- */
  .card { perspective: 1400px; margin-top: var(--z-s4); }
  .card .in { position: relative; aspect-ratio: 1.75; transition: transform .8s var(--z-ease); transform-style: preserve-3d; cursor: pointer; }
  .card.flip .in { transform: rotateY(180deg); }
  .face { position: absolute; inset: 0; backface-visibility: hidden; -webkit-backface-visibility: hidden; border-radius: 14px; overflow: hidden; box-shadow: 0 30px 40px -22px rgba(0,0,0,.45); }
  .front { background: var(--z-black); color: #fff; padding: 22px 24px; display: grid; grid-template-rows: auto 1fr auto; }
  .front .top { display: flex; justify-content: space-between; align-items: center; }
  .front .top b { font: 400 18px/1 var(--z-display); letter-spacing: .08em; }
  .front .top .z-mono { color: #8e8e8e; }
  .front h3 { align-self: end; margin: 0; font: 400 40px/1 var(--z-display-ko); }
  .front h3 small { display: block; margin-top: 8px; font: 500 12px/1.4 var(--z-body); color: #bdbdbd; letter-spacing: .02em; }
  .front .meta { display: flex; justify-content: space-between; margin-top: 14px; padding-top: 10px; border-top: 1.5px solid var(--z-red); font: 400 12px/1 var(--z-mono); letter-spacing: .06em; color: #ddd; }
  .back { transform: rotateY(180deg); background: var(--z-paper); border: 1.5px solid var(--z-ink); display: grid; grid-template-columns: auto 1fr; gap: 18px; align-items: center; padding: 20px; }
  .back #qr { line-height: 0; }
  .back #qr img, .back #qr canvas { width: 120px !important; height: 120px !important; }
  .back b { display: block; font: 400 18px/1 var(--z-display); letter-spacing: .08em; margin-bottom: 10px; }
  .back p { margin: 0; font-size: 13px; line-height: 1.6; color: #555; }
  .hint { display: block; text-align: center; margin-top: 16px; }

  /* ---- 목록 (링크) ---- */
  .list { margin-top: var(--z-s3); border-top: 1.5px solid var(--z-ink); }
  .list a { display: grid; grid-template-columns: 54px 1fr auto; align-items: center; gap: 10px; min-height: 66px; padding: 10px 0; border-bottom: 1px solid var(--z-line); transition: padding .3s var(--z-ease); }
  .list a:hover { padding-left: 6px; }
  .list a .z-mono { color: var(--z-red); }
  .list strong { display: block; font-size: 16px; font-weight: 700; }
  .list small { display: block; font-size: 13px; color: var(--z-mute); margin-top: 2px; }
  .list a::after { content: '→'; color: var(--z-mute); }

  /* ---- 매장 ---- */
  .stores { margin-top: var(--z-s3); border-top: 1.5px solid var(--z-ink); }
  .store { padding: 18px 0; border-bottom: 1px solid var(--z-line); }
  .store h3 { margin: 0; display: flex; justify-content: space-between; align-items: baseline; gap: 10px; font-size: 17px; }
  .store h3 .z-mono { color: var(--z-red); }
  .store p { margin: 4px 0 12px; font-size: 14px; color: var(--z-mute); }
  .store .mp { display: flex; gap: 6px; }
  .store .mp a { flex: 1; min-height: 44px; display: flex; align-items: center; justify-content: center; border: 1.5px solid var(--z-ink); border-radius: var(--z-r-pill); font: 700 13px/1 var(--z-body); gap: 6px; }
  .store .mp a svg { width: 20px; height: 20px; flex: none; }
  .store .mp a:active { background: var(--z-ink); color: #fff; }
  .store.main { position: relative; }
  .store figure { margin: 0 0 14px; aspect-ratio: 16 / 9; overflow: hidden; border-radius: var(--z-r-card); background: var(--z-soft); }
  .store img { width: 100%; height: 100%; object-fit: cover; display: block; }
  .store.main figure { margin: 0 0 16px; aspect-ratio: 16 / 10; overflow: hidden; border-radius: 120px 120px var(--z-r-card) var(--z-r-card); background: var(--z-soft); }
  .store.main img { width: 100%; height: 100%; object-fit: cover; object-position: 50% 60%; display: block; }

  /* ---- 기사 ---- */
  .press { margin-top: var(--z-s3); border-top: 1.5px solid var(--z-ink); }
  .press a { display: block; padding: 16px 0; border-bottom: 1px solid var(--z-line); font-size: 15px; line-height: 1.5; font-weight: 600; }
  .press .z-mono { display: block; margin-bottom: 4px; }

  /* ---- 발바닥 ---- */
  footer { margin-top: var(--z-s8); background: var(--z-black); color: #fff; padding: var(--z-s6) 0 calc(110px + env(safe-area-inset-bottom)); overflow: hidden; }
  footer .big { font: 400 clamp(120px, 40vw, 220px)/.8 var(--z-display); letter-spacing: -.01em; }
  footer .big i { color: var(--z-red); font-style: normal; }
  footer p { margin: var(--z-s4) 0 0; font-size: 13px; line-height: 1.8; color: #9a9a9a; }
  footer p a { color: #fff; }

  /* ---- 휴대폰 아래 연락 줄 (위 버튼이 화면 밖으로 나가면 나타남) ---- */
  .dock { position: fixed; left: 0; right: 0; bottom: 0; z-index: 40; display: grid; grid-template-columns: 1fr 1fr 1fr; gap: 8px; padding: 10px 12px calc(10px + env(safe-area-inset-bottom)); background: rgba(255,255,255,.96); backdrop-filter: blur(10px); border-top: 1px solid var(--z-line);
          transform: translateY(110%); transition: transform var(--z-dur) var(--z-ease); }
  .dock.on { transform: none; }
  .dock .z-btn { min-height: 50px; padding: 0 10px; font: 700 15px/1 var(--z-body); letter-spacing: 0; }

  .toast { position: fixed; left: 50%; bottom: 100px; z-index: 60; transform: translateX(-50%); background: var(--z-ink); color: #fff; padding: 12px 20px; border-radius: var(--z-r-pill); font-size: 14px; opacity: 0; transition: opacity .3s; pointer-events: none; white-space: nowrap; }
  .toast.on { opacity: 1; }

  @media (min-width: 700px) {
    .wrap { padding: 0 var(--z-s4); }
    .shorts { margin: var(--z-s4) calc(-1 * var(--z-s4)) 0; padding-left: var(--z-s4); padding-right: var(--z-s4); scroll-padding: 0 var(--z-s4); }
    .shorts button { flex-basis: 200px; }
  }
  @media (prefers-reduced-motion: reduce) { * { transition: none !important; } }

  /* ---- 사진 대신 그림 (타일 무늬 + 지얼 캐릭터, src/build.mjs avatarSvg) ---- */
  .hero figure svg.avatar { position: absolute; inset: 0; width: 100%; height: 100%; display: block; }
  .avatar .drop { animation: drip 2.4s infinite; }
  .avatar .sign { transform-box: fill-box; transform-origin: 50% 0; animation: hold 2.6s ease-in-out infinite; }
  @keyframes drip { 0%, 60% { transform: translateY(0); opacity: 1; } 100% { transform: translateY(14px); opacity: 0; } }
  @keyframes hold { 0%, 100% { transform: rotate(-2deg); } 50% { transform: rotate(2deg); } }

  /* ---- 직원: 하는 일 ---- */
  .tasks { list-style: none; margin: var(--z-s4) 0 0; padding: 0; border-top: 1.5px solid var(--z-ink); }
  .tasks li { display: grid; grid-template-columns: 40px 1fr; align-items: baseline; padding: 16px 0; border-bottom: 1px solid var(--z-line); font-size: 17px; font-weight: 600; line-height: 1.5; }
  .tasks .z-mono { color: var(--z-red); }