/* ============================================================
   CORALHAZE — 히어로 립 (Hero Lip) v2

   site.css 를 건드리지 않는다. 이 화면은 다른 방에서 진행 중인 홈페이지
   작업과 «같은 파일»을 놓고 다투면 안 된다. 필요한 토큰은 site.css 의
   변수를 쓰되, 없을 때를 대비해 기본값을 함께 적는다.

   짜임 — 왼쪽에 세로 사진, 오른쪽에 «네 제품 전부».
   v1 은 색 목록을 사진 위에 얹어 가로로 굴렸다. 그러면 36색 중 예닐곱만
   보이고 나머지는 굴려야 나온다. 립 라인 전체를 보여 주는 것이 이 화면의
   목적이므로, 사진과 목록을 나란히 놓고 목록에 제 폭을 준다.
   ============================================================ */

.hl {
  --hl-coral: var(--coral, #e0685f);
  --hl-ink:   var(--ink, #191316);
  --hl-ink-2: var(--ink-2, #6b5b60);
  --hl-paper: var(--paper, #fdfbfa);
  --hl-paper2:var(--paper-2, #f6efec);
  --hl-gold:  var(--gold, #ab8862);
  position: relative;
  color: var(--hl-ink);
}

.hl-stage {
  display: grid;
  grid-template-columns: minmax(0, 0.86fr) minmax(0, 1fr);
  gap: clamp(18px, 2.6vw, 40px);
  /* ★ stretch 로 두면 카드가 오른쪽 패널 높이만큼 늘어나고, aspect-ratio 가
     그 높이에서 «폭»을 되돌려 계산해 카드가 제 칸을 넘어 패널을 13px
     덮었다(실측). 카드는 제 칸 폭에서 시작하고 높이는 비율이 정한다. */
  align-items: start;
}

/* ── 사진 ─────────────────────────────────────────────────── */
.hl-card {
  position: relative;
  overflow: hidden;
  border-radius: 20px;
  background: #efe6e3;
  width: 100%;
  aspect-ratio: 3 / 4;          /* 구워 온 사진이 3:4 다 */
  box-shadow: var(--sh-2, 0 18px 48px rgba(25, 19, 22, .16));
  /* 조명이 도는 자리. JS 가 한 시계로 이 네 값을 같이 움직인다. */
  --lx: 20%; --ly: 12%; --rx: 80%; --ry: 88%;
}

.hl-media { position: absolute; inset: 0; }
.hl-card { cursor: crosshair }

/* ★ 캔버스도 replaced element 라 object-fit 이 듣는다.
   캔버스의 내부 크기를 사진의 원본 크기와 같게 잡고 같은 object-fit·
   object-position 을 주면, 카드가 어떤 크기로 늘어나도 입술이 «항상»
   제자리에 얹힌다. 커버 박스를 손으로 계산하지 않아도 된다.
   ※ 좁은 화면에서 <img> 는 절반 크기 판을 쓰지만, 비율이 같으므로
     같은 상자 안에서 똑같이 늘어난다 — 어긋나지 않는다(실측 확인). */
.hl-photo,
.hl-lips,
.hl-form,
.hl-skin {
  position: absolute; inset: 0;
  width: 100%; height: 100%;
  object-fit: cover;
  /* ★ 셋이 «같은 값»이어야 한다. 형태 캔버스만 따로 두었다가 좁은 화면에서
     사진과 어긋났다 — 명암이 얼굴 옆의 허공에 떠 있었다. 한 자리에 모은다. */
  object-position: 50% 42%;
}
.hl-lips { pointer-events: none; z-index: 1 }

/* ── 360° 조명 ─────────────────────────────────────────────
   두 겹이다. 빛(soft-light)이 도는 쪽을 데우고, 반대쪽에서 림(screen)이
   윤곽을 띄운다. 둘이 마주 보고 같이 돌기 때문에 «한 광원이 인물 주위를
   돈다»로 읽힌다. 한 겹만 쓰면 그냥 밝은 얼룩이 지나갈 뿐이다. */
.hl-glow {
  position: absolute; inset: -12%;
  pointer-events: none; z-index: 3;
  background: radial-gradient(circle at var(--lx) var(--ly),
    rgba(255, 244, 226, .92) 0%,
    rgba(255, 226, 199, .46) 26%,
    rgba(255, 214, 190, 0) 58%);
  mix-blend-mode: soft-light;
}
.hl-rim {
  position: absolute; inset: -12%;
  pointer-events: none; z-index: 4;
  background: radial-gradient(circle at var(--rx) var(--ry),
    rgba(255, 190, 170, .40) 0%,
    rgba(224, 104, 95, .16) 22%,
    rgba(224, 104, 95, 0) 52%);
  mix-blend-mode: screen;
  opacity: .8;
}
/* ★ 조명 «효과»를 끄면 두 겹이 통째로 걷힌다.
   자동 회전만 끄던 때는 빛이 사진 위에 그대로 얹혀 있었다 — 내 사진에서는
   그것이 «내 사진이 이상해진 것»으로 읽힌다. */
.hl-glow, .hl-rim { transition: opacity .4s ease }
.hl-nolight .hl-glow, .hl-nolight .hl-rim { opacity: 0 }
.hl-nolight .hl-puck, .hl-nolight .hl-orbit { display: none }
.hl-toggle.off { opacity: .45 }


/* ── 얼굴 전체 명암 ─────────────────────────────────────────
   «원래 빛과의 차이»만 담은 회색 지도다(회색 0.5 = 변화 없음).
   그래서 soft-light 로 얹는다 — multiply 나 overlay 는 어두운 곳을 뭉갠다.
   ★ 작다(가로 244px). 명암은 낮은 주파수라 브라우저가 늘려도 계단이
     보이지 않는다. 매 프레임 다시 그리는 것이라 화소 수가 곧 비용이다. */
.hl-form {
  position: absolute; inset: 0;
  width: 100%; height: 100%;
  pointer-events: none; z-index: 2;
  mix-blend-mode: soft-light;
}

/* ── 피부톤(호수) 층 ───────────────────────────────────────
   사진 위에 «톤이 옮겨진 피부»만 알파로 얹는다. 원본을 갈아 끼우는 것이
   아니라 그 위에 덧대는 것이라, 톤이 기준(21호)이면 이 층은 통째로 비어
   있고 사진이 그대로 보인다. */
.hl-skin {
  position: absolute; inset: 0;
  width: 100%; height: 100%;
  object-fit: cover; object-position: 50% 42%;
  pointer-events: none; z-index: 1;
}
.hl-lips { z-index: 2 }
.hl-form { z-index: 3 }
.hl-glow { z-index: 4 }
.hl-rim { z-index: 5 }

/* ── 조명 손잡이 ────────────────────────────────────────────
   ★ 사진 «어디를 눌러도» 그 자리로 빛이 간다(herolip.js).
     손잡이만 잡게 하면 작은 점을 정확히 눌러야 하는 조작이 된다. */
.hl-orbit {
  position: absolute; left: 50%; top: 50%;
  width: 72%; height: 72%;
  transform: translate(-50%, -50%);
  border-radius: 50%;
  border: 1px dashed rgba(255, 255, 255, .22);
  pointer-events: none; z-index: 6;
  opacity: 0; transition: opacity .25s ease;
}
.hl-card:hover .hl-orbit, .hl-card:focus-within .hl-orbit { opacity: 1 }

.hl-puck {
  position: absolute; z-index: 7;
  left: 20%; top: 20%;
  width: 34px; height: 34px; margin: -17px 0 0 -17px;
  border: 0; border-radius: 50%; padding: 0; cursor: grab;
  background: rgba(255, 252, 244, .92);
  color: #8a6a2f;
  box-shadow: 0 0 0 1px rgba(0, 0, 0, .12), 0 4px 14px rgba(0, 0, 0, .3),
              0 0 22px 6px rgba(255, 224, 170, .55);
  display: grid; place-items: center;
  touch-action: none;
  transition: transform .18s cubic-bezier(.4, 0, .2, 1), box-shadow .18s;
}
.hl-puck:hover { transform: scale(1.1) }
.hl-puck:active { cursor: grabbing; transform: scale(.96) }
.hl-puck:focus-visible { outline: 2px solid #fff; outline-offset: 3px }
.hl-puck svg { width: 20px; height: 20px; fill: currentColor; stroke: currentColor; stroke-width: 1.6 }
.hl-puck svg circle { stroke: none }

/* ── 시점 단추 ──────────────────────────────────────────────
   ★ «3D» 라고 쓰지 않는다. 각도마다 촬영본이 따로 있는 것이지 돌아가는
     것이 아니다. 3D 라고 부르면 사용자는 끌어서 돌리기를 기대한다. */
.hl-views {
  position: absolute; left: 12px; top: 12px; z-index: 8;
  display: flex; gap: 4px;
  background: rgba(25, 19, 22, .5); backdrop-filter: blur(8px);
  border-radius: 999px; padding: 3px;
}
.hl-view {
  border: 0; cursor: pointer; border-radius: 999px;
  padding: 5px 11px; font-size: 12px; font-weight: 600;
  background: transparent; color: rgba(255, 255, 255, .8);
  transition: background .18s, color .18s;
}
.hl-view:hover { color: #fff }
.hl-view.on { background: #fff; color: var(--hl-ink) }
.hl-view:focus-visible { outline: 2px solid #fff; outline-offset: 2px }

/* 시점을 받는 동안 — 사진만 살짝 죽인다. 화면을 비우지 않는다. */
.hl-loading .hl-media { opacity: .55; transition: opacity .2s ease }
.hl-loading .hl-puck { pointer-events: none }

/* AI 표기 — 그림과 같이 붙고 같이 걷힌다. 글자로 적는다(색만으로 알리지 않는다) */
.hl-ai {
  position: absolute; right: 12px; top: 12px; z-index: 8;
  background: rgba(25, 19, 22, .72); color: #fff;
  font-size: 11px; font-weight: 600; letter-spacing: .02em;
  padding: 5px 10px; border-radius: 999px;
  backdrop-filter: blur(6px);
}

/* 사진 아래 요약 — 지금 무엇을 겹쳐 놓았는지 사진에서 눈을 떼지 않고 읽는다 */
.hl-onphoto {
  position: absolute; left: 0; right: 0; bottom: 0; z-index: 8;
  padding: 34px 14px 13px;
  display: flex; align-items: flex-end; justify-content: space-between; gap: 10px;
  background: linear-gradient(0deg, rgba(16, 10, 12, .80) 40%, rgba(16, 10, 12, 0));
}
.hl-chips { display: flex; flex-wrap: wrap; gap: 6px; min-width: 0 }
.hl-chip {
  display: inline-flex; align-items: center; gap: 6px;
  background: rgba(255, 255, 255, .14); color: #fff;
  border-radius: 999px; padding: 4px 10px 4px 4px;
  font-size: 11.5px; line-height: 1.3; backdrop-filter: blur(8px);
}
.hl-chip .sw {
  width: 16px; height: 16px; border-radius: 50%; background: var(--c);
  box-shadow: 0 0 0 1px rgba(255, 255, 255, .45) inset;
}

/* ── 오른쪽 패널 ──────────────────────────────────────────── */
.hl-panel { display: flex; flex-direction: column; min-width: 0 }
.hl-k {
  font-size: 11.5px; letter-spacing: .3em; font-weight: 700;
  color: var(--hl-gold); text-transform: uppercase;
}
.hl-panel h1, .hl-panel h2 {
  font-family: var(--serif, Georgia, 'Times New Roman', serif);
  font-weight: 400; letter-spacing: -.02em; line-height: 1.16;
  font-size: clamp(26px, 3.1vw, 42px);
  margin: 10px 0 0;
}
.hl-lead {
  margin: 10px 0 0; font-size: 15px; line-height: 1.75;
  color: var(--hl-ink-2); word-break: keep-all;
}

/* ── 피부톤 호수 ─────────────────────────────────────────── */
.hl-tonebox { margin-top: 18px }
.hl-sub {
  font-size: 11px; letter-spacing: .2em; font-weight: 700;
  color: var(--hl-ink-2); text-transform: uppercase;
}
.hl-tones { display: flex; gap: 6px; margin-top: 8px; flex-wrap: wrap }
.hl-tone {
  display: flex; flex-direction: column; align-items: center; gap: 4px;
  border: 0; background: none; padding: 0; cursor: pointer;
  color: var(--hl-ink-2); flex: 1 1 0; min-width: 44px;
}
.hl-tone .sw {
  width: 100%; height: 30px; border-radius: 8px;
  box-shadow: 0 0 0 1px rgba(0, 0, 0, .09) inset;
  transition: box-shadow .18s, transform .18s;
}
.hl-tone .no { font-size: 11px; font-weight: 600 }
.hl-tone:hover .sw { transform: translateY(-1px) }
/* 고른 호수는 테두리와 «굵은 글씨»로 같이 알린다(색만으로 알리지 않는다) */
.hl-tone.on { color: var(--hl-ink) }
.hl-tone.on .sw {
  box-shadow: 0 0 0 2px var(--hl-ink), 0 0 0 4px rgba(25, 19, 22, .12);
}
.hl-tone.on .no { font-weight: 800 }
.hl-tone:focus-visible { outline: 0 }
.hl-tone:focus-visible .sw { outline: 2px solid var(--hl-coral); outline-offset: 3px }
.hl-note {
  margin: 7px 0 0; font-size: 11px; line-height: 1.55; color: var(--ink-3, #9b8b90);
}
.hl-note b { color: var(--hl-ink-2) }

/* 바르는 법 */
.hl-modes { display: flex; gap: 8px; margin-top: 18px; flex-wrap: wrap }
.hl-mode {
  flex: 1 1 150px; min-width: 0; text-align: left; cursor: pointer;
  border: 1px solid rgba(25, 19, 22, .12); border-radius: 12px;
  background: #fff; padding: 10px 12px;
  transition: border-color .18s, box-shadow .18s, background .18s;
}
.hl-mode b { display: block; font-size: 13.5px; font-weight: 600 }
.hl-mode i {
  display: block; font-style: normal; font-size: 11.5px; line-height: 1.45;
  color: var(--hl-ink-2); margin-top: 3px;
}
.hl-mode:hover { border-color: rgba(25, 19, 22, .28) }
.hl-mode.on {
  border-color: var(--hl-ink); background: var(--hl-ink);
  box-shadow: 0 6px 18px rgba(25, 19, 22, .18);
}
.hl-mode.on b { color: #fff }
.hl-mode.on i { color: rgba(255, 255, 255, .66) }
.hl-mode:focus-visible { outline: 2px solid var(--hl-coral); outline-offset: 2px }

/* 자리(슬롯) */
.hl-slots { display: flex; gap: 8px; margin-top: 12px }
.hl-slot {
  flex: 1 1 0; min-width: 0; cursor: pointer; text-align: left;
  display: flex; align-items: center; gap: 9px;
  border: 1px solid rgba(25, 19, 22, .12); border-radius: 12px;
  background: var(--hl-paper2); padding: 8px 10px;
  transition: border-color .18s, box-shadow .18s;
}
.hl-slot .sw {
  width: 28px; height: 28px; border-radius: 8px; flex: none;
  box-shadow: 0 0 0 1px rgba(0, 0, 0, .08) inset;
  transition: background .28s cubic-bezier(.4, 0, .2, 1);
}
.hl-slot .tx { min-width: 0 }
.hl-slot i {
  display: block; font-style: normal; font-size: 10.5px; letter-spacing: .1em;
  color: var(--hl-ink-2); text-transform: uppercase;
}
.hl-slot b {
  display: block; font-size: 12.5px; font-weight: 600;
  overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
}
/* 지금 채워 넣을 자리 — 테두리와 «점»으로 같이 알린다(색만으로 알리지 않는다) */
.hl-slot.on { border-color: var(--hl-ink); box-shadow: 0 0 0 1px var(--hl-ink) }
.hl-slot.on i::after { content: ' ●'; color: var(--hl-coral) }
.hl-slots.one .hl-slot { flex: 0 1 220px }
.hl-slot:focus-visible { outline: 2px solid var(--hl-coral); outline-offset: 2px }

/* 제품별 색 책 */
.hl-books {
  margin-top: 16px; display: flex; flex-direction: column; gap: 14px;
  /* 네 제품이 다 보이는 것이 목적이므로 스크롤을 «만들지 않는» 것을 우선한다.
     그래도 넘칠 때를 대비해 상한만 둔다. */
  max-height: min(46vh, 420px); overflow-y: auto; padding-right: 4px;
  scrollbar-width: thin;
}
.hl-book .hd {
  display: flex; align-items: baseline; gap: 8px; margin-bottom: 7px;
}
.hl-book .hd b { font-size: 12.5px; font-weight: 700; letter-spacing: -.01em }
.hl-book .hd i { font-style: normal; font-size: 11px; color: var(--hl-ink-2) }
.hl-book .row {
  display: grid; grid-template-columns: repeat(auto-fill, minmax(52px, 1fr)); gap: 8px;
}
.hl-sw {
  display: flex; flex-direction: column; align-items: center; gap: 5px;
  padding: 0; border: 0; background: none; cursor: pointer;
  color: var(--hl-ink-2); min-width: 0;
}
.hl-sw .sw {
  width: 38px; height: 38px; border-radius: 50%; background: var(--c);
  box-shadow: 0 0 0 1px rgba(0, 0, 0, .08) inset, 0 2px 6px rgba(0, 0, 0, .14);
  transition: transform .18s cubic-bezier(.4, 0, .2, 1), box-shadow .18s;
  position: relative;
}
.hl-sw .nm {
  font-size: 10px; line-height: 1.25; text-align: center; max-width: 100%;
  overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
}
.hl-sw:hover .sw { transform: scale(1.12) }
/* 고른 것은 링으로 표시하고, 두 색·세 색일 때는 «몇 번째 자리»인지 숫자를 얹는다 */
.hl-sw.on { color: var(--hl-ink) }
.hl-sw.on .sw {
  transform: scale(1.1);
  box-shadow: 0 0 0 2px var(--hl-ink), 0 0 0 4px rgba(25, 19, 22, .14), 0 2px 8px rgba(0, 0, 0, .2);
}
.hl-sw.on[data-slot]:not([data-slot=""]) .sw::after {
  content: attr(data-slot);
  position: absolute; right: -4px; top: -4px;
  width: 15px; height: 15px; border-radius: 50%;
  background: var(--hl-ink); color: #fff;
  font-size: 9.5px; font-weight: 700; line-height: 15px; text-align: center;
}
.hl-sw:focus-visible { outline: 0 }
.hl-sw:focus-visible .sw { outline: 2px solid var(--hl-coral); outline-offset: 3px }

/* 바닥 */
.hl-foot {
  display: flex; align-items: center; gap: 14px; flex-wrap: wrap;
  margin-top: 16px; padding-top: 14px;
  border-top: 1px solid rgba(25, 19, 22, .1);
}
.hl-btn {
  display: inline-flex; align-items: center; justify-content: center;
  padding: 11px 18px; border-radius: 999px; border: 0;
  font-size: 14.5px; font-weight: 500; cursor: pointer; text-decoration: none;
  transition: background .2s, color .2s, transform .2s;
}
.hl-btn.c { background: var(--hl-ink); color: #fff }
.hl-btn.c:hover { background: #2c2126 }
.hl-btn.g {
  background: rgba(255, 255, 255, .14); color: #fff;
  backdrop-filter: blur(14px);
  box-shadow: 0 0 0 1px rgba(255, 255, 255, .24) inset;
}
.hl-btn.g:hover { background: rgba(255, 255, 255, .26) }
.hl-btn.sm { padding: 7px 12px; font-size: 12px; flex: none }
.hl-btn:active { transform: scale(.97) }
.hl-btn:focus-visible { outline: 2px solid var(--hl-coral); outline-offset: 3px }

.hl-toggle {
  display: inline-flex; align-items: center; gap: 7px;
  font-size: 13px; color: var(--hl-ink-2); cursor: pointer;
}
.hl-toggle input { width: 15px; height: 15px; accent-color: var(--hl-coral) }

.hl-disc {
  margin: 10px 0 0; font-size: 11.5px; line-height: 1.6; color: var(--ink-3, #9b8b90);
}

/* 효과를 못 쓰는 경우 — 사진과 카피는 그대로 두고 고르는 곳만 걷는다 */
.hl-nofx .hl-modes, .hl-nofx .hl-slots, .hl-nofx .hl-books, .hl-nofx .hl-tonebox, .hl-nofx .hl-skin,
.hl-nofx .hl-onphoto, .hl-nofx .hl-glow, .hl-nofx .hl-rim,
.hl-nofx .hl-puck, .hl-nofx .hl-orbit, .hl-nofx .hl-views, .hl-nofx .hl-form { display: none }

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

/* ── 좁은 화면 ───────────────────────────────────────────────
   한 줄로 세운다. 사진이 먼저, 고르는 곳이 아래.
   ★ 사진을 3:4 그대로 두면 세로 화면에서 사진 하나가 화면을 다 먹는다.
     4:5 로 줄이고 얼굴 쪽으로 당긴다. */
@media (max-width: 900px) {
  .hl-stage { grid-template-columns: 1fr; gap: 16px }
  /* 사진 비율(3:4) 그대로 둔다. 4:5 로 자르면 세로로 28px 을 잘라 내면서
     얼굴 위치를 조절할 여지가 사라진다(실측). */
  .hl-card { aspect-ratio: 3 / 4; border-radius: 14px }
  .hl-photo, .hl-lips, .hl-form, .hl-skin { object-position: 50% 50% }
  /* ★ 좁은 화면에서는 입술이 손톱만 해진다. 입술 선을 축으로 당겨 준다.
     축을 입술에 두면 확대해도 입술이 제자리에 머문다 — 축이 위에 있으면
     확대할수록 입술이 아래로 밀려 요약 줄에 깔린다(실제로 그랬다).
     ※ 사진·입술·형태가 «같은 상자»(.hl-media) 안에서 같이 확대되므로
       셋이 어긋나지 않는다. 각각 확대하면 반드시 어긋난다. */
  .hl-media { transform: scale(1.28); transform-origin: 50% 64% }
  .hl-books { max-height: none; overflow: visible; padding-right: 0 }
  .hl-mode { flex: 1 1 100% }
  .hl-mode i { display: inline; margin-left: 6px }
  .hl-panel h1, .hl-panel h2 { font-size: clamp(24px, 6vw, 32px) }
  .hl-lead { font-size: 14px }
}
@media (max-width: 480px) {
  .hl-slots { flex-wrap: wrap }
  .hl-slot { flex: 1 1 calc(50% - 4px) }
  .hl-book .row { grid-template-columns: repeat(auto-fill, minmax(48px, 1fr)); gap: 6px }
  .hl-sw .sw { width: 34px; height: 34px }
}

@media (prefers-reduced-motion: reduce) {
  .hl-slot .sw, .hl-sw .sw, .hl-btn, .hl-glow, .hl-rim { transition: none !important }
}


/* ══ 내 얼굴 ═══════════════════════════════════════════════════
   이 화면의 광고 모델은 사용자다. 등록이 없으면 AI 캐릭터가 그 자리를 지킨다. */
/* ★ 시점 줄 «바로 아래»에 둔다.
   처음에는 사진 오른쪽 아래에 뒀는데 조명 손잡이가 도는 자리와 겹쳤다.
   손잡이는 사진 위를 도는 물건이라 «비어 있는 구석»이라는 것이 없다.
   그리고 이 단추가 정하는 것은 «누가 모델인가»이므로, «어느 각도인가»를
   정하는 시점 줄 옆에 있는 것이 뜻으로도 맞다. */
.hl-me { position: absolute; left: 12px; top: 54px; z-index: 9 }
.hl-mebtn {
  border: 0; cursor: pointer; border-radius: 999px;
  padding: 7px 13px; font-size: 12px; font-weight: 600;
  background: rgba(255, 255, 255, .92); color: var(--hl-ink);
  box-shadow: 0 3px 12px rgba(0, 0, 0, .28);
  backdrop-filter: blur(8px);
  transition: background .18s, transform .18s;
}
.hl-mebtn:hover { transform: translateY(-1px) }
.hl-mebtn.has { background: rgba(25, 19, 22, .62); color: #fff }
.hl-mebtn:focus-visible { outline: 2px solid #fff; outline-offset: 3px }

/* 내 얼굴일 때는 «AI 생성» 대신 «이 기기 안에만 있다»를 적는다 */
.hl-mine .hl-ai { background: rgba(21, 115, 74, .82) }

/* 짧은 동의 — 가상 발색과 같은 뜻의 문안이다 */
.hl-consent {
  position: fixed; inset: 0; z-index: 200;
  display: grid; place-items: center;
  background: rgba(16, 10, 12, .55); backdrop-filter: blur(3px);
  padding: 20px;
}
.hl-consent .pane {
  background: #fff; border-radius: 18px; padding: 24px 24px 20px;
  max-width: 480px; width: 100%; max-height: 86vh; overflow: auto;
  box-shadow: 0 24px 60px rgba(0, 0, 0, .3);
}
.hl-consent h3 { margin: 0; font-size: 17px; font-weight: 700 }
.hl-consent .lead { margin: 10px 0 0; font-size: 14px; line-height: 1.7; color: var(--hl-ink-2) }
.hl-consent ul { margin: 12px 0 0; padding-left: 18px }
.hl-consent li { font-size: 13px; line-height: 1.75; color: var(--hl-ink-2); margin-top: 4px }
.hl-consent .age { margin: 10px 0 0; font-size: 12px; color: var(--ink-3, #9b8b90) }
.hl-consent .chk {
  display: flex; gap: 8px; align-items: flex-start;
  margin-top: 12px; font-size: 13.5px; line-height: 1.5; cursor: pointer;
}
.hl-consent .chk input { margin-top: 2px; width: 16px; height: 16px; accent-color: var(--hl-coral) }
.hl-consent .row { display: flex; gap: 8px; margin-top: 18px }
.hl-btn.g.dark {
  background: rgba(25, 19, 22, .07); color: var(--hl-ink); box-shadow: none;
}
.hl-btn.g.dark:hover { background: rgba(25, 19, 22, .13) }

.hl-toast {
  position: fixed; left: 50%; bottom: 34px; transform: translate(-50%, 14px);
  z-index: 210; opacity: 0; pointer-events: none;
  background: var(--hl-ink); color: #fff; border-radius: 999px;
  padding: 10px 18px; font-size: 13.5px;
  transition: opacity .25s, transform .25s;
}
.hl-toast.on { opacity: 1; transform: translate(-50%, 0) }

@media (max-width: 900px) {
  .hl-me { left: 12px; top: 52px }
}
@media (prefers-reduced-motion: reduce) {
  .hl-mebtn, .hl-toast { transition: none !important }
}


/* 사진을 어디서 가져올지 · 카메라 —
   둘 다 히어로 위에 잠깐 뜨는 것이라 같은 상자를 쓴다 */
.hl-pick, .hl-cam {
  position: fixed; inset: 0; z-index: 200;
  display: grid; place-items: center;
  background: rgba(16, 10, 12, .55); backdrop-filter: blur(3px);
  padding: 20px;
}
.hl-pick .pane {
  background: #fff; border-radius: 18px; padding: 18px;
  display: flex; flex-direction: column; gap: 8px;
  min-width: 260px; max-width: 480px; width: 100%;
  max-height: 86vh; overflow: auto;
  box-shadow: 0 24px 60px rgba(0, 0, 0, .3);
}
/* 동의가 필요할 때는 같은 창 위쪽에 붙는다 — 창을 두 번 띄우지 않는다 */
.hl-pick .pane h3 { margin: 0; font-size: 17px; font-weight: 700 }
.hl-pick .pane .lead { margin: 4px 0 0; font-size: 14px; line-height: 1.7; color: var(--hl-ink-2) }
.hl-pick .pane ul { margin: 8px 0 0; padding-left: 18px }
.hl-pick .pane li { font-size: 13px; line-height: 1.75; color: var(--hl-ink-2); margin-top: 4px }
.hl-pick .pane .age { margin: 6px 0 0; font-size: 12px; color: var(--ink-3, #9b8b90) }
.hl-pick .pane .chk {
  display: flex; gap: 8px; align-items: flex-start;
  margin-top: 6px; font-size: 13.5px; line-height: 1.5; cursor: pointer;
}
.hl-pick .pane .chk input { margin-top: 2px; width: 16px; height: 16px; accent-color: var(--hl-coral) }
.hl-pick .pane .row { display: flex; flex-direction: column; gap: 8px; margin-top: 8px }
.hl-pick .pane .need {
  margin: 2px 0 0; font-size: 12px; color: var(--hl-coral); display: none;
}
.hl-pick.locked .pane .need { display: block }

/* 파일 열기는 label 이다 — 브라우저가 직접 창을 연다.
   ★ JS 로 input.click() 을 부르면 «사용자 조작»으로 인정받는 조건에 걸려
     아무 일도 안 일어난 것처럼 보일 수 있다. 기본 동작이 안전하다. */
.hl-btn.aslabel { cursor: pointer; user-select: none }
.hl-pick.locked .hl-btn.aslabel {
  opacity: .45; pointer-events: none;
}
.hl-pick.locked .hl-btn.g.dark[disabled] { opacity: .45 }
.hl-cam .pane {
  background: #fff; border-radius: 18px; padding: 14px;
  max-width: 460px; width: 100%; box-shadow: 0 24px 60px rgba(0, 0, 0, .3);
}
.hl-cam video {
  width: 100%; border-radius: 12px; background: #111; display: block;
  aspect-ratio: 3 / 4; object-fit: cover;
  /* 거울처럼 보여야 사람이 자기 위치를 맞출 수 있다.
     ★ 찍을 때는 되돌린다(herolip.js grab) — 안 그러면 좌우가 뒤집힌
       사진이 저장된다. */
  transform: scaleX(-1);
}
.hl-cam .hint {
  margin: 9px 0 0; font-size: 12.5px; line-height: 1.6; color: var(--hl-ink-2);
}
.hl-cam .row { display: flex; gap: 8px; margin-top: 12px }
.hl-cam .row .hl-btn { flex: 1 1 0 }

/* 내 얼굴 단추가 둘일 수 있다(각도 추가 · 지우기) */
.hl-me { display: flex; flex-direction: column; gap: 6px; align-items: flex-start }

/* 셋째 길(내 사진에 입혀보기) 안내문 — 굽기 없는 배포본에서만 보인다 */
.hl-mehint{margin:8px 0 0;font-size:12.5px;line-height:1.6;color:var(--ink2,#6b625c)}

/* ── 내 사진 등록 · 패널 쪽 입구 ──────────────────────────────────────────
   사진 위 알약 하나만 두었더니 「단추가 없다」는 말을 들었다(2026-08-01).
   히어로가 페이지 맨 위에 설 때는 보였지만, 도감 «안»에 서면 사람은
   오른쪽 조작 패널을 읽는다. 같은 기능의 입구를 여기에도 세운다. */
.hl-mepanel {
  margin: 14px 0 2px; padding: 13px 15px 14px; border-radius: 14px;
  background: var(--hl-paper2); border: 1px solid rgba(25, 19, 22, .08);
}
.hl-mepanel .hl-sub { margin: 0 0 5px }
.hl-meline {
  margin: 0 0 11px; font-size: 12.5px; line-height: 1.6; color: var(--hl-ink-2);
}
.hl-merow { display: flex; flex-wrap: wrap; gap: 8px }
.hl-mebtn2 {
  border: 0; cursor: pointer; border-radius: 999px; padding: 9px 17px;
  font-size: 13px; font-weight: 700; background: var(--hl-ink); color: #fff;
  box-shadow: 0 2px 9px rgba(25, 19, 22, .18);
  transition: transform .18s, box-shadow .18s;
}
.hl-mebtn2:hover { transform: translateY(-1px); box-shadow: 0 5px 14px rgba(25, 19, 22, .22) }
.hl-mebtn2.has {
  background: transparent; color: var(--hl-ink-2);
  box-shadow: inset 0 0 0 1px rgba(25, 19, 22, .18);
}
.hl-mebtn2:focus-visible { outline: 2px solid var(--hl-coral); outline-offset: 3px }
@media (prefers-reduced-motion: reduce) { .hl-mebtn2 { transition: none } }