/* =====================================================================
   첫 화면(home)·인사말(intro01) 전용 스타일. 색·글꼴은 site.css 변수만 씁니다.
   ===================================================================== */

/* ---------- 공통 구간 머리 ---------- */
.hm-head{display:flex;align-items:flex-end;justify-content:space-between;gap:4rem;margin-bottom:5rem}
.hm-head .h2{margin-top:1.2rem}
.hm-head .body{margin-top:1.4rem}
.hm-more{flex:none;display:inline-flex;align-items:center;gap:.8rem;height:44px;padding:0 2.4rem;border:1px solid var(--t1);border-radius:22px;font-size:1.481rem;font-weight:500;color:var(--t1);letter-spacing:var(--ls);transition:.25s}
.hm-more:hover{background:var(--or);border-color:var(--or);color:#fff}

/* ---------- 1. 첫 화면 영상(세라네이트) ---------- */
.hm-hero{position:relative;margin-top:var(--hd);height:calc(75vh - var(--hd));min-height:560px;overflow:hidden;background:#d9d6d3}
.hm-hero .bg{position:absolute;inset:-6%;width:112%;height:112%;object-fit:cover;filter:blur(38px) brightness(.92) saturate(.9);transform:scale(1.04)}
.hm-hero .fg{position:absolute;left:50%;top:0;height:100%;width:auto;aspect-ratio:1/1;transform:translateX(-50%);object-fit:cover;box-shadow:0 0 12rem rgba(0,0,0,.12)}
.hm-hero a.cover{position:absolute;inset:0;z-index:2}
.hm-hero .scroll{display:none;position:absolute;left:50%;bottom:2.6rem;transform:translateX(-50%);z-index:3;font-family:var(--en-s);font-size:1.2rem;letter-spacing:.24em;color:#fff;opacity:.85;text-align:center}
.hm-hero .scroll:after{content:"";display:block;width:1px;height:4.2rem;background:rgba(255,255,255,.75);margin:1rem auto 0;animation:hmLine 1.8s ease-in-out infinite}
@keyframes hmLine{0%{transform:scaleY(0);transform-origin:top}50%{transform:scaleY(1);transform-origin:top}51%{transform-origin:bottom}100%{transform:scaleY(0);transform-origin:bottom}}

/* ---------- 2. 인비절라인 영상 띠(film 부품) 첫 화면 보정 ---------- */
body[data-page="home"] .s-film .copy{bottom:13rem}


/* ---------- 2. 치아교정 3칸(인비절라인·얼굴과학·세라믹교정) 한 화면 ---------- */
.hm-trio{padding:8rem 0 0}
.hm-trio .row{display:flex;gap:1.6rem;height:clamp(520px,calc(100vh - var(--hd) - 15rem),780px)}
.hm-panel{position:relative;flex:1 1 0;min-width:0;border-radius:18px;overflow:hidden;background:#e9e5e0;transition:flex-grow .7s cubic-bezier(.2,.7,.2,1)}
.hm-panel.p-face{flex-grow:1.15;background:#e8e4df}
.hm-trio .row:hover .hm-panel{flex-grow:.85}
.hm-trio .row .hm-panel:hover{flex-grow:1.55}
.hm-panel video,.hm-panel svg{position:absolute;inset:0;width:100%;height:100%}
.hm-panel video{object-fit:cover}
.hm-panel.p-cer video{height:124%;bottom:auto;object-position:50% 0}
.hm-panel.p-face video{opacity:0;transition:opacity .9s ease}
.hm-panel.p-face video.on{opacity:1}
.hm-panel svg .ln{fill:none;stroke:#231f20;stroke-width:1.3;stroke-opacity:.7;vector-effect:non-scaling-stroke;stroke-dasharray:1;stroke-dashoffset:1;transition:stroke-dashoffset 1.6s ease .4s}
.hm-panel svg .ac{fill:none;stroke:var(--or);stroke-width:2;vector-effect:non-scaling-stroke;stroke-dasharray:1;stroke-dashoffset:1;transition:stroke-dashoffset 1.6s ease .4s}
.hm-panel svg .dt{fill:var(--or)}
.hm-panel svg g{opacity:0;transition:opacity .5s}
.hm-panel svg g.on{opacity:1}
.hm-panel svg g.on .ln,.hm-panel svg g.on .ac{stroke-dashoffset:0}
.hm-panel .shade{position:absolute;inset:0;background:linear-gradient(180deg,rgba(0,0,0,0) 48%,rgba(0,0,0,.5) 100%);pointer-events:none}
.hm-panel .badge{position:absolute;right:2.8rem;top:2.8rem;width:13.5rem;height:auto;z-index:2}
.hm-panel .copy{position:absolute;left:3.2rem;right:9rem;bottom:3.4rem;color:#fff;z-index:2;text-shadow:0 1px 16px rgba(0,0,0,.18)}
.hm-panel .copy .label{color:#fff;opacity:.85;font-size:1.3rem}
.hm-panel .copy .t{font-size:3rem;line-height:1.3;font-weight:600;letter-spacing:-.05em;margin-top:.8rem;white-space:nowrap}
.hm-panel .copy .d{font-size:1.6rem;line-height:1.5;letter-spacing:var(--ls);color:rgba(255,255,255,.9);margin-top:.8rem;transition:opacity .4s}
.hm-panel .copy .d.out{opacity:0}
.hm-panel .arrow{position:absolute;right:3rem;bottom:3.4rem;width:5rem;height:5rem;border:1px solid rgba(255,255,255,.8);border-radius:50%;display:flex;align-items:center;justify-content:center;color:#fff;font-size:1.8rem;z-index:2;transition:.25s}
.hm-panel:hover .arrow{background:#fff;color:var(--or)}
.hm-trio .tm{margin-top:1.4rem;text-align:right;font-size:1.1rem;color:var(--g3);letter-spacing:0}

/* ---------- (보관) 얼굴과학 고정 스크롤 ---------- */
.hm-face{position:relative;height:330vh;background:#e8e4df}
.hm-face .stick{position:sticky;top:var(--hd);height:calc(100vh - var(--hd));overflow:hidden}
.hm-face video,.hm-face svg{position:absolute;inset:0;width:100%;height:100%}
.hm-face video{object-fit:cover;opacity:0;transition:opacity .9s ease}
.hm-face video.on{opacity:1}
.hm-face svg .ln{fill:none;stroke:#231f20;stroke-width:1.4;stroke-opacity:.7;vector-effect:non-scaling-stroke}
.hm-face svg .ac{fill:none;stroke:var(--or);stroke-width:2;vector-effect:non-scaling-stroke}
.hm-face svg .dt{fill:var(--or)}
.hm-face svg g{opacity:0;transition:opacity .5s}
.hm-face svg g.on{opacity:1}
.hm-face .cap{position:absolute;left:8.4%;top:50%;transform:translateY(-50%);width:34rem;z-index:2}
.hm-face .cap.top{top:9%;transform:none;width:44rem}
.hm-face .cap .hm-more{margin-top:2.6rem}
.hm-face .cap .label{color:var(--g1)}
.hm-face .cap .no{font-family:var(--en);font-size:7.2rem;line-height:1;color:var(--t1);margin-top:2.4rem}
.hm-face .cap .h3{margin-top:1.6rem;font-size:2.8rem}
.hm-face .cap .body{margin-top:1.4rem;color:var(--g1);font-size:1.648rem}
.hm-face .cap .fade{transition:opacity .45s}
.hm-face .cap .fade.out{opacity:0}
.hm-face .intro{position:absolute;right:8.4%;top:50%;transform:translateY(-50%);width:38rem;z-index:2;text-align:left}
.hm-face .intro .h2{font-size:3rem}
.hm-face .intro .body{margin-top:1.6rem;font-size:1.648rem;color:var(--g1)}

.hm-face .prog{position:absolute;left:8.4%;bottom:4.2rem;display:flex;gap:.8rem;z-index:2}
.hm-face .prog i{display:block;width:4.2rem;height:2px;background:rgba(35,31,32,.18);transition:.4s}
.hm-face .prog i.on{background:var(--or)}
.hm-face.s2 .intro,.hm-face.s3 .intro{opacity:0;pointer-events:none}
.hm-face .intro{transition:opacity .45s}

/* ---------- 4. 세라믹교정 + 세라믹치과 소식 ---------- */
.hm-duo{padding:15rem 0 0}
.hm-duo .grid{display:grid;grid-template-columns:1.25fr 1fr;gap:2.4rem}
.hm-card{position:relative;display:block;height:56rem;border-radius:18px;overflow:hidden;background:var(--bg2)}
.hm-card video{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;object-position:50% 30%;transition:transform 1.2s cubic-bezier(.2,.7,.2,1)}
.hm-card:hover video{transform:scale(1.03)}
.hm-card .shade{position:absolute;inset:0;background:linear-gradient(180deg,rgba(0,0,0,0) 50%,rgba(0,0,0,.42) 100%)}
.hm-card .copy{position:absolute;left:4.4rem;bottom:4rem;right:4.4rem;color:#fff}
.hm-card .copy .label{color:#fff;opacity:.85}
.hm-card .copy .h2{color:#fff;margin-top:1rem}
.hm-card .copy .body{color:rgba(255,255,255,.88);margin-top:.8rem}
.hm-card .arrow{position:absolute;right:4rem;bottom:4.4rem;width:5.6rem;height:5.6rem;border:1px solid rgba(255,255,255,.8);border-radius:50%;display:flex;align-items:center;justify-content:center;color:#fff;font-size:2rem;transition:.25s}
.hm-card:hover .arrow{background:#fff;color:var(--or)}
.hm-news{border:1px solid var(--line);background:#fff;display:flex;flex-direction:column}
.hm-news .top{display:flex;align-items:center;justify-content:space-between;padding:2.6rem 3rem 2rem;border-bottom:1px solid var(--line)}
.hm-news .top .ttl{display:flex;align-items:baseline;gap:1.4rem}
.hm-news .top .label{font-size:1.3rem}
.hm-news .top .h3{font-size:2rem}
.hm-news .ctrl{display:flex;align-items:center;gap:1.2rem;font-family:var(--en-s);font-size:1.4rem;color:var(--g2)}
.hm-news .ctrl button{width:3.6rem;height:3.6rem;border-radius:50%;border:1px solid var(--line);background:#fff;color:var(--t1);font-size:1.6rem;cursor:pointer;transition:.2s}
.hm-news .ctrl button:hover{border-color:var(--or);color:var(--or)}
.hm-news .view{position:relative;flex:1;background:var(--bg2);overflow:hidden}
.hm-news .view img{position:absolute;left:50%;top:0;height:100%;width:auto;transform:translateX(-50%);opacity:0;transition:opacity .6s}
.hm-news .view img.on{opacity:1}
.hm-news .cap{padding:1.8rem 3rem 2.2rem;border-top:1px solid var(--line);font-size:1.481rem;line-height:1.5;color:var(--g1);letter-spacing:var(--ls);min-height:7.6rem}

/* ---------- 5. 후기 ---------- */
.hm-review{padding:13rem 0 0}
.hm-review .grid{display:grid;grid-template-columns:repeat(4,1fr);gap:2rem}
.hm-rv{display:flex;flex-direction:column;padding:3rem 2.8rem 2.6rem;border-radius:16px;background:var(--bg2);min-height:30rem;transition:.3s}
.hm-rv:hover{background:#fff;box-shadow:0 1.6rem 4rem rgba(0,0,0,.07)}
.hm-rv .meta{display:flex;justify-content:space-between;align-items:center;font-size:1.3rem;color:var(--g2);letter-spacing:0}
.hm-rv .src{display:inline-flex;height:2.8rem;align-items:center;padding:0 1.2rem;border-radius:1.4rem;background:#fff;color:var(--g1);font-size:1.25rem;font-weight:500;letter-spacing:-.02em}
.hm-rv .q{font-family:var(--en);font-size:4.4rem;line-height:1;color:var(--or);margin:2.2rem 0 .2rem;height:2.6rem}
.hm-rv .txt{flex:1;font-size:1.6rem;line-height:1.7;color:var(--g1);letter-spacing:var(--ls);display:-webkit-box;-webkit-line-clamp:6;-webkit-box-orient:vertical;overflow:hidden}
.hm-rv .go{margin-top:2rem;font-size:1.3rem;color:var(--g2);letter-spacing:var(--ls)}
.hm-rv:hover .go{color:var(--or)}
.hm-review .note{margin-top:2.6rem}

/* ---------- 6. 전후사진 ---------- */
.hm-ba{padding:15rem 0 0}
.hm-ba .grid{display:grid;grid-template-columns:repeat(3,1fr);gap:3.6rem 2.4rem}
.hm-ba .pair{display:grid;grid-template-columns:1fr 1fr;gap:.4rem;border-radius:14px;overflow:hidden}
.hm-ba .ph{position:relative;aspect-ratio:640/286;overflow:hidden;background:#ddd}
.hm-ba .ph img{width:100%;height:100%;object-fit:cover}
.hm-ba .ph .tag{position:absolute;left:1rem;bottom:.9rem;font-family:var(--en-s);font-size:1.1rem;letter-spacing:.12em;color:#fff;text-shadow:0 1px 4px rgba(0,0,0,.4)}
.hm-ba .ph.lock a{position:absolute;inset:0;display:flex;flex-direction:column;align-items:center;justify-content:center;gap:.6rem;background:rgba(35,31,32,.38);color:#fff;font-size:1.2rem;line-height:1.4;text-align:center;letter-spacing:var(--ls)}
.hm-ba .ph.lock svg{width:1.8rem;height:1.8rem}
.hm-ba .meta{margin-top:1.4rem;font-size:1.4rem;color:var(--g2);letter-spacing:var(--ls)}
.hm-ba .meta b{color:var(--t1);font-weight:600;margin-right:.8rem}
.hm-ba .warn{margin-top:5rem;padding:3.2rem 3.6rem;border-radius:16px;background:var(--bg2)}
.hm-ba .warn .t{font-size:1.648rem;font-weight:600;color:var(--t1);letter-spacing:var(--ls);margin-bottom:1.2rem}
.hm-ba .warn p{font-size:1.481rem;line-height:1.8;color:var(--g1);letter-spacing:var(--ls)}

/* =====================  인사말(intro01)  ===================== */
.gr-letter{position:relative;margin-top:var(--hd);background:#121318;color:#fff;overflow:hidden}
.gr-letter .photo{position:absolute;inset:0;background:url(../img/intro01/letter_bg.jpg) right center/cover no-repeat}
.gr-letter .photo:after{content:"";position:absolute;inset:0;background:linear-gradient(90deg,#121318 0%,rgba(18,19,24,.92) 38%,rgba(18,19,24,0) 62%)}
.gr-letter .in{position:relative;z-index:1;width:83.2%;margin:0 auto;padding:15rem 0 14rem}
.gr-letter .txt{max-width:66rem}
.gr-letter .label{color:#fff;opacity:.7}
.gr-letter .ttl{font-size:4.2rem;line-height:1.3;font-weight:600;letter-spacing:-.05em;color:#fff;margin-top:1.6rem}
.gr-letter .ttl:after{content:"";display:block;width:28px;height:2px;background:var(--or);margin-top:3.2rem}
.gr-letter .p{margin-top:2.4rem;font-size:1.75rem;line-height:1.95;color:rgba(255,255,255,.84);letter-spacing:-.04em}
.gr-letter .p:first-of-type{margin-top:4.4rem}
.gr-letter .sign{margin-top:5.6rem;font-size:1.75rem;color:#fff;letter-spacing:-.04em}
.gr-letter .sign span{display:block;font-family:var(--en-s);font-style:italic;font-size:1.4rem;letter-spacing:.04em;color:rgba(255,255,255,.55);margin-top:.8rem}

.gr-care{padding:14rem 0 15rem;background:#fff;text-align:center}
.gr-care .list{display:grid;grid-template-columns:repeat(4,1fr);margin-top:6.4rem;border-top:1px solid var(--line);border-bottom:1px solid var(--line)}
.gr-care .list li{padding:5rem 2rem 4.6rem;border-left:1px solid var(--line)}
.gr-care .list li:first-child{border-left:0}
.gr-care .num{display:block;font-family:var(--en);font-size:6.4rem;line-height:1;color:var(--g3)}
.gr-care .list li:hover .num{color:var(--or)}
.gr-care .nm{display:block;margin-top:2.6rem;font-size:2.266rem;line-height:1.45;font-weight:600;letter-spacing:var(--ls);color:var(--t1)}
.gr-care .ds{display:block;margin-top:1.2rem;font-size:1.481rem;color:var(--g2);letter-spacing:var(--ls)}
.gr-care .lang{margin-top:5.6rem;font-size:1.854rem;color:var(--g1);letter-spacing:var(--ls)}
.gr-care .contact{margin-top:1.4rem;display:flex;justify-content:center;gap:1.6rem;font-size:2.1rem;color:var(--t1);letter-spacing:var(--ls);font-weight:500}
.gr-care .contact a:hover{color:var(--or)}
.gr-care .contact .sl{color:var(--g3);font-weight:300}

/* =====================  모바일  ===================== */
@media (max-width:768px){
  .hm-head{flex-direction:column;align-items:flex-start;gap:2.4rem;margin-bottom:3.6rem}
  .hm-hero{height:auto;min-height:0;aspect-ratio:1/1}
  .hm-hero .fg{width:100%;height:100%;left:0;transform:none}
  .hm-hero .scroll{display:none}
  .hm-face{height:300vh}
  .hm-face video,.hm-face svg{top:14rem;bottom:auto;height:65vw}
  .hm-face .stick{background:#e8e4df}
  .hm-face .cap,.hm-face .cap.top{left:6%;right:6%;width:auto;top:auto;bottom:9rem;transform:none;background:rgba(232,228,223,.86);padding:2.4rem;border-radius:14px}
  .hm-face .cap .no{font-size:4.6rem;margin-top:1.2rem}
  .hm-face .intro{left:6%;right:6%;top:5rem;width:auto;transform:none}
  .hm-face .intro .body{display:none}
  .hm-face.s2 .intro,.hm-face.s3 .intro{opacity:0}
  .hm-face .prog{left:6%;bottom:4rem}
  .hm-trio{padding:5rem 0 0}
  /* 2026-10-11 원장 요청: 옆으로 넘기기 대신 세 카드가 한 화면에 (얼굴과학 위 넓게, 인비절라인·세라믹교정 아래 둘) */
  .hm-trio .wrap{width:88%}
  .hm-trio .row{display:grid;grid-template-columns:1fr 1fr;gap:1rem;height:auto}
  .hm-panel,.hm-panel.p-face,.hm-trio .row:hover .hm-panel,.hm-trio .row .hm-panel:hover{flex:none;height:auto;min-width:0;border-radius:14px}
  .hm-panel.p-face{grid-column:1/-1;grid-row:1;aspect-ratio:16/10}
  .hm-panel.p-inv,.hm-panel.p-cer{aspect-ratio:4/5}
  .hm-panel .badge{width:8rem;right:1.4rem;top:1.4rem}
  .hm-panel .copy{left:1.6rem;right:1.6rem;bottom:1.8rem}
  .hm-panel .copy .label{font-size:1.05rem}
  .hm-panel .copy .t{font-size:2rem}
  .hm-panel .copy .d{font-size:1.25rem;margin-top:.4rem}
  .hm-panel .arrow{display:none}
  .hm-panel.p-face .copy{left:2.4rem;right:7rem;bottom:2.2rem}
  .hm-panel.p-face .copy .t{font-size:2.4rem}
  .hm-panel.p-face .arrow{display:flex;right:2.2rem;bottom:2.2rem;width:4.4rem;height:4.4rem}
  .hm-trio .tm{text-align:left}
  .hm-duo .grid{grid-template-columns:1fr}
  .hm-card{height:auto;aspect-ratio:4/5}
  .hm-news .view{height:60rem;flex:none}
  .hm-review .grid{grid-template-columns:1fr 1fr;gap:1.2rem}
  .hm-rv{padding:2.4rem 2rem;min-height:0}
  .hm-rv .txt{font-size:1.5rem}
  .hm-ba .grid{grid-template-columns:1fr}
  .gr-letter .photo{position:relative;height:56vw;background-position:82% center}
  .gr-letter .photo:after{background:linear-gradient(180deg,rgba(18,19,24,0) 55%,#121318 100%)}
  .gr-letter .in{width:88%;padding:4rem 0 10rem}
  .gr-letter .ttl{font-size:3.2rem}
  .gr-letter .p{font-size:1.7rem}
  .gr-care .list{grid-template-columns:1fr 1fr}
  .gr-care .list li:nth-child(3){border-left:0}
  .gr-care .list li:nth-child(n+3){border-top:1px solid var(--line)}
  .gr-care .contact{flex-direction:column;gap:.6rem}
  .gr-care .contact .sl{display:none}
}