/* ============================================================
       A24 레이아웃 실측 기반 토큰
       히어로 제목 74px@1440 = 5.14vw / weight 500 / 자간 -0.04em / 행간 0.92
       피드 칼럼 1232/1440 = 85.5% / 항목 = 정사각 이미지 + 카피
       ============================================================ */
    :root {
      --white: #f1f1f1;      /* A24 상점 실측 — 순백이 아닌 밝은 회색 */
      --pure: #ffffff;
      --ink: #0a0a0a;
      --grey: #767676;
      --line: #e4e4e4;
      --sepia: #3e2a23;   /* 브랜드 */
      --sand: #e4dfd4;    /* 브랜드 */
      --col: 85.5%;       /* 중앙 칼럼 */
      --edge: 24px;       /* 화면 가장자리 여백 */
    }
    * { box-sizing: border-box; margin: 0; padding: 0; }
    html { background: var(--white); }
    body {
      font-family: "Pretendard Variable", Pretendard, -apple-system, "Helvetica Neue", Arial, sans-serif;
      background: var(--white); color: var(--ink);
      font-size: 15px; line-height: 1.55; word-break: keep-all; text-wrap: pretty;
      -webkit-font-smoothing: antialiased; letter-spacing: -0.03em;   /* 한글 자간 -30 */
    }
    a { color: inherit; text-decoration: none; }
    img, video { display: block; max-width: 100%; }
    button { font: inherit; color: inherit; background: none; border: 0; cursor: pointer; }
    li { list-style: none; }
    :focus-visible { outline: 2px solid currentColor; outline-offset: 3px; }

    /* A24식 타이포 — 굵기 500, 자간 타이트 */
    .t-display { font-weight: 500; letter-spacing: -0.04em; line-height: .92; }
    .t-head    { font-weight: 500; letter-spacing: -0.03em; line-height: 1.02; }
    .eyebrow   { font-size: 13px; text-transform: uppercase; font-weight: 400; letter-spacing: 0; }
    .grey { color: var(--grey); }

    /* ---------------- 상단바 ---------------- */
    .top {
      position: fixed; inset: 0 0 auto 0; z-index: 60; height: 72px;
      display: grid; grid-template-columns: 1fr auto 1fr; align-items: center;
      padding: 0 var(--edge); color: var(--white);
      transition: color .3s ease;
    }
    .top.dark { color: var(--ink); }
    .top .menu-btn { display: inline-flex; align-items: center; gap: 12px; justify-self: start; font-size: 15px; text-transform: uppercase; }
    .top .menu-btn i { display: block; width: 22px; height: 11px; position: relative; }
    .top .menu-btn i::before, .top .menu-btn i::after { content: ""; position: absolute; left: 0; right: 0; height: 1.4px; background: currentColor; }
    .top .menu-btn i::before { top: 0; } .top .menu-btn i::after { bottom: 0; }
    .top .logo { height: 30px; filter: invert(1); transition: filter .3s ease; }
    .top.dark .logo { filter: none; }
    .top .book { justify-self: end; font-size: 15px; text-transform: uppercase; }

    /* ---------------- 전면 메뉴 ---------------- */
    .overlay {
      position: fixed; inset: 0; z-index: 70; background: var(--ink); color: var(--white);
      padding: 0 var(--edge); transform: translateY(-100%);
      transition: transform .55s cubic-bezier(.76,0,.24,1);
      display: flex; flex-direction: column;
    }
    .overlay.open { transform: none; }
    .overlay .bar { height: 72px; display: flex; align-items: center; }
    .overlay .bar button { display: inline-flex; align-items: center; gap: 12px; font-size: 15px; text-transform: uppercase; }
    .overlay .bar i { display: block; width: 16px; height: 16px; position: relative; }
    .overlay .bar i::before, .overlay .bar i::after { content: ""; position: absolute; top: 50%; left: 0; right: 0; height: 1.4px; background: currentColor; transform: rotate(45deg); }
    .overlay .bar i::after { transform: rotate(-45deg); }
    .overlay nav { margin-top: 3vh; }
    .overlay nav a { display: inline-block; font-size: clamp(2.4rem, 6vw, 4.6rem); font-weight: 500; letter-spacing: -0.04em; line-height: 1.12; }
    .overlay nav a sup { font-size: 15px; letter-spacing: 0; font-weight: 400; margin-left: 10px; vertical-align: super; color: #9b9b9b; }
    .overlay nav a:hover { color: #9b9b9b; }
    .overlay .foot { margin-top: auto; padding: 20px 0 28px; color: #9b9b9b; display: flex; gap: 24px; flex-wrap: wrap; }
    @media (prefers-reduced-motion: reduce) { .overlay { transition: none; } }

    /* ---------------- 히어로 ---------------- */
    .hero { position: relative; height: 100svh; overflow: hidden; background: var(--ink); }
    .hero .media { position: absolute; inset: 0; }
    .hero .media > * {
      position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover;
      opacity: 0; transition: opacity .55s ease;
    }
    .hero .media > .on { opacity: 1; }
    
    
    .hero .shade {
      position: absolute; inset: 0; pointer-events: none;
      background: linear-gradient(180deg, rgba(0,0,0,.3) 0%, rgba(0,0,0,0) 28%, rgba(0,0,0,0) 52%, rgba(0,0,0,.55) 100%);
    }
    .hero .titles { position: absolute; left: var(--edge); bottom: 52px; z-index: 2; }
    .hero .titles a { text-wrap: balance;
      display: block; color: var(--white);
      font-size: clamp(2rem, 5.14vw, 4.6rem);
      font-weight: 500; letter-spacing: -0.04em; line-height: .92;
      padding: 1px 0; transition: opacity .3s ease;
    }
    .hero .titles sup { font-size: 15px; font-weight: 400; letter-spacing: 0; vertical-align: baseline; margin-left: 10px; }
    /* 다른 항목에 호버 중일 때만 나머지가 살짝 물러남 */
    .hero .titles.hovering a { opacity: .45; }
    .hero .titles.hovering a:hover, .hero .titles.hovering a:focus-visible { opacity: 1; }
    .hero .counter {
      position: absolute; right: var(--edge); bottom: 52px; z-index: 2; color: var(--white);
      display: flex; flex-direction: column; align-items: center; gap: 8px; font-size: 15px;
    }
    .hero .counter i { display: block; width: 1px; height: 60px; background: currentColor; opacity: .7; }

    /* ---------------- 에디토리얼 스택 (A24 하단) ---------------- */
    .stack { background: var(--white); }
    .item {
      width: var(--col); margin: 36px auto 120px;
      display: grid; grid-template-columns: 60% 1fr; align-items: stretch;
    }
    .item figure { position: relative; aspect-ratio: 1 / 1; overflow: hidden; background: #f2f2f2; }
    .item figure img { width: 100%; height: 100%; object-fit: cover; transition: transform .8s cubic-bezier(.2,0,.2,1); }
    .item:hover figure img { transform: scale(1.03); }
    .item .copy { display: flex; flex-direction: column; justify-content: center; padding: 0 0 0 48px; }
    .item .copy h3 { text-wrap: balance; font-size: clamp(1.6rem, 2.4vw, 2.3rem); font-weight: 500; letter-spacing: -0.03em; line-height: 1.06; margin: 12px 0 0; }
    .item .copy p { color: var(--grey); margin-top: 14px; max-width: 30em; }
    /* A24식 화살표 — 선과 화살촉을 하나의 SVG로. 글자 앞에 놓고 간격을 둔다 */
.cta, .item .copy .cta, .item.note .cta, .course .cta {
  display: inline-flex; align-items: center; gap: 22px;
  font-size: 15px; letter-spacing: -.02em; border: 0; padding: 0;
  margin-top: 24px; align-self: flex-start;
}
.cta::before {
  content: ""; flex: none; width: 46px; height: 10px;
  background: currentColor;
  -webkit-mask: var(--arrow) no-repeat right center / contain;
          mask: var(--arrow) no-repeat right center / contain;
  transition: width .35s cubic-bezier(.2,0,.2,1);
}
.cta:hover::before { width: 66px; }
.cta::after { content: none; }
    /* 이미지가 오른쪽으로 */
    .item.flip { grid-template-columns: 1fr 60%; }
    .item.flip figure { order: 2; }
    .item.flip .copy { order: 1; padding: 0 48px 0 0; }
    /* 풀블리드 */
    .item.full { width: 100%; margin: 0 0 120px; display: block; position: relative; }
    .item.full figure { aspect-ratio: 2 / 1; }
    .item.full .copy { position: absolute; left: var(--edge); bottom: 40px; padding: 0; color: var(--white); }
    .item.full .copy h3 { font-size: clamp(2rem, 4vw, 3.4rem); }
    .item.full .copy .eyebrow, .item.full .copy p { color: rgba(255,255,255,.85); }
    /* 텍스트 전용 (A24의 note) */
    .item.note { display: block; padding: 90px 0 50px; }
    .item.note h3 { text-wrap: balance; font-size: clamp(1.8rem, 3.6vw, 3rem); font-weight: 500; letter-spacing: -0.035em; line-height: 1.08; max-width: 16em; margin: 16px 0 0; }
    .item.note p { color: var(--grey); margin: 18px 0 0; max-width: 32em; }
    

    /* ---------------- 상세 섹션 ---------------- */
    .section { width: var(--col); margin: 0 auto; padding: 100px 0; border-top: 1px solid var(--rule); }
    .section > header { display: grid; grid-template-columns: 1fr 2fr; gap: 24px 48px; margin-bottom: 56px; }
    .section h2 { text-wrap: balance; font-size: clamp(1.8rem, 3.4vw, 2.8rem); font-weight: 500; letter-spacing: -0.035em; line-height: 1.02; }
    .section > header p { color: var(--grey); max-width: 34em; align-self: end; }

    .about-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 48px; align-items: start; }
    .about-grid figure img { width: 100%; aspect-ratio: 4/5; object-fit: cover; }
    .about-grid figcaption { margin-top: 10px; color: var(--grey); }
    .bio p { font-size: 1.1rem; line-height: 1.55; max-width: 32em; }
    .bio p + p { margin-top: 16px; }
    .career { margin-top: 36px; border-top: 1px solid var(--line); }
    .career li { display: grid; grid-template-columns: 6rem 1fr; gap: 16px; padding: 14px 0; border-bottom: 1px solid var(--line); }
    .career li span { color: var(--grey); }

    .svc-group + .svc-group { margin-top: 64px; }
    .svc-group > .eyebrow { display: block; font-size: 13px; color: var(--label); margin-bottom: 16px; }
    .svc { border-top: 1px solid var(--line); }
    .svc li { display: grid; grid-template-columns: 1.1fr 2fr 1fr; gap: 32px; padding: 26px 0; border-bottom: 1px solid var(--line); align-items: baseline; }
    .svc h3 { font-size: 1.4rem; font-weight: 500; letter-spacing: -0.03em; }
    .svc p { color: var(--grey); }
    .svc dl { display: grid; grid-template-columns: auto 1fr; gap: 4px 12px; }
    .svc dt { color: var(--grey); }

    .courses { display: grid; grid-template-columns: 1fr 1fr; gap: 0 48px; border-top: 1px solid var(--rule); }
    .course { padding: 28px 0 32px; display: flex; flex-direction: column; }
    .course.main { background: var(--white); }   /* 채움 대신 선과 여백으로 구분한다 */
    .course h3 { font-size: 1.7rem; font-weight: 500; letter-spacing: -0.03em; }
    .course .who { margin-top: 6px; opacity: .7; }
    .course .price { font-size: 2.4rem; font-weight: 500; letter-spacing: -0.03em; margin: 24px 0 18px; }
    .course ul { flex: 1; }
    .course li { padding: 9px 0; border-top: 1px solid #ddd; }
    
    

    .faq details { border-top: 1px solid var(--line); }
    .faq details:last-of-type { border-bottom: 1px solid var(--line); }
    .faq summary { cursor: pointer; display: flex; justify-content: space-between; gap: 24px; padding: 22px 0; font-size: 1.15rem; font-weight: 500; letter-spacing: -0.02em; }
    .faq summary::-webkit-details-marker { display: none; }
    .faq summary::after { content: "+"; font-weight: 300; font-size: 1.4rem; line-height: 1; color: var(--grey); transition: transform .2s; }
    .faq details[open] summary::after { transform: rotate(45deg); }
    .faq details p { color: var(--grey); padding: 0 0 24px; max-width: 40em; }

    .contact-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 48px; }
    .contact-grid dl { display: grid; grid-template-columns: 5rem 1fr; gap: 10px; }
    .contact-grid dt { color: var(--grey); }
    .links { margin-top: 32px; border-top: 1px solid var(--line); }
    .links a { display: flex; justify-content: space-between; padding: 16px 0; border-bottom: 1px solid var(--line); font-size: 1.1rem; }
    .links a::after { content: "→"; color: var(--grey); }
    form label { display: block; font-size: 15px; text-transform: uppercase; color: var(--grey); margin-bottom: 6px; }
    form input, form select, form textarea {
      width: 100%; background: transparent; border: 0; border-bottom: 1px solid var(--line);
      color: var(--ink); font: inherit; padding: 9px 0 11px; margin-bottom: 24px;
    }
    form input:focus, form select:focus, form textarea:focus { outline: none; border-color: var(--ink); }
    form button {
      display: block; width: 100%; padding: 34px 18px; margin-top: 8px;
      background: var(--ink); color: var(--white);
      font-size: 1.35rem; font-weight: 500; letter-spacing: -.02em;
      border-radius: 0; text-transform: none;
    }
    form button:hover { background: #000; }
    form .fine { margin-top: 12px; color: var(--grey); }

    .footer { width: var(--col); margin: 0 auto; padding: 56px 0 48px; border-top: 1px solid var(--line); display: grid; grid-template-columns: 1fr 1fr 1fr; gap: 24px; color: var(--grey); line-height: 1.8; }
    .footer img { height: 34px; }
    .footer .cols a { display: block; }
    .footer .cols a:hover { color: var(--ink); }

    /* ---------------- 반응형 ---------------- */
    @media (max-width: 900px) {
      :root { --col: 100%; --edge: 18px; }
      .item, .section, .footer { width: auto; margin-left: var(--edge); margin-right: var(--edge); }
      .item { grid-template-columns: 1fr; margin-bottom: 72px; }
      .item.flip { grid-template-columns: 1fr; }
      .item.flip figure, .item.flip .copy { order: 0; }
      .item .copy, .item.flip .copy { padding: 20px 0 0; }
      .item.full { margin-left: 0; margin-right: 0; }
      .section > header, .about-grid, .courses, .contact-grid { grid-template-columns: 1fr; }
      .svc li { grid-template-columns: 1fr; gap: 10px; }
      .footer { grid-template-columns: 1fr; }
      .hero .titles { bottom: 40px; }
      .hero .titles sup { display: none; }
    }

    /* ---------------- 5단계 프로세스 ---------------- */
    .steps { counter-reset: st; border-top: 1px solid var(--line); }
    .steps li { counter-increment: st; display: grid; grid-template-columns: 3rem 10rem 1fr; gap: 24px; padding: 22px 0; border-bottom: 1px solid var(--line); align-items: baseline; }
    .steps li::before { content: "0" counter(st); color: var(--grey); }
    .steps h4 { font-size: 1.15rem; font-weight: 500; letter-spacing: -0.025em; }
    .steps p { color: var(--grey); }

    /* ---------------- 포트폴리오 ---------------- */
    .folio { display: grid; grid-template-columns: repeat(3, 1fr); gap: 8px; }
    .folio figure { position: relative; aspect-ratio: 1/1; overflow: hidden; background: #f2f2f2; }
    .folio img { width: 100%; height: 100%; object-fit: cover; transition: transform .7s var(--ease, cubic-bezier(.2,0,.2,1)); }
    .folio figure:hover img { transform: scale(1.04); }
    .folio figcaption { margin-top: 8px; color: var(--grey); }

    /* ---------------- 유튜브 목록 ---------------- */
    .videos { display: grid; grid-template-columns: repeat(3, 1fr); gap: 28px 20px; }
    .videos a { display: block; }
    .videos .thumb { position: relative; aspect-ratio: 16/9; overflow: hidden; background: #ddd; }
    .videos .thumb img { width: 100%; height: 100%; object-fit: cover; transition: transform .6s cubic-bezier(.2,0,.2,1); }
    .videos a:hover .thumb img { transform: scale(1.04); }
    .videos .thumb::after {
      content: ""; position: absolute; left: 50%; top: 50%; width: 54px; height: 54px; margin: -27px 0 0 -27px;
      border-radius: 50%; background: rgba(10,10,10,.72);
      box-shadow: inset 0 0 0 0 rgba(255,255,255,0);
      transition: background .3s;
    }
    .videos .thumb::before {
      content: ""; position: absolute; left: 50%; top: 50%; z-index: 2; margin: -8px 0 0 -4px;
      border-left: 15px solid var(--white); border-top: 9px solid transparent; border-bottom: 9px solid transparent;
    }
    .videos a:hover .thumb::after { background: rgba(10,10,10,.9); }
    .videos h4 { margin-top: 12px; font-size: 1.05rem; font-weight: 500; letter-spacing: -0.025em; line-height: 1.3; }
    .videos time { display: block; margin-top: 5px; color: var(--grey); }
    .channel-row { display: flex; justify-content: space-between; align-items: baseline; gap: 20px; margin-bottom: 24px; flex-wrap: wrap; }

    /* ---------------- 약력 ---------------- */
    .bio-lead { font-size: clamp(1.3rem,2.6vw,2rem); font-weight: 500; letter-spacing: -0.03em; line-height: 1.2; max-width: 22em; }

    @media (max-width: 900px) {
      .steps li { grid-template-columns: 2.5rem 1fr; }
      .steps li p { grid-column: 2; }
      .folio { grid-template-columns: 1fr 1fr; }
      .videos { grid-template-columns: 1fr; }
    }

/* ============================================================
   하위 페이지 (A24 상세 페이지 구조)
   중간 높이 히어로 → 정보 행 → 타일 그리드
   ============================================================ */
.crumb { display: inline-flex; align-items: center; gap: 12px; justify-self: start; font-size: 15px; text-transform: uppercase; }
.crumb i { display: block; width: 22px; height: 11px; position: relative; }
.crumb i::before, .crumb i::after { content: ""; position: absolute; left: 0; right: 0; height: 1.4px; background: currentColor; }
.crumb i::before { top: 0; } .crumb i::after { bottom: 0; }
.crumb .sep { opacity: .55; }

/* 페이지 히어로 — 화면 절반 높이 */
.page-hero { position: relative; height: 62svh; min-height: 380px; overflow: hidden; background: var(--ink); }
.page-hero img, .page-hero video { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; }
.page-hero .shade { position: absolute; inset: 0; background: linear-gradient(180deg, rgba(0,0,0,.34) 0%, rgba(0,0,0,0) 34%, rgba(0,0,0,.52) 100%); }
.page-hero h1 { text-wrap: balance;
  position: absolute; left: var(--edge); bottom: 34px; z-index: 2; color: var(--white);
  font-size: clamp(2rem, 5.14vw, 4.4rem); font-weight: 500; letter-spacing: -.04em; line-height: .96;
}
.page-hero h1 sup { font-size: 15px; font-weight: 400; letter-spacing: 0; vertical-align: baseline; margin-left: 10px; }

/* 정보 행 — A24의 DIRECTED BY / RELEASE DATE / STARRING */
.meta { width: var(--col); margin: 0 auto; padding: 0 0 56px; display: grid; grid-template-columns: repeat(3, 1fr); gap: 32px; border-top: 1px solid var(--rule); padding-top: 26px; margin-top: 44px; }
.meta .k { font-size: 13px; text-transform: uppercase; color: var(--label); }
.meta .v { margin-top: 8px; font-size: 1.15rem; font-weight: 500; letter-spacing: -.025em; line-height: 1.35; }
.meta .v a { border-bottom: 1px solid currentColor; padding-bottom: 2px; }

/* 리드 문단 */
.lede { width: var(--col); margin: 0 auto 84px; }
.lede p { text-wrap: balance; font-size: clamp(1.2rem, 2.2vw, 1.7rem); font-weight: 500; letter-spacing: -.045em; line-height: 1.34; max-width: 24em; }
.lede p + p { margin-top: 18px; font-size: 1.05rem; font-weight: 400; letter-spacing: -.03em; line-height: 1.7; color: var(--grey); max-width: 30em; }

/* 타일 그리드 — A24 media-tiles (318×408 ≒ 3/4) */
.tiles { display: grid; grid-template-columns: repeat(3, 1fr); gap: 36px 20px; }
.tiles > * { display: block; }
.tiles figure { aspect-ratio: 1/1; overflow: hidden; background: #f2f2f2; }
.tiles img { width: 100%; height: 100%; object-fit: cover; transition: transform .7s cubic-bezier(.2,0,.2,1); }
.tiles a:hover img { transform: scale(1.04); }
.tiles .k { margin-top: 12px; font-size: 15px; text-transform: uppercase; color: var(--grey); }
.tiles h3 { margin-top: 4px; font-size: 1.25rem; font-weight: 500; letter-spacing: -.03em; line-height: 1.2; }
.tiles p { margin-top: 8px; color: var(--grey); }

/* 다음 카테고리로 */
.next { width: var(--col); margin: 0 auto; padding: 72px 0 96px; border-top: 1px solid var(--line); display: flex; justify-content: space-between; align-items: baseline; gap: 20px; flex-wrap: wrap; }
.next .k { font-size: 13px; text-transform: uppercase; color: var(--label); }
.next a { font-size: clamp(1.6rem, 3.4vw, 2.6rem); font-weight: 500; letter-spacing: -.035em; }
.next a:hover { color: var(--grey); }

@media (max-width: 900px) {
  .meta, .lede, .next { width: auto; margin-left: var(--edge); margin-right: var(--edge); }
  .meta { grid-template-columns: 1fr; gap: 22px; }
  .tiles { grid-template-columns: 1fr 1fr; }
  .page-hero { height: 52svh; }
}
@media (max-width: 600px) {
  .tiles { grid-template-columns: 1fr; }
  .page-hero h1 sup { display: none; }
}


/* ---------------- 시술 5단계 다이어그램 ----------------
   순서가 있는 과정이므로 번호와 연결선을 쓴다. */
.flow { display: grid; grid-template-columns: repeat(5, 1fr); gap: 0; margin-top: 8px; }
.flow li { position: relative; padding: 30px 18px 0 0; }
.flow li::before {           /* 단계를 잇는 선 */
  content: ""; position: absolute; left: 0; right: 0; top: 11px; height: 1px; background: var(--line);
}
.flow li:first-child::before { left: 11px; }
.flow li:last-child::before { right: 100%; }
.flow li::after {            /* 단계 점 */
  content: ""; position: absolute; left: 0; top: 5px; width: 13px; height: 13px;
  border-radius: 50%; background: var(--white); border: 1.5px solid var(--ink);
}
.flow li.on::after { background: var(--ink); }
/* 단계 점: 01 → 05 로 갈수록 점점 진하게 */
.flow li:nth-child(1)::after, .flow li.on:nth-child(1)::after { background: color-mix(in srgb, var(--ink) 12%, var(--white)); }
.flow li:nth-child(2)::after { background: color-mix(in srgb, var(--ink) 32%, var(--white)); }
.flow li:nth-child(3)::after { background: color-mix(in srgb, var(--ink) 54%, var(--white)); }
.flow li:nth-child(4)::after { background: color-mix(in srgb, var(--ink) 76%, var(--white)); }
.flow li:nth-child(5)::after { background: var(--ink); }
.flow h4 .en { margin-left: 6px; font-size: 13px; font-weight: 400; letter-spacing: .02em; color: var(--grey); }
.flow .n { font-size: 15px; color: var(--grey); }
.flow h4 { margin-top: 6px; font-size: 1.15rem; font-weight: 500; letter-spacing: -.025em; }
.flow p { margin-top: 8px; color: var(--grey); font-size: .95rem; line-height: 1.5; }
.flow .tags { margin-top: 10px; display: flex; flex-wrap: wrap; gap: 5px; }
.flow .tags span { font-size: 13px; color: var(--grey); border: 1px solid var(--line); border-radius: 999px; padding: 3px 10px; }

/* ---------------- 관리 타임라인 ----------------
   전문 용어 대신 '언제 무엇을' 이 바로 읽히게. */
.tl { margin-top: 10px; border-top: 1px solid var(--line); }
.tl li { display: grid; grid-template-columns: 8.5rem 1fr; gap: 20px; padding: 20px 0; border-bottom: 1px solid var(--line); align-items: start; }
.tl .when { font-size: 1.1rem; font-weight: 500; letter-spacing: -.025em; }
.tl .when small { display: block; font-size: 14px; font-weight: 400; color: var(--grey); margin-top: 3px; }
.tl .what p { color: var(--grey); }
.tl .what ul { margin-top: 8px; }
.tl .what li { display: block; padding: 3px 0; border: 0; color: var(--ink); }
.tl .what li::before { content: "· "; color: var(--grey); }
.tl.warn .when { color: #8a2b2b; }

/* 가능 / 금지 표 */
.okno { display: grid; grid-template-columns: 1fr 1fr; gap: 0 40px; margin-top: 8px; }
.okno h4 { font-size: 15px; text-transform: uppercase; color: var(--grey); font-weight: 400; margin-bottom: 10px; }
.okno ul { border-top: 1px solid var(--line); }
.okno li { padding: 11px 0; border-bottom: 1px solid var(--line); display: grid; grid-template-columns: 5.5rem 1fr; gap: 14px; }
.okno li span { color: var(--grey); }

@media (max-width: 900px) {
  .flow { grid-template-columns: 1fr 1fr; gap: 0 0; }
  .flow li { padding-right: 14px; padding-bottom: 20px; }
  .tl li { grid-template-columns: 1fr; gap: 6px; }
  .okno { grid-template-columns: 1fr; gap: 28px; }
}
@media (max-width: 600px) {
  .flow { grid-template-columns: 1fr; }
  .folio { grid-template-columns: 1fr 1fr; }
  .folio.small { grid-template-columns: repeat(3, 1fr); }
}



/* ============================================================
   관리 다이어그램 — A24 방식
   채움 없음. 1px 검정 선과 회색 라벨만으로 구조를 만든다.
   ============================================================ */
:root {
  --rule: #000; --label: #888;
  /* 긴 선 + 작은 화살촉 (A24) */
  --arrow: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 60 10'%3E%3Cpath d='M0 5h57M52 1l5 4-5 4' fill='none' stroke='%23000' stroke-width='1'/%3E%3C/svg%3E");
}

.dg { margin-top: 26px; }
.dg-label { font-size: 13px; text-transform: uppercase; color: var(--label); letter-spacing: 0; }
.dg-note { margin-top: 14px; color: var(--label); max-width: 32em; font-size: .95rem; line-height: 1.6; }

/* 1 · 색 변화 — 흑백 그라데이션 한 줄 */
.shift { border-top: 1px solid var(--rule); padding-top: 18px; }
.shift .bar {
  height: 54px;
  background: linear-gradient(90deg,
    #111 0%, #111 16%,          /* 진하게 */
    #cfcfcf 42%, #d6d6d6 52%,   /* 옅어짐 */
    #8e8e8e 78%, #8a8a8a 100%); /* 실제 색으로 올라옴 */
}
.shift .marks { display: grid; grid-template-columns: repeat(4, 1fr); margin-top: 10px; }
.shift .marks div { border-left: 1px solid var(--rule); padding: 8px 0 0 10px; }
.shift .marks .d { font-size: 13px; color: var(--label); }
.shift .marks .t { margin-top: 3px; font-size: 1rem; letter-spacing: -.02em; }

/* 2 · 금지 / 허용 — 선으로만 나눈 목록 */
.rules-grid { display: grid; grid-template-columns: repeat(4, 1fr); border-top: 1px solid var(--rule); }
.rules-grid div { padding: 16px 16px 20px 0; }
.rules-grid .m { font-size: 1.1rem; }
.rules-grid .l { margin-top: 6px; color: var(--label); font-size: .95rem; line-height: 1.45; }

/* 3 · 시점 — 큰 숫자 + 라벨 */
.when-grid { display: grid; grid-template-columns: repeat(4, 1fr); border-top: 1px solid var(--rule); }
.when-grid div { padding: 20px 16px 24px 0; }
.when-grid .n { font-size: 2rem; font-weight: 500; letter-spacing: -.04em; line-height: 1; }
.when-grid .l { margin-top: 10px; color: var(--label); font-size: .95rem; line-height: 1.45; }

/* 4 · 성분 — 두 칸, 채움 없이 선만 */
.pick { display: grid; grid-template-columns: 1fr 1fr; gap: 0 48px; border-top: 1px solid var(--rule); padding-top: 20px; }
.pick h4 { font-size: 13px; text-transform: uppercase; color: var(--label); font-weight: 400; margin-bottom: 14px; }
.pick ul { display: grid; gap: 9px; }
.pick li { display: grid; grid-template-columns: 1.1rem 1fr; gap: 8px; align-items: baseline; }
.pick li em { font-style: normal; color: var(--label); }

@media (max-width: 900px) {
  .shift .marks, .rules-grid, .when-grid { grid-template-columns: 1fr 1fr; }
  .pick { grid-template-columns: 1fr; gap: 32px; }
}
@media (max-width: 600px) {
  .rules-grid, .when-grid { grid-template-columns: 1fr; }
  .shift .marks { grid-template-columns: 1fr 1fr; }
  .folio { grid-template-columns: 1fr 1fr; }
}


/* ============================================================
   2단 갤러리 — A24 상점 실측: 2열 · 간격 50px · 배경 #f1f1f1
   사진 사이에 여백을 두고 배경이 비치게 한다.
   ============================================================ */
.gal2 { display: grid; grid-template-columns: 1fr 1fr; gap: 50px; margin-top: 22px; }
.gal2 figure { margin: 0; }
.gal2 img { width: 100%; height: auto; display: block; }
.gal2 figcaption { margin-top: 12px; font-size: 13px; color: var(--label); }

/* 작은 사진 묶음 — 한 줄 4개 */
.folio.small { grid-template-columns: repeat(4, 1fr); gap: 6px; }

@media (max-width: 900px) {
  .gal2 { grid-template-columns: 1fr; gap: 28px; }
  .folio.small { grid-template-columns: repeat(3, 1fr); }
}
@media (max-width: 600px) {
  .folio.small { grid-template-columns: 1fr 1fr; }
}

/* ---------------- 휴대폰 ----------------
   1) 상단바: 밝은 구간에서는 바탕을 깔아 본문 글자와 겹치지 않게
   2) 하위 페이지: 'MENU / 페이지명'이 가운데 로고와 부딪히므로 페이지명은 숨김(히어로 제목이 대신함)
   3) 첫 화면 MORPH 사진: 로고·문구가 사진 안에 있고 가로 중심보다 약간 오른쪽이라, 세로 화면에서 잘리지 않게 맞춤 */
@media (max-width: 600px) {
  .top { height: 60px; transition: color .3s ease, background-color .3s ease; }
  .top.dark { background: var(--white); border-bottom: 1px solid var(--line); }
  .top .logo { height: 26px; }
  .crumb .sep, .crumb .cur { display: none; }
  .hero .media > [data-cat="morph"] { object-position: 52.6% 50%; }
}

/* 편집 모드에서 사진 위에 얹은 영상도 사진과 같은 호버 확대를 받는다 */
video[data-edit-video] { transition: transform .8s cubic-bezier(.2,0,.2,1); }
.item:hover figure video, .folio figure:hover video, .tiles a:hover video, .videos a:hover .thumb video { transform: scale(1.04); }

/* 편집 모드에서 새로 추가한 글 칸 */
morph-text { display: block; }


/* ============================================================
   글자 크기 통일 — 홈(index) 페이지 크기를 기준으로 전 페이지를 맞춘다
   ============================================================ */
:root {
  --fs-label: 13px;                          /* 홈 작은 라벨(eyebrow) */
  --fs-body: 15px;                           /* 홈 본문 */
  --fs-sub: 1.15rem;                         /* 소제목 — 한 가지 크기만 */
  --fs-head: clamp(1.6rem, 2.4vw, 2.3rem);   /* 홈 사진 카드 제목 */
  --fs-head-l: clamp(1.8rem, 3.6vw, 3rem);   /* 홈 첫 카드 제목 */
  --fs-display: clamp(2rem, 5.14vw, 4.6rem); /* 홈 첫 화면 메뉴 제목 */
}
.page-hero h1 { font-size: var(--fs-display); }
.section h2, .next a { font-size: var(--fs-head-l); }
.lede p { font-size: var(--fs-head); letter-spacing: -.03em; line-height: 1.12; }
.lede p + p { font-size: var(--fs-body); letter-spacing: -.03em; line-height: 1.55; }
.course h3, .course .price, .when-grid .n, .bio-lead, .kind-title { font-size: var(--fs-head); }
.meta .v, .flow h4, .steps h4, .svc h3, .faq summary, .links a, form button, .videos h4,
.tiles h3, .tl .when, .rules-grid .m { font-size: var(--fs-sub); }
.bio p, .flow p, .dg-note, .shift .marks .t, .rules-grid .l, .when-grid .l { font-size: var(--fs-body); }
.tl .when small { font-size: var(--fs-label); }
/* 편집 모드에서 추가한 사진·영상 상자 — 상자 크기를 바꾸면 사진이 꽉 차게 */
morph-text[data-kind] figure { width: 100%; height: 100%; overflow: hidden; }
morph-text[data-kind] img, morph-text[data-kind] video { display: block; width: 100%; height: 100%; object-fit: cover; max-width: none; }

/* 홈 카드 글 간격 통일 — SCALP 카드 기준 (라벨→제목 12, 제목→설명 11, 설명→버튼 77) */
.item .eyebrow { display: block; }
.item .copy h3, .item.note h3 { margin-top: 12px; }
.item .copy p, .item.note p, .item .copy morph-text {
  margin-top: 11px; font-size: 15px; font-weight: 400; line-height: 1.55; letter-spacing: -.05em;
}
@media (min-width: 601px) {
  .item .copy p, .item.note p, .item .copy morph-text { letter-spacing: -.08em; }
  .item .copy .cta, .item.note .cta { margin-top: 77px; }
}
/* 편집 모드에서 화면별로 넣은 영상 — 컴퓨터 전용 / 휴대폰 전용 */
@media (max-width: 600px) { video[data-screen="desktop"] { display: none !important; } }
@media (min-width: 601px) { video[data-screen="mobile"] { display: none !important; } }

/* 사진 사이 간격 통일 — 모든 사진 줄을 사례 사진 줄(8px)과 같게 */
:root { --photo-gap: 8px; }
.folio, .folio.small, .gal2 { gap: var(--photo-gap); }

/* MORPH 소개 아래 — 정사각형 4개(2 × 2). 휴대폰에서도 같은 모양. (.wide 를 붙이면 한 줄 전체 16:9) */
.gal2.mix { grid-template-columns: 1fr 1fr; }
.gal2.mix figure { position: relative; aspect-ratio: 1 / 1; overflow: hidden; background: #e4e4e4; }
.gal2.mix figure.wide { grid-column: 1 / -1; aspect-ratio: 16 / 9; }
.gal2.mix img, .gal2.mix video { width: 100%; height: 100%; object-fit: cover; }

/* 휴대폰: 홈 ACADEMY 카드(사진 위 글)는 사진 아래쪽을 살짝 어둡게 — 밝은 사진에서도 흰 글이 읽히게 */
@media (max-width: 600px) {
  .item.full figure::after { content: ""; position: absolute; inset: 0; pointer-events: none;
    background: linear-gradient(180deg, rgba(0,0,0,0) 0%, rgba(0,0,0,.18) 35%, rgba(0,0,0,.55) 100%); }
}

/* SNS 링크 앞 작은 앱 아이콘 */
.sns-ic { width: 1em; height: 1em; flex: none; vertical-align: -0.14em; margin-right: 0.45em; }
.overlay .foot a { display: inline-flex; align-items: center; }
.overlay .foot .sns-ic { vertical-align: 0; }
.links a { align-items: center; }
.links a .sns-ic { margin-right: 0.6em; }
.links a span { margin-right: auto; }

/* 본문 글자 1pt 키움 (2026-09-27) — 제목(헤드)은 그대로 */
:root { --fs-label: 14px; --fs-body: 16px; }
body { font-size: 16px; }
.eyebrow, .svc-group > .eyebrow, .meta .k, .next .k, .flow h4 .en, .flow .tags span,
.dg-label, .shift .marks .d, .pick h4, .gal2 figcaption { font-size: 14px; }
.item .copy p, .item.note p, .item .copy morph-text, .tiles .k, .flow .n, .okno h4, form label,
.bio p, .flow p, .dg-note, .shift .marks .t, .rules-grid .l, .when-grid .l, .lede p + p { font-size: 16px; }
.tl .when small { font-size: 15px; }
/* 컴퓨터 화면만 본문 1pt 더 (2026-09-27) */
@media (min-width: 601px) {
  :root { --fs-label: 15px; --fs-body: 17px; }
  body { font-size: 17px; }
  .eyebrow, .svc-group > .eyebrow, .meta .k, .next .k, .flow h4 .en, .flow .tags span,
  .dg-label, .shift .marks .d, .pick h4, .gal2 figcaption { font-size: 15px; }
  .item .copy p, .item.note p, .item .copy morph-text, .tiles .k, .flow .n, .okno h4, form label,
  .bio p, .flow p, .dg-note, .shift .marks .t, .rules-grid .l, .when-grid .l, .lede p + p { font-size: 17px; }
  .tl .when small { font-size: 16px; }
}
/* 하위 페이지 묶음 제목(리터치·시술후 관리 등) — 흐린 작은 라벨 → 소제목처럼 또렷하게 (2026-09-27)
   바로 아래 큰 제목이 있는 사례 묶음(SCALP — 헤어라인 등)은 라벨 그대로 */
.svc-group > .eyebrow:not(:has(+ .about-grid)) {
  font-size: clamp(1.25rem, 1.8vw, 1.5rem); font-weight: 500; color: var(--ink);
  letter-spacing: -.03em; line-height: 1.3; text-transform: none; margin-bottom: 18px;
}
/* 색 변화 다이어그램 — 휴대폰에서는 가로 띠 대신 단계마다 옆에 원으로 진하기를 보여준다 (2026-09-27) */
@media (max-width: 600px) {
  .shift .bar { display: none; }
  .shift .marks { grid-template-columns: 1fr !important; margin-top: 0; }
  .shift .marks > div {
    display: grid; grid-template-columns: 44px 1fr; column-gap: 16px; align-items: center;
    border-left: 0; border-bottom: 1px solid var(--line); padding: 14px 0;
  }
  .shift .marks > div > div { border: 0; padding: 0; grid-column: 2; }
  .shift .marks > div::before {
    content: ""; grid-row: 1 / span 2; width: 44px; height: 44px; border-radius: 50%;
    border: 1px solid var(--line); background: #111;
  }
  .shift .marks > div:nth-child(2)::before { background: #d6d6d6; }   /* 옅어짐 */
  .shift .marks > div:nth-child(3)::before { background: #a8a8a8; }   /* 색이 올라옴 */
  .shift .marks > div:nth-child(4)::before,
  .shift .marks > div:nth-child(3):last-child::before { background: #8a8a8a; }   /* 실제 정착색 */
}
/* '언제부터 다시 가능한가' — 휴대폰에서는 한 줄에 '기간 | 내용'으로 촘촘하게 (2026-09-27) */
@media (max-width: 600px) {
  .when-grid > div {
    display: grid; grid-template-columns: 64px 1fr; column-gap: 12px; align-items: baseline;
    padding: 11px 0; border-bottom: 1px solid var(--line);
  }
  .when-grid > div > div { padding: 0; }
  .when-grid .n { font-size: 1.3rem; }
  .when-grid .l { margin-top: 0; line-height: 1.4; }
}
/* '시술후 관리'(금지 목록) — 휴대폰에서 촘촘하게 (2026-09-27) */
@media (max-width: 600px) {
  .rules-grid > div { padding: 10px 0; border-bottom: 1px solid var(--line); }
  .rules-grid > div > div { padding: 0; }
  .rules-grid .m { line-height: 1.35; }
  .rules-grid .l { margin-top: 2px; line-height: 1.4; }
}
/* 컴퓨터 화면 '시술후 관리' · '언제부터 다시 가능한가' — 촘촘하게 (2026-09-27) */
@media (min-width: 601px) {
  .rules-grid > div > div, .when-grid > div > div { padding: 0; }
  .rules-grid > div { padding: 12px 16px 14px 0; }
  .rules-grid .m { line-height: 1.35; }
  .rules-grid .l { margin-top: 3px; line-height: 1.4; }
  .when-grid > div { padding: 12px 16px 14px 0; }
  .when-grid .n { font-size: clamp(1.4rem, 1.9vw, 1.75rem); }
  .when-grid .l { margin-top: 6px; line-height: 1.4; }
}
/* 리터치 — 다른 묶음처럼 제목 아래 가는 선 (2026-09-27) */
.retouch > .eyebrow { padding-bottom: 26px; margin-bottom: 0; border-bottom: 1px solid var(--rule); }
.retouch > .eyebrow + p { margin-top: 18px !important; }
/* 5단계 다이어그램 — 휴대폰에서는 점을 왼쪽 세로줄로, 번호와 제목을 한 줄로 촘촘하게 (2026-09-27) */
@media (max-width: 600px) {
  .flow li {
    display: grid; grid-template-columns: auto 1fr; column-gap: 8px; align-items: baseline;
    padding: 0 0 18px 28px;
  }
  .flow li::before, .flow li:first-child::before {
    left: 6px; right: auto; top: 22px; bottom: 0; width: 1px; height: auto;
  }
  .flow li:last-child::before { display: none; }
  .flow li::after { top: 14px; transform: translateY(-50%); }   /* 제목 줄 가운데 */
  .flow .n { grid-column: 1; }
  .flow h4 { grid-column: 2; margin-top: 0; }
  .flow p, .flow .tags { grid-column: 1 / -1; }
  .flow p { margin-top: 4px; line-height: 1.45; }
  .flow .tags { margin-top: 8px; }
  .flow .tags span { padding: 2px 9px; }
}
/* 과정 이름 뒤 작은 부제 (예: AA _ Academy for Academy) — 편집 모드에서 <small> 로 넣은 글 (2026-09-27) */
.course h3 small { font-size: .55em; font-weight: 400; letter-spacing: -.01em; color: var(--grey); margin-left: 4px; }
/* KIHO 유튜브 제목 앞 빨간 유튜브 로고 (2026-09-27) — 글을 고쳐도 로고는 남도록 CSS 로 붙인다 */
.yt-title { display: inline-flex !important; align-items: center;
  font-size: clamp(1.25rem, 1.8vw, 1.5rem) !important; font-weight: 500; color: var(--ink); letter-spacing: -.03em; text-transform: none; }
.yt-title::before {
  content: ""; flex: none; width: 1.45em; height: 1.02em; margin-right: .45em;
  background: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 28 20'%3E%3Crect width='28' height='20' rx='5.6' fill='%23FF0000'/%3E%3Cpath d='M11.2 5.8v8.4l7.3-4.2z' fill='%23fff'/%3E%3C/svg%3E") center / contain no-repeat;
}

/* 영상 뒤에 깔린 사진은 숨긴다 — 자리만 잡고, 가장자리로 비치지 않게 */
img[data-under-video="all"] { visibility: hidden; }
@media (min-width: 601px) { img[data-under-video="desktop"] { visibility: hidden; } }
@media (max-width: 600px) { img[data-under-video="mobile"] { visibility: hidden; } }

/* 상담 — 지도 */
.map { margin-top: 28px; }
.map iframe { display: block; width: 100%; aspect-ratio: 16 / 10; border: 0; filter: grayscale(1) contrast(1.05); background: var(--line); }
.map-links { display: grid; grid-template-columns: repeat(3, 1fr); border-bottom: 1px solid var(--line); }
.map-links a { padding: 14px 0; text-align: center; font-size: 0.95rem; border-right: 1px solid var(--line); }
.map-links a:last-child { border-right: 0; }
.map-links a:hover { background: var(--pure); }