@charset "utf-8";
/* ============================================================================
   품티켓 골든 R1 — 레퍼런스1(핑크) 디자인 언어 계승 스타일시트
   원본 : 홈페이지 디자인 레퍼런스 / 1. project- 핑크핑크한거
          resources/css/templatehouse.css (디자인 시스템)
          resources/css/style.css        (섹션 popup-N1~N8)
   토큰(폰트 스케일·버튼 높이·라인색·컨테이너 폭)·컴포넌트(btnset/textset/
   cardset/modalset)·섹션 리듬은 원본 실측값을 그대로 옮겼다.

   ★★ 색은 아래 --pt-primary 한 줄만 바꾼다. 나머지 파생색(연한 배경·구분선·
      호버·강조 텍스트)은 전부 color-mix 로 이 변수에서 계산된다.
      #FF5E7E(핑크) -> #db2777 / #4d7c0f(올리브) 로 바꿔도 대비가 유지된다.
   ============================================================================ */

/* ---------- 1. 토큰 ---------- */
:root{
  /* ★★★ 2단계에서 바꾸는 유일한 색 ★★★ */
  --pt-primary:#248070;

  /* 파생색 — 손대지 말 것 (전부 --pt-primary 에서 계산) */
  --pt-primary-ink   : color-mix(in srgb, var(--pt-primary) 88%, #000);  /* 흰 배경 위 강조 텍스트 */
  --pt-primary-deep  : color-mix(in srgb, var(--pt-primary) 74%, #000);  /* 진한 강조·그라데이션 끝 */
  --pt-primary-hover : color-mix(in srgb, var(--pt-primary) 80%, #fff);  /* 솔리드 버튼 호버 */
  --pt-tint-1        : color-mix(in srgb, var(--pt-primary)  6%, #fff);  /* 섹션 배경 (원본 #fff6f9) */
  --pt-tint-2        : color-mix(in srgb, var(--pt-primary) 12%, #fff);  /* 카드 배경 */
  --pt-tint-3        : color-mix(in srgb, var(--pt-primary) 22%, #fff);  /* 배지 배경 */
  --pt-line-primary  : color-mix(in srgb, var(--pt-primary) 20%, #fff);  /* 카드 사이 세로 구분선 */
  --pt-on-primary    : #fff;

  /* 원본 templatehouse.css 고정 팔레트 */
  --black:#000; --black-rgb:0,0,0;
  --white:#fff; --white-rgb:255,255,255;
  --body-bg:#fff;
  --bg-color:#F7F7FB;
  --text-color1:#111111;
  --text-color2:#505050;
  --text-color3:#666666;
  --text-color4:#999999;
  --line-color1:#e5e5e5;
  --line-color2:#d4d4d8;
  --border-color:var(--line-color1);
  --body-color:var(--text-color1);

  --ff-ko1:"Pretendard Variable","Pretendard",-apple-system,BlinkMacSystemFont,system-ui,sans-serif;
  --fw-regular:400; --fw-medium:500; --fw-bold:700;

  /* PC 타이포 스케일 (원본 값) */
  --fs-h1:6.4rem; --fs-h2:5.2rem; --fs-h3:3.2rem; --fs-h4:2.8rem; --fs-h5:2.4rem; --fs-h6:2rem;
  --fs-p1:1.6rem; --fs-p2:1.4rem; --fs-p3:1.2rem;
  --lh-h1:8.8rem; --lh-h2:7.8rem; --lh-h3:4.8rem; --lh-h4:4.2rem; --lh-h5:3.6rem; --lh-h6:3rem;
  --lh-p1:2.6rem; --lh-p2:2.4rem; --lh-p3:2.2rem;
  --ls:-0.025rem;

  /* 버튼 높이 (원본 값) */
  --ht-xl:6.4rem; --ht-lg:5.6rem; --ht-md:4.8rem; --ht-sm:4rem;

  /* 섹션 리듬 (원본 popup-N4~N8 실측) */
  --sec-pad:18rem;      /* 원본 N5 / N7 */
  --sec-pad-xl:24rem;   /* 원본 N4 / N6 / N8 */
  --sec-pad-mo:10rem;   /* 원본 모바일 공통 */
  --radius:0.4rem;      /* 원본 btnset 라운드 */
  --radius-lg:0.8rem;   /* 원본 cardset-round */
}
@media (max-width:992px){
  :root{
    --fs-h1:3.6rem; --fs-h2:3rem; --fs-h3:2.4rem; --fs-h4:2rem; --fs-h5:1.8rem; --fs-h6:1.6rem;
    --fs-p1:1.4rem; --fs-p2:1.2rem; --fs-p3:1rem;
    --lh-h1:5.2rem; --lh-h2:4.4rem; --lh-h3:3.6rem; --lh-h4:3rem; --lh-h5:2.8rem; --lh-h6:2.6rem;
    --lh-p1:2.4rem; --lh-p2:2.2rem; --lh-p3:2rem;
    --ht-xl:5.6rem; --ht-lg:4.8rem; --ht-md:4rem; --ht-sm:3.2rem;
  }
}

/* ---------- 2. 리셋 (원본 templatehouse.css Reset 발췌) ---------- */
*,*::before,*::after{margin:0;padding:0;box-sizing:border-box}
html{font-size:62.5%;scroll-behavior:smooth}
body{margin:0;font-family:var(--ff-ko1);font-weight:var(--fw-regular);font-size:var(--fs-p1);
  line-height:var(--lh-p1);letter-spacing:var(--ls);color:var(--body-color);background:var(--body-bg);
  -webkit-text-size-adjust:100%;-webkit-tap-highlight-color:rgba(0,0,0,0);word-break:keep-all;overflow-x:hidden}
ol,ul,dl{list-style:none}
dt{font-weight:700}
dd{margin:0}
address{font-style:normal;line-height:inherit}
b,strong{font-weight:700}
a{display:inline-block;color:inherit;text-decoration:none}
img,svg{vertical-align:middle}
figure{margin:0}
button{border:none;background:none;font-family:inherit;font-size:inherit;color:inherit;cursor:pointer}
table{border-collapse:collapse}
.blind{position:absolute;width:1px;height:1px;overflow:hidden;clip:rect(0,0,0,0);margin:-1px}

/* ---------- 3. 타이포 (원본 텍스트 스타일) ---------- */
.h1{font-size:var(--fs-h1);line-height:var(--lh-h1);font-weight:var(--fw-bold);letter-spacing:var(--ls);color:var(--text-color1)}
.h2{font-size:var(--fs-h2);line-height:var(--lh-h2);font-weight:var(--fw-bold);letter-spacing:var(--ls);color:var(--text-color1)}
.h3{font-size:var(--fs-h3);line-height:var(--lh-h3);font-weight:var(--fw-bold);letter-spacing:var(--ls);color:var(--text-color1)}
.h4{font-size:var(--fs-h4);line-height:var(--lh-h4);font-weight:var(--fw-medium);letter-spacing:var(--ls);color:var(--text-color1)}
.h5{font-size:var(--fs-h5);line-height:var(--lh-h5);font-weight:var(--fw-medium);letter-spacing:var(--ls);color:var(--text-color1)}
.h6{font-size:var(--fs-h6);line-height:var(--lh-h6);font-weight:var(--fw-regular);letter-spacing:var(--ls);color:var(--text-color1)}
.p1{font-size:var(--fs-p1);line-height:var(--lh-p1);color:var(--text-color1)}
.p2{font-size:var(--fs-p2);line-height:var(--lh-p2);color:var(--text-color1)}
.p3{font-size:var(--fs-p3);line-height:var(--lh-p3);color:var(--text-color2)}
.tx-muted{color:var(--text-color3)}
.tx-accent{color:var(--pt-primary-ink)}

/* ---------- 4. 레이아웃 ---------- */
.container-lg{position:relative;max-width:calc(1440px + 8rem);margin:0 auto;padding:0 4rem}
.container-md{position:relative;max-width:calc(1280px + 8rem);margin:0 auto;padding:0 4rem}
@media (max-width:992px){.container-lg,.container-md{padding:0 1.6rem}}

.sec{position:relative;overflow:hidden;padding-top:var(--sec-pad);padding-bottom:var(--sec-pad)}
.sec-xl{position:relative;overflow:hidden;padding-top:var(--sec-pad-xl);padding-bottom:var(--sec-pad-xl)}
.sec-tint{background:var(--pt-tint-1)}
.sec-gray{background:var(--bg-color)}
@media (max-width:992px){
  .sec,.sec-xl{padding-top:var(--sec-pad-mo);padding-bottom:var(--sec-pad-mo)}
}

/* ---------- 5. 버튼 : btnset (원본 값 그대로) ---------- */
.btnset{display:inline-flex;justify-content:center;align-items:center;gap:.6rem;min-width:9.4rem;
  padding:0 2rem;height:var(--ht-md);font-weight:var(--fw-medium);border-radius:var(--radius);
  transition:.3s;cursor:pointer;white-space:nowrap}
.btnset + .btnset{margin-left:.8rem}
.btnset-lg{min-width:9.8rem;padding:0 2.8rem;height:var(--ht-lg)}
.btnset-sm{min-width:9rem;padding:0 2rem;height:var(--ht-sm);font-size:var(--fs-p2)}
.btnset-block{width:100%;min-width:0}
.btnset-block + .btnset-block{margin-left:0;margin-top:.8rem}
.btnset-primary{color:var(--pt-on-primary);background:var(--pt-primary)}
.btnset-primary:hover{background:var(--pt-primary-hover)}
.btnset-dark{color:var(--white);background:var(--black)}
.btnset-dark:hover{background:rgba(var(--black-rgb),.8)}
.btnset-line-primary{color:var(--pt-primary-ink);background:transparent;border:2px solid var(--pt-primary)}
.btnset-line-primary:hover{color:var(--pt-on-primary);background:var(--pt-primary)}
.btnset-line-dark{color:var(--black);background:transparent;border:2px solid var(--black)}
.btnset-line-dark:hover{color:var(--white);background:var(--black)}
.btnset-line-white{color:var(--white);background:transparent;border:2px solid var(--white)}
.btnset-line-white:hover{color:var(--black);background:var(--white)}
.btnset-line-light{color:var(--black);background:transparent;border:2px solid var(--line-color1)}
.btnset-line-light:hover{background:var(--line-color1)}
@media (max-width:992px){
  .btnset{min-width:6.8rem;padding:0 1.6rem}
  .btnset-lg{min-width:6.8rem;padding:0 2rem}
  .btnset-sm{min-width:4.2rem;padding:0 1.6rem}
}

/* ---------- 6. 텍스트셋 (원본 textset) ---------- */
.textset{position:relative}
.textset-badge{display:inline-block;padding:.4rem 1.2rem;border-radius:.8rem;
  background:var(--pt-tint-3);color:var(--pt-primary-deep);font-size:var(--fs-p2);font-weight:var(--fw-bold)}
.textset-badge + .textset-tit{margin-top:1.6rem}
.textset-tit + .textset-desc{margin-top:2rem;color:var(--text-color3)}
.textset .btnset{margin-top:2rem}
.textset-center{text-align:center}
@media (max-width:992px){
  .textset-badge + .textset-tit{margin-top:1.2rem}
  .textset-tit + .textset-desc{margin-top:1.2rem}
}

/* 원본 date-wrap 의 강조 구분선 — 섹션 악센트로 계승 */
.accent-wrap{display:flex;align-items:center;gap:2.4rem;flex-wrap:wrap}
.accent-wrap .accent-txt{color:var(--pt-primary-ink);font-weight:var(--fw-bold)}
.accent-line{flex-shrink:0;display:block;width:9.6rem;height:.3rem;background:var(--pt-primary)}
@media (max-width:992px){.accent-wrap{gap:1.6rem}.accent-line{width:4rem}}

/* ---------- 7. 카드셋 (원본 cardset) ---------- */
.cardset{position:relative}
.cardset-figure{width:100%;height:24rem;margin:0;overflow:hidden}
.cardset-img{width:100%;height:100%;object-fit:cover}
.cardset-body{padding:2.4rem 0}
.cardset-tit{display:block;font-weight:var(--fw-bold)}
.cardset-tit + .cardset-desc{margin-top:1.2rem}
.cardset-desc{color:var(--text-color3)}
.cardset-border{border:1px solid var(--border-color);background:var(--white)}
.cardset-border .cardset-body{padding:2.4rem}
.cardset-round{border-radius:var(--radius-lg);overflow:hidden}
.cardset-hover{transition:.3s}
.cardset-hover:hover{box-shadow:0 0 3rem 0 rgba(var(--black-rgb),.1)}
.cardset-hor{display:flex;gap:2.4rem;align-items:flex-start}
.cardset-hor .cardset-figure{width:9.6rem;height:9.6rem;flex-shrink:0;border-radius:var(--radius-lg)}
.cardset-hor .cardset-body{padding:0}
@media (max-width:992px){
  .cardset-hor{flex-direction:column;gap:1.6rem}
  .cardset-hor .cardset-figure{width:5.4rem;height:5.4rem}
}

/* 원본 N5 카드행 — 세로 구분선이 primary 20% 인 3열 카드 */
.card-row{display:grid;grid-template-columns:repeat(3,1fr);margin-top:8rem}
.card-row .cardset{padding:6.6rem 4rem;text-align:center}
.card-row .cardset:not(:first-child)::before{content:"";position:absolute;left:0;top:0;
  width:.1rem;height:100%;background:var(--pt-line-primary)}
.card-row .cardset:first-child{padding-left:0}
.card-row .cardset:last-child{padding-right:0}
.card-row .cardset-figure{width:12rem;height:12rem;margin:4rem auto;border-radius:var(--radius-lg)}
.card-row .cardset .btnset{margin-top:4rem}
@media (max-width:992px){
  .card-row{grid-template-columns:1fr;margin-top:4rem}
  .card-row .cardset{padding:3.2rem 0}
  .card-row .cardset:not(:first-child)::before{left:0;top:0;width:100%;height:.1rem}
  .card-row .cardset-figure{width:9.6rem;height:9.6rem;margin:2.4rem auto}
  .card-row .cardset .btnset{margin-top:2.4rem}
}

/* ---------- 8. 헤더 (원본 popup-N1) ---------- */
.site-header{position:sticky;top:0;width:100%;background:var(--white);z-index:99;
  border-bottom:1px solid var(--line-color1)}
.header-container{display:flex;align-items:center;justify-content:space-between;min-height:8.6rem}
.header-left{display:flex;align-items:center;gap:3rem}
.header-brand{display:inline-flex;align-items:baseline;gap:.6rem;white-space:nowrap;
  font-size:2.4rem;font-weight:var(--fw-bold);line-height:1.2;letter-spacing:-.05rem;color:var(--text-color1)}
.header-brand .brand-mark{color:var(--pt-primary-ink)}
.header-brand .brand-sub{font-size:1.2rem;font-weight:var(--fw-medium);color:var(--text-color4)}
.header-gnblist{display:flex;align-items:center}
.header-gnbitem{position:relative}
.header-gnblink{padding:2.8rem 3rem;font-weight:var(--fw-medium);white-space:nowrap}
.header-gnblink span{position:relative;display:inline-block}
.header-gnblink span::after{content:"";position:absolute;left:0;top:100%;width:100%;height:.2rem;
  background:var(--pt-primary);transform:scaleX(0);transition:.3s}
.header-gnbitem:hover .header-gnblink span::after{transform:scaleX(1)}
.header-sublist{position:absolute;top:100%;left:50%;transform:translateX(-50%);min-width:17rem;
  background:var(--white);border:1px solid var(--line-color1);opacity:0;pointer-events:none;
  transition:opacity .3s;overflow:hidden}
.header-gnbitem:hover .header-sublist{opacity:1;pointer-events:auto}
.header-sublink{width:100%;padding:1rem 2rem;font-size:var(--fs-p2);font-weight:var(--fw-medium);
  transition:color .2s,background .2s}
.header-sublink:hover{background:var(--pt-primary);color:var(--pt-on-primary)}
.header-right{display:flex;align-items:center;gap:1.6rem}
.header-hours{font-size:var(--fs-p2);color:var(--text-color3)}
.header-momenu{display:none;width:4rem;height:4rem;align-items:center;justify-content:center}
.header-momenu svg{width:2.4rem;height:2.4rem;stroke:var(--text-color1);stroke-width:2;stroke-linecap:round}
.mo-nav{display:none}
@media (max-width:992px){
  .header-container{min-height:6.4rem}
  .header-center{display:none}
  .header-hours{display:none}
  .header-right .header-utils{display:none}
  .header-momenu{display:inline-flex}
  .header-brand{font-size:1.8rem}
  .mo-nav{position:absolute;top:100%;left:0;width:100%;background:var(--white);
    border-top:1px solid var(--line-color1);box-shadow:0 1.6rem 3.2rem rgba(0,0,0,.08);
    max-height:calc(100vh - 6.4rem);overflow-y:auto}
  .mo-nav.is-open{display:block}
  .mo-nav .mo-hub{padding:1.6rem 1.6rem .8rem;font-size:var(--fs-p2);font-weight:var(--fw-bold);
    color:var(--pt-primary-ink);border-top:1px solid var(--line-color1)}
  .mo-nav .mo-hub:first-child{border-top:0}
  .mo-nav a{display:block;padding:1.2rem 1.6rem;font-size:var(--fs-p1)}
  .mo-nav a:hover{background:var(--pt-tint-1)}
}

/* ---------- 9. 히어로 (원본 popup-N3 분할 히어로) ---------- */
.hero-stage{position:relative;overflow:hidden;background:var(--pt-tint-1);padding:12rem 0}
.hero-stage .container-lg{padding-left:8.8rem;padding-right:8.8rem}
.hero-grid{display:grid;grid-template-columns:1fr 1fr;gap:8rem;align-items:center}
.hero-copy .textset-tit{margin-top:1.6rem}
.hero-copy .hero-lead{margin-top:2.4rem;color:var(--text-color2)}
.hero-btns{margin-top:6rem;display:flex;flex-wrap:wrap;gap:1.2rem}
.hero-btns .btnset + .btnset{margin-left:0}
.hero-meta{margin-top:4.8rem}
.hero-figure{margin:0}
.hero-figure img{width:100%;height:auto;aspect-ratio:4/3;object-fit:cover;border-radius:var(--radius-lg)}
.hero-sub{padding:10rem 0}
.hero-sub .hero-grid{grid-template-columns:1fr;gap:0;max-width:96rem}
.hero-crumb{font-size:var(--fs-p2);color:var(--text-color3)}
.hero-crumb a:hover{color:var(--pt-primary-ink)}
@media (max-width:992px){
  .hero-stage{padding:6.4rem 0}
  .hero-stage .container-lg{padding-left:1.6rem;padding-right:1.6rem}
  .hero-grid{grid-template-columns:1fr;gap:4rem}
  .hero-btns{margin-top:3.2rem}
  .hero-meta{margin-top:3.2rem}
  .hero-sub{padding:6.4rem 0}
}

/* ---------- 10. 원본 N4 — 어긋난 4장 썸네일 + 가운데 소개 ---------- */
.thumb-area{display:flex;align-items:flex-start;gap:2rem}
.thumb-area .thumb{flex:1;aspect-ratio:345/351;overflow:hidden;border-radius:var(--radius-lg)}
.thumb-area .thumb:nth-child(odd){transform:translateY(10rem)}
.thumb-area .thumb:nth-child(even){transform:translateY(-10rem);margin-top:8rem}
.thumb-area .thumb img{width:100%;height:100%;object-fit:cover}
.intro-text{margin-top:12rem;text-align:center}
.intro-text .textset-tit{margin:0 0 1.2rem}
@media (max-width:992px){
  .thumb-area{display:grid;grid-template-columns:repeat(2,1fr);gap:3.2rem .8rem}
  .thumb-area .thumb:nth-child(odd),.thumb-area .thumb:nth-child(even){transform:none;margin-top:0}
  .intro-text{margin-top:6.4rem}
}

/* ---------- 11. 케러셀 9타일 (PC 3열 / 모바일 1열) ---------- */
.tile-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:2.4rem;margin-top:8rem}
/* ★ 타일 문구는 이미지 위에 겹치지 않는다 — 배너에 품티켓 로고·문구가 픽셀로 박혀 있어서
      오버레이 캡션을 얹으면 글자가 겹친다(이미지풀 규칙). 캡션은 이미지 아래 칸에 둔다. */
.tile{position:relative;display:block;overflow:hidden;border:1px solid var(--border-color);
  border-radius:var(--radius-lg);background:var(--white);transition:.3s}
.tile:hover{box-shadow:0 0 3rem 0 rgba(var(--black-rgb),.1)}
.tile .tile-figure{display:block;overflow:hidden}
.tile img{width:100%;height:auto;aspect-ratio:1/1;object-fit:cover;display:block;transition:transform .4s}
.tile:hover img{transform:scale(1.04)}
.tile-txt{display:flex;align-items:center;justify-content:space-between;gap:1.2rem;
  padding:1.8rem 2rem;border-top:1px solid var(--border-color);background:var(--white);transition:.3s}
.tile-txt span{color:var(--text-color1);font-size:var(--fs-p1);font-weight:var(--fw-medium);line-height:1.5}
.tile-txt::after{content:"→";flex-shrink:0;color:var(--pt-primary-ink);font-weight:var(--fw-bold)}
.tile:hover .tile-txt{background:var(--pt-tint-1)}
.tile:hover .tile-txt span{color:var(--pt-primary-deep)}
@media (max-width:768px){
  .tile-grid{grid-template-columns:1fr;gap:1.6rem;margin-top:4rem}
}

/* ---------- 12. 절차 3단 ---------- */
.step-row{display:grid;grid-template-columns:repeat(3,1fr);gap:4rem;margin-top:8rem}
.step-item{position:relative}
.step-item .step-figure{width:100%;aspect-ratio:1000/690;overflow:hidden;border-radius:var(--radius-lg)}
.step-item .step-figure img{width:100%;height:100%;object-fit:cover}
.step-no{display:inline-flex;align-items:center;justify-content:center;width:4.8rem;height:4.8rem;
  margin-top:2.4rem;border-radius:50%;background:var(--pt-primary);color:var(--pt-on-primary);
  font-weight:var(--fw-bold);font-size:var(--fs-h6)}
.step-item .step-tit{display:block;margin-top:1.6rem;font-weight:var(--fw-bold)}
.step-item .step-desc{margin-top:1.2rem;color:var(--text-color3)}
@media (max-width:992px){.step-row{grid-template-columns:1fr;gap:3.2rem;margin-top:4rem}}

/* ---------- 13. 원본 N7 — 좌 이미지 / 우 정보 카드 ---------- */
.info-area{display:flex;align-items:flex-start;gap:6rem;margin-top:8rem}
.info-visual{flex:1 1 62rem;min-width:0}
.info-visual img{width:100%;height:auto;aspect-ratio:16/10;object-fit:cover;border-radius:var(--radius-lg)}
.info-wrap{flex:1 1 46rem;min-width:0}
.info-wrap .cardset + .cardset{margin-top:2.4rem;padding-top:2.4rem;border-top:1px solid var(--pt-line-primary)}
.info-table{display:grid;grid-template-columns:12rem 1fr;gap:.8rem 2rem;margin-top:1.6rem}
.info-table dt{font-size:var(--fs-p2);font-weight:var(--fw-bold);color:var(--pt-primary-ink)}
.info-table dd{font-size:var(--fs-p2);color:var(--text-color2)}
@media (max-width:992px){
  .info-area{display:block;margin-top:4rem}
  .info-wrap{margin-top:4rem}
  .info-table{grid-template-columns:8.4rem 1fr;gap:.4rem 2rem}
}

/* 본문 리스트 — 하위페이지 읽기 칼럼 */
.read-col{max-width:82rem}
.bullet{margin-top:2.4rem}
.bullet li{position:relative;padding-left:2rem;color:var(--text-color2)}
.bullet li + li{margin-top:1.2rem}
.bullet li::before{content:"";position:absolute;left:0;top:1.1rem;width:.8rem;height:.8rem;
  border-radius:50%;background:var(--pt-primary)}
.note-box{margin-top:4rem;padding:3.2rem;background:var(--pt-tint-1);
  border-left:.4rem solid var(--pt-primary);border-radius:0 var(--radius-lg) var(--radius-lg) 0}
.note-box .note-tit{display:block;font-weight:var(--fw-bold);color:var(--pt-primary-deep)}
.note-box p{margin-top:1.2rem;color:var(--text-color2)}
@media (max-width:992px){.note-box{padding:2.4rem}}

/* ---------- 14. 후기 (원본 cardset-user) ---------- */
.review-row{display:grid;grid-template-columns:repeat(4,1fr);gap:2.4rem;margin-top:8rem}
.review-card{position:relative;text-align:center;background:var(--white);
  border:1px solid var(--border-color);border-radius:var(--radius-lg);padding:3.2rem 2.4rem}
.review-card .review-figure{width:12rem;height:12rem;margin:0 auto;border-radius:50%;overflow:hidden}
.review-card .review-figure img{width:100%;height:100%;object-fit:cover}
.review-card .review-name{display:block;margin-top:2.4rem;font-weight:var(--fw-bold)}
.review-card .review-role{display:block;margin-top:.4rem;font-size:var(--fs-p2);color:var(--text-color4)}
.review-card .review-txt{margin-top:2rem;color:var(--text-color3)}
@media (max-width:992px){
  .review-row{grid-template-columns:1fr;gap:1.6rem;margin-top:4rem}
  .review-card .review-figure{width:9.6rem;height:9.6rem}
}

/* ---------- 15. FAQ (원본 accordset) ---------- */
.faq{margin-top:8rem;border-top:1px solid var(--border-color);border-bottom:1px solid var(--border-color)}
.faq details{border-top:1px solid var(--border-color);background:var(--white)}
.faq details:first-child{border-top:0}
.faq summary{position:relative;display:flex;align-items:flex-start;gap:1.2rem;
  padding:2rem 6rem 2rem 2.4rem;font-weight:var(--fw-medium);cursor:pointer;list-style:none}
.faq summary::-webkit-details-marker{display:none}
.faq summary::after{content:"";position:absolute;top:50%;right:2.4rem;width:1.2rem;height:1.2rem;
  margin-top:-.8rem;border-right:.2rem solid var(--pt-primary);border-bottom:.2rem solid var(--pt-primary);
  transform:rotate(45deg);transition:transform .3s}
.faq details[open] summary::after{transform:rotate(-135deg);margin-top:-.2rem}
.faq details[open] summary{background:color-mix(in srgb,var(--pt-primary) 8%,#fff);color:var(--pt-primary-deep)}
.faq .faq-q{flex-shrink:0;font-weight:var(--fw-bold);color:var(--pt-primary-ink)}
.faq .faq-a{display:flex;align-items:flex-start;gap:1.2rem;padding:3.2rem 2.4rem;
  border-top:1px solid var(--border-color);background:var(--pt-tint-1);color:var(--text-color2)}
.faq .faq-a b{flex-shrink:0;font-weight:var(--fw-bold);color:var(--text-color1)}
@media (max-width:992px){
  .faq{margin-top:4rem}
  .faq summary{padding:1.6rem 5.6rem 1.6rem 1.6rem}
  .faq summary::after{right:1.6rem}
  .faq .faq-a{padding:1.6rem}
}

/* ---------- 16. CTA 밴드 (원본 popup-N8) ---------- */
.cta-band{position:relative;overflow:hidden;padding-top:var(--sec-pad-xl);padding-bottom:var(--sec-pad-xl);
  background:#111 url(../../images/cta-bg.webp) no-repeat center/cover;text-align:center}
.cta-band::before{content:"";position:absolute;inset:0;
  background:linear-gradient(135deg,rgba(0,0,0,.78),color-mix(in srgb,var(--pt-primary) 55%,rgba(0,0,0,.72)))}
.cta-band .container-lg{position:relative;z-index:1}
.cta-band .cta-tit{color:var(--white)}
.cta-band .cta-desc{margin-top:2rem;color:rgba(255,255,255,.82)}
.cta-band .cta-btns{margin-top:6rem;display:flex;flex-wrap:wrap;gap:1.2rem;justify-content:center}
.cta-band .cta-btns .btnset + .btnset{margin-left:0}
@media (max-width:992px){
  .cta-band{padding-top:var(--sec-pad-mo);padding-bottom:var(--sec-pad-mo)}
  .cta-band .cta-btns{margin-top:3.2rem}
}

/* ---------- 17. 푸터 (원본 popup-N2) ---------- */
.site-footer{background:var(--black);padding:6.4rem 0 4.8rem;color:var(--white)}
.footer-container{display:flex;justify-content:space-between;gap:4.6rem;flex-wrap:wrap}
.footer-brand{display:inline-flex;align-items:baseline;gap:.6rem;font-size:2.2rem;font-weight:var(--fw-bold);color:var(--white)}
.footer-brand .brand-mark{color:color-mix(in srgb,var(--pt-primary) 78%,#fff)}
.footer-menulist{display:flex;align-items:center;flex-wrap:wrap;margin-top:2.4rem}
.footer-menulink{position:relative}
.footer-menulink a{padding-right:1.2rem;color:var(--white);font-size:var(--fs-p2)}
.footer-menulink a:hover{color:color-mix(in srgb,var(--pt-primary) 70%,#fff)}
.footer-menulink + .footer-menulink a{padding-left:1.2rem}
.footer-menulink + .footer-menulink::after{content:"";position:absolute;top:50%;left:0;
  transform:translateY(-50%);width:1px;height:1.4rem;background:rgba(255,255,255,.18)}
.footer-txtgroup{margin-top:1.6rem}
.footer-txt{display:flex;flex-wrap:wrap;gap:.8rem}
.footer-txt p{color:var(--text-color3);font-size:var(--fs-p3);line-height:var(--lh-p3)}
.footer-txt span + span{margin-left:.8rem}
.footer-right{max-width:42rem}
.footer-right .footer-note{color:var(--text-color3);font-size:var(--fs-p3);line-height:var(--lh-p3)}
@media (max-width:992px){
  .site-footer{padding:4.8rem 0 3.2rem}
  .footer-container{display:block}
  .footer-right{margin-top:2.4rem;max-width:none}
}

/* ---------- 18. 이용약관 / 개인정보 모달 (품티켓 킷 dgm-*) ----------
   킷 HTML 은 클래스만 주고 스타일은 사이트가 준다. 레퍼런스 톤에 맞춰 작성.
   ★ 선택자를 `.dgm-overlay .dgm-x` 처럼 2단계로 쓴 이유:
     격리 블록의 `.dgm-overlay button{...}` 보다 특이도를 높여 눌리지 않게 하기 위함. */
.dgm-links{display:flex;gap:.8rem 1.4rem;flex-wrap:wrap;align-items:center;justify-content:center;margin:1.4rem 0 0}
.dgm-links button{color:rgba(255,255,255,.72);font-size:var(--fs-p3);font-weight:var(--fw-bold);
  padding:.2rem .4rem;text-decoration:underline;text-underline-offset:3px}
.dgm-links button:hover{color:var(--white)}
.dgm-links .dgm-sep{color:rgba(255,255,255,.3);font-size:var(--fs-p3)}
.dgm-overlay{position:fixed;inset:0;z-index:10000;display:none;align-items:center;justify-content:center;
  padding:2rem;background:rgba(17,17,17,.62)}
.dgm-overlay.dgm-on{display:flex}
.dgm-overlay .dgm-box{width:min(680px,100%);max-height:86vh;display:flex;flex-direction:column;
  background:#fff;border-radius:var(--radius-lg);overflow:hidden;box-shadow:0 3rem 8rem rgba(0,0,0,.32)}
.dgm-overlay .dgm-head{flex:0 0 auto;display:flex;align-items:center;justify-content:space-between;gap:1.2rem;
  padding:1.8rem 2.2rem;background:linear-gradient(135deg,var(--pt-primary),var(--pt-primary-deep));color:#fff}
.dgm-overlay .dgm-head h3{margin:0;font-size:1.7rem;font-weight:var(--fw-bold);color:#fff}
.dgm-overlay .dgm-x{background:rgba(255,255,255,.18);border:0;color:#fff;width:3.4rem;height:3.4rem;
  border-radius:.9rem;font-size:2rem;line-height:1;cursor:pointer;flex-shrink:0}
.dgm-overlay .dgm-x:hover{background:rgba(255,255,255,.34)}
.dgm-overlay .dgm-body{flex:1;overflow-y:auto;padding:2.2rem 2.4rem;color:var(--text-color2);
  font-size:1.35rem;line-height:1.8}
.dgm-overlay .dgm-body h4{margin:1.8rem 0 .6rem;font-size:1.45rem;font-weight:var(--fw-bold);color:var(--pt-primary-deep)}
.dgm-overlay .dgm-body h4:first-child{margin-top:0}
.dgm-overlay .dgm-body p{margin:0 0 1rem}
.dgm-overlay .dgm-body strong{color:var(--text-color1)}
.dgm-overlay .dgm-date{margin-top:1.8rem;padding-top:1.2rem;border-top:1px solid var(--line-color1);
  color:var(--text-color4);font-size:1.25rem}