/* ===== TANG:GLE static site — sub pages ===== */
/* padding-top·scroll-margin-top 은 아래 '상세페이지 헤더를 메인과 동일하게' 블록(175px/190px)이 덮어써 왔다 —
   같은 선택자에 같은 속성이 두 번 선언돼 있어 죽은 선언을 지웠다 (2026-09-22). 화면은 그대로다. */
body.sub .site-header{position:fixed;background:rgba(255,255,255,.96);color:var(--brown);box-shadow:0 1px 0 var(--hair);backdrop-filter:blur(8px)}
body.sub .site-header .hd-logo .dark{display:block}body.sub .site-header .hd-logo .light{display:none}
body.sub .icon-btn{background:var(--brown);color:#fff}body.sub .icon-btn.reserve{background:var(--brown-deep)}
body.sub .phone-pill{background:var(--brown);border-color:var(--brown)}
body.sub .hamburger{background:var(--brown)}
body.sub .hd-nav{border-top-color:var(--hair)}
/* 현재 메뉴 주황 강조는 원본(gnb.php)에 없어 뺌 (2026-09-18 검수) */
body.sub .hd-nav .d2 a.on{color:#fff;opacity:1;background:rgba(255,255,255,.14)}
/* page head */
.sub-hero{background:var(--beige);padding:84px 0 54px;position:relative;overflow:hidden}
.sub-hero::after{content:"";position:absolute;right:-140px;top:-160px;width:560px;height:560px;border-radius:50%;border:1px solid rgba(255,102,0,.22);pointer-events:none}
.sub-hero::before{content:"";position:absolute;right:-40px;top:-60px;width:360px;height:360px;border-radius:50%;border:1px solid rgba(122,102,82,.14);pointer-events:none}
.sub-hero h1{font-size:44px;margin-top:16px;position:relative}
.sub-hero .lead{margin-top:14px;font-size:17px;color:var(--muted);max-width:660px;position:relative}
.subnav{background:#fff;border-bottom:1px solid var(--hair);position:relative;z-index:5}
.subnav ul{display:flex;gap:4px;overflow-x:auto;scrollbar-width:none;-webkit-overflow-scrolling:touch}
.subnav ul::-webkit-scrollbar{display:none}
.subnav li a{display:block;padding:0 18px;line-height:60px;font-size:15px;font-weight:500;color:var(--muted);white-space:nowrap;position:relative;transition:color .2s}
.subnav li a:hover,.subnav li a.on{color:var(--ink)}
.subnav li a.on::after{content:"";position:absolute;left:18px;right:18px;bottom:0;height:2px;background:var(--orange)}
.tabs3{background:var(--sand);border-bottom:1px solid var(--hair)}
.tabs3 ul{display:flex;gap:8px;padding:12px 0;overflow-x:auto;scrollbar-width:none}
.tabs3 ul::-webkit-scrollbar{display:none}
.tabs3 li a{display:inline-block;padding:0 16px;line-height:36px;border-radius:100px;font-size:13.5px;font-weight:500;color:var(--brown);border:1px solid transparent;white-space:nowrap;transition:background .2s,color .2s}
.tabs3 li a:hover{border-color:var(--hair);background:#fff}
.tabs3 li a.on{background:var(--ink);color:#fff}
.crumb{font-family:var(--brand);font-size:12px;letter-spacing:.14em;text-transform:uppercase;color:var(--brown);display:flex;gap:10px;align-items:center;padding:14px 0 0}
.crumb a:hover{color:var(--orange)}.crumb span{opacity:.5}
/* converted treatment content */
.tg-page{background:#fff;position:relative}
.tg-fr{width:100%;position:relative}
.tg-fr > [class^="fr"]{display:block}
.tg-vid{position:absolute;inset:0;z-index:3}
.tg-vid iframe{position:absolute;inset:0;width:100%;height:100%;border:0}
.tg-link{cursor:pointer}
.tg-ovl[hidden]{display:none}
.vid-inline{max-width:1044px;margin:0 auto;padding:48px 22px}
.vid-inline .wrap{position:relative;width:100%;aspect-ratio:16/9;background:#000;border-radius:12px;overflow:hidden;box-shadow:0 24px 60px rgba(30,27,24,.12)}
.vid-inline .wrap.v{aspect-ratio:406/720;max-width:406px;margin:0 auto}
.vid-inline .wrap.r{aspect-ratio:1000/378}
.vid-inline .wrap iframe{position:absolute;inset:0;width:100%;height:100%;border:0}
.vid-inline .caption{text-align:center;font-family:var(--serif);font-weight:500;font-size:20px;color:var(--ink);padding:26px 0 6px}
.vid-pair{display:grid;grid-template-columns:1fr 1fr;gap:24px;max-width:1300px;margin:0 auto;padding:48px 22px}
.vid-pair .wrap{position:relative;aspect-ratio:16/9;background:#000;border-radius:12px;overflow:hidden;box-shadow:0 24px 60px rgba(30,27,24,.12)}
.vid-pair .wrap iframe{position:absolute;inset:0;width:100%;height:100%;border:0}
.vid-band{background:#FCFAF9}
.img-tabs{max-width:1920px;margin:0 auto}
.img-tabs-nav{display:flex;justify-content:center;gap:2px;max-width:1288px;margin:0 auto;padding:0 22px}
.img-tabs-nav button{flex:1;max-width:280px;height:72px;background:var(--ink);color:#ddd;font-family:var(--serif);font-weight:500;font-size:19px;letter-spacing:-.01em;transition:background .2s,color .2s}
.img-tabs-nav button.on{background:var(--orange);color:#fff}
.img-tabs-pane img{width:100%;height:auto;display:block}
/* modules on treatment pages */
.mod{padding:110px 0 0}
.mod.last{padding-bottom:40px}
.mod-head{display:flex;align-items:flex-end;justify-content:space-between;gap:20px;flex-wrap:wrap}
.mod-head h3{font-size:30px;margin-top:14px}
.mod-head p{margin-top:8px;color:var(--muted);font-size:15px}
.mod-head .more{margin-bottom:10px}
.vid-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:28px;margin-top:40px}
.card:not(.tg-fr *){display:block}
.thumb .lock,.gcard .ph .lock{position:absolute;inset:0;background:rgba(30,27,24,.55);display:flex;flex-direction:column;align-items:center;justify-content:center;gap:8px;color:#fff;font-size:13px;letter-spacing:.02em;text-align:center;padding:10px}
.thumb .lock svg,.gcard .ph .lock svg,.bna .lock svg{width:26px;height:26px}
.bna-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:28px;margin-top:40px}
.bna .ph{position:relative;aspect-ratio:1042/620;border-radius:10px;overflow:hidden;background:var(--beige-2)}
.bna .ph img{width:100%;height:100%;object-fit:cover}
.bna .ph .lock{position:absolute;top:0;bottom:0;right:0;width:50%;background:rgba(30,27,24,.86);color:#fff;display:flex;flex-direction:column;align-items:center;justify-content:center;gap:8px;font-size:12.5px;text-align:center;padding:10px;line-height:1.5}
.bna .ph .lock.v{right:auto;left:0;bottom:0;top:auto;width:100%;height:50%}
.bna .ph .lock b{font-family:var(--brand);font-weight:500;letter-spacing:.14em;font-size:11px;text-transform:uppercase;opacity:.75}
.bna .ph .tag{position:absolute;left:12px;top:12px;background:rgba(255,255,255,.92);color:var(--ink);font-size:11.5px;font-weight:600;padding:4px 10px;border-radius:100px}
.bna .cap{margin-top:14px;font-size:15px;font-weight:600;color:var(--ink);line-height:1.5}
.bna .info{margin-top:4px;font-size:13px;color:var(--muted)}
.evt-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:28px;margin-top:40px}
.evt .ph{border-radius:12px;overflow:hidden;background:var(--beige-2);aspect-ratio:1/1}
.evt .ph img{width:100%;height:100%;object-fit:cover;object-position:50% 0;transition:transform .6s}
.evt:hover .ph img{transform:scale(1.04)}
.evt h4{margin-top:14px;font-size:16px;font-weight:600;color:var(--ink)}
.evt .meta{margin-top:4px;font-size:13px;color:var(--muted)}
section.cta{padding:120px 0 130px;background:#fff}
.cta-box{background:var(--beige);border-radius:22px;padding:58px 64px;display:flex;justify-content:space-between;align-items:center;gap:40px;flex-wrap:wrap;position:relative;overflow:hidden}
.cta-box::after{content:":";position:absolute;right:38px;top:-40px;font-family:var(--display);font-style:italic;font-weight:300;font-size:260px;line-height:1;color:var(--orange);opacity:.12;pointer-events:none}
.cta-box h3{font-size:30px;margin-top:14px}
.cta-box p{margin-top:12px;color:var(--muted)}
.cta-box .btns{display:flex;flex-wrap:wrap;gap:12px;position:relative}
.pill-btn.dark{background:var(--ink);color:#fff;border-color:var(--ink)}.pill-btn.dark:hover{background:var(--orange);border-color:var(--orange)}
.pill-btn i{font-family:var(--brand);font-weight:500;font-size:13px}
.pill-btn i.kk{background:#FEE500;color:#191919;font-weight:700}
/* boards */
.board:not(.tg-fr *){padding:70px 0 120px}
.board .toolbar{display:flex;justify-content:space-between;align-items:center;gap:16px;flex-wrap:wrap;margin-bottom:28px}
.board .count{font-size:14px;color:var(--muted)}.board .count b{color:var(--orange);font-weight:600}
.tabs{display:flex;gap:8px;flex-wrap:wrap}
.tabs button{padding:0 16px;line-height:38px;border-radius:100px;border:1px solid var(--hair);font-size:14px;color:var(--brown);background:#fff;transition:background .2s,color .2s}
.tabs button:hover{border-color:var(--ink);color:var(--ink)}
.tabs button.on{background:var(--ink);border-color:var(--ink);color:#fff}
.gal-grid{display:grid;grid-template-columns:repeat(4,1fr);gap:32px 24px}
.gal-grid.n3{grid-template-columns:repeat(3,1fr)}
.gal-grid .empty{grid-column:1/-1;text-align:center;padding:60px 0;color:var(--muted)}
.gcard{display:block}
.gcard .ph{aspect-ratio:4/3;border-radius:10px;overflow:hidden;background:var(--beige-2);position:relative}
.gcard .ph img{width:100%;height:100%;object-fit:cover;transition:transform .6s}
.gcard:hover .ph img{transform:scale(1.04)}
.gcard .ph.sq{aspect-ratio:1/1}.gcard .ph.p{aspect-ratio:3/4}.gcard .ph.v{aspect-ratio:9/16}.gcard .ph.w{aspect-ratio:1042/620}.gcard .ph.yt{aspect-ratio:16/9;background:#222}
.gcard .ph.top img{object-position:50% 0}
.gcard .yr{position:absolute;left:12px;top:12px;background:var(--orange);color:#fff;font-family:var(--brand);font-size:11.5px;letter-spacing:.14em;padding:5px 11px;border-radius:100px;z-index:2}
.gcard .badge{position:absolute;right:12px;top:12px;background:rgba(30,27,24,.75);color:#fff;font-size:11px;padding:4px 9px;border-radius:100px;z-index:2}
.gcard h4{margin-top:14px;font-size:16px;font-weight:600;color:var(--ink);line-height:1.5;display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical;overflow:hidden}
.gcard .meta{margin-top:6px;font-size:13px;color:var(--muted);display:flex;gap:10px;flex-wrap:wrap}
.gcard:hover h4{color:var(--orange)}
.gcard .ph .pl{position:absolute;left:50%;top:50%;transform:translate(-50%,-50%);width:54px;height:54px;border-radius:50%;background:rgba(255,255,255,.9);display:flex;align-items:center;justify-content:center;opacity:0;transition:opacity .3s}
.gcard .ph .pl svg{width:18px;height:18px;margin-left:3px;color:var(--ink)}
.gcard:hover .ph .pl{opacity:1}
.list-table{width:100%;border-collapse:collapse;border-top:2px solid var(--ink);font-size:15px}
.list-table th{padding:16px 10px;font-weight:600;color:var(--ink);border-bottom:1px solid var(--hair);font-size:14px}
.list-table td{padding:16px 10px;border-bottom:1px solid var(--hair);text-align:center;color:var(--text);vertical-align:middle}
.list-table td.subj{text-align:left}.list-table td.subj a{display:inline-flex;align-items:center;gap:8px}
.list-table td.subj a:hover{color:var(--orange)}
.list-table .lock{width:15px;height:15px;color:var(--brown);flex:0 0 15px}
.list-table tr.noti{background:var(--sand)}
.list-table .tag{display:inline-block;font-size:11.5px;padding:3px 10px;border-radius:100px;background:var(--orange);color:#fff;font-weight:500;line-height:1.6}
.list-table .tag.wait{background:#e6e0d8;color:#6b5f52}.list-table .tag.done{background:#ddd;color:#555}
.pager{display:flex;justify-content:center;gap:4px;margin-top:40px;flex-wrap:wrap}
.pager button{min-width:38px;height:38px;border-radius:50%;font-size:14px;color:var(--muted);font-variant-numeric:tabular-nums}
.pager button:hover{background:var(--beige);color:var(--ink)}
.pager button.on{background:var(--ink);color:#fff}.pager button:disabled{opacity:.3}
.read{max-width:1000px;margin:0 auto}
.read .rh{border-bottom:1px solid var(--hair);padding-bottom:22px}
.read .rh h2{font-size:30px;line-height:1.4}
.read .rh .meta{margin-top:12px;font-size:14px;color:var(--muted);display:flex;gap:16px;flex-wrap:wrap}
.read .body{padding:40px 0;font-size:16px;line-height:1.9;overflow-wrap:anywhere}
.read .body img{height:auto;margin:0 auto;max-width:100%}
.read .body p{margin:0 0 .6em}
.read .body table{max-width:100%}
.read .atts{display:grid;gap:24px;margin-top:10px}
.read .atts img{margin:0 auto;border-radius:8px}
.read .tc-swap{margin:24px 0;max-width:100%;overflow-x:auto}
.read .tc-swap .tg-fr{max-width:var(--canvas,100%);margin:0 auto}
.tc-sub{width:100%}
.tc-sub .tg-fr{max-width:var(--canvas,100%);margin:0 auto}
.read .bna-pair{position:relative;border-radius:10px;overflow:hidden}
.read .nav{border-top:1px solid var(--hair);margin-top:20px;padding-top:20px;display:flex;justify-content:space-between;gap:14px;flex-wrap:wrap}
.read .nav a{font-size:14px;color:var(--brown)}.read .nav a:hover{color:var(--orange)}
.btn{display:inline-flex;align-items:center;justify-content:center;height:46px;padding:0 26px;border-radius:100px;font-size:14px;font-weight:500;border:1px solid var(--ink);color:var(--ink);background:#fff;transition:background .2s,color .2s}
.btn:hover{background:var(--ink);color:#fff}
.btn.primary{background:var(--orange);border-color:var(--orange);color:#fff}.btn.primary:hover{background:var(--ink);border-color:var(--ink)}
.btn.ghost{border-color:var(--hair);color:var(--brown)}
.form{max-width:860px;margin:0 auto}
.form .row{display:grid;grid-template-columns:170px 1fr;gap:14px 20px;padding:18px 0;border-bottom:1px solid var(--hair);align-items:center}
.form .lab{font-weight:600;color:var(--ink);font-size:15px}
.form .lab em{font-style:normal;color:var(--orange);margin-left:3px}
.form input[type=text],.form input[type=tel],.form input[type=email],.form input[type=date],.form input[type=time],.form input[type=password],.form input[type=number],.form select,.form textarea{width:100%;height:46px;border:1px solid var(--hair);border-radius:8px;padding:0 14px;font:inherit;font-size:15px;background:#fff;color:var(--text)}
.form input:focus,.form select:focus,.form textarea:focus{outline:2px solid var(--orange);outline-offset:0;border-color:transparent}
.form textarea{height:180px;padding:12px 14px;line-height:1.6}
.form .inline{display:flex;gap:10px;flex-wrap:wrap;align-items:center}
.form .inline input,.form .inline select{width:auto;flex:1;min-width:80px}
.form .inline .unit{font-size:14px;color:var(--muted)}
.form .radios{display:flex;gap:18px;flex-wrap:wrap;font-size:15px}.form .radios label{display:flex;align-items:center;gap:6px}
.form .agree{background:var(--beige);border-radius:12px;padding:18px 20px;font-size:14.5px;margin-bottom:6px}
.form .agree label{display:flex;align-items:center;gap:8px;font-weight:500;color:var(--ink)}
.form .agree .txt{max-height:130px;overflow:auto;font-size:12.5px;color:var(--muted);margin-top:10px;padding-right:6px;line-height:1.7}
.form .btns{display:flex;justify-content:center;gap:12px;margin-top:36px}
.form .note{font-size:13px;color:var(--muted);margin-top:6px;line-height:1.6}
.form .file{font-size:14px}
.notice-box{background:var(--sand);border-radius:16px;padding:28px 32px;font-size:15px;color:var(--text);line-height:1.8}
.notice-box b{color:var(--ink)}
.steps:not(.tg-fr *){display:grid;grid-template-columns:repeat(3,1fr);gap:20px;margin:0 0 40px}
.steps div{background:#fff;border:1px solid var(--hair);border-radius:16px;padding:26px 24px}
.steps b{font-family:var(--display);font-style:italic;font-weight:300;font-size:36px;color:var(--orange);line-height:1;display:block}
.steps h4{font-family:var(--serif);font-weight:500;font-size:18px;margin-top:12px;color:var(--ink)}
.steps p{font-size:14px;color:var(--muted);margin-top:8px}
/* intro / image pages */
.img-page{background:#fff}
.img-page img{width:100%;height:auto;display:block;margin:0 auto;max-width:1920px}
.tv-band{background:var(--beige);padding:120px 0}
.tv-band .wrap{max-width:1060px;margin:0 auto;position:relative;aspect-ratio:16/9;background:#000;border-radius:14px;overflow:hidden;box-shadow:0 30px 70px rgba(30,27,24,.16)}
.tv-band .wrap iframe{position:absolute;inset:0;width:100%;height:100%;border:0}
.acad{max-width:1288px;margin:0 auto;padding:110px 22px 40px;display:grid;grid-template-columns:413px 1fr;gap:60px;align-items:start}
.acad .por img{width:100%;height:auto;border-radius:12px}
.acad .yr{font-family:var(--display);font-weight:300;font-size:42px;color:var(--ink);line-height:1;padding-bottom:10px;border-bottom:1px solid var(--hair);display:inline-block;margin-bottom:12px}
.acad .yr i{font-style:italic;color:var(--orange)}
.acad .grp + .grp{margin-top:34px}
.acad .t{font-size:15.5px;font-weight:600;color:var(--ink);line-height:1.7}
.acad .t + .t{margin-top:10px}
.acad .en{font-size:14px;color:var(--muted);line-height:1.6;margin:2px 0 10px}
.interior{padding:90px 0 40px}
.interior .grid{display:grid;grid-template-columns:repeat(4,1fr);gap:16px}
.interior .grid a{display:block;aspect-ratio:4/3;border-radius:10px;overflow:hidden;background:var(--beige-2)}
.interior .grid img{width:100%;height:100%;object-fit:cover;transition:transform .6s}
.interior .grid a:hover img{transform:scale(1.05)}
#imgLb{position:fixed;inset:0;z-index:100000;background:rgba(0,0,0,.86);display:flex;align-items:center;justify-content:center;padding:24px;cursor:zoom-out}
#imgLb[hidden]{display:none}#imgLb img{max-width:min(1200px,96vw);max-height:92vh;width:auto;height:auto;border-radius:8px}
.katalk{padding:60px 0 20px;text-align:center}
.katalk img{max-width:1288px;width:100%;height:auto;margin:0 auto;border-radius:16px}
.katalk .kbtn{display:inline-flex;align-items:center;gap:12px;margin-top:30px;height:60px;padding:0 34px;border-radius:100px;background:#FEE500;color:#191919;font-weight:700;font-size:17px;transition:transform .2s}
.katalk .kbtn:hover{transform:translateY(-3px)}
.legal{max-width:960px;margin:0 auto;padding:60px 0 120px;font-size:14.5px;line-height:1.85;color:var(--text)}
.legal h2{font-size:26px;margin-bottom:24px}.legal h3{font-family:var(--serif);font-size:18px;margin:30px 0 10px;color:var(--ink)}
.legal p{margin:0 0 10px}
/* responsive */
@media (max-width:1100px){
  .vid-grid,.bna-grid,.evt-grid{grid-template-columns:repeat(2,1fr)}
  .gal-grid{grid-template-columns:repeat(3,1fr)}
  .acad{grid-template-columns:300px 1fr;gap:40px}
  .interior .grid{grid-template-columns:repeat(3,1fr)}
}
@media (max-width:820px){
  .sub-hero{padding:54px 0 36px}.sub-hero h1{font-size:30px}.sub-hero .lead{font-size:15px}
  .subnav li a{line-height:50px;font-size:14px;padding:0 12px}.subnav li a.on::after{left:12px;right:12px}
  .mod{padding:70px 0 0}.mod-head h3{font-size:24px}
  .vid-grid,.bna-grid,.evt-grid,.gal-grid,.gal-grid.n3{grid-template-columns:repeat(2,1fr);gap:20px 14px}
  .vid-pair{grid-template-columns:1fr}
  section.cta{padding:70px 0 80px}.cta-box{padding:36px 26px}.cta-box h3{font-size:24px}.cta-box::after{font-size:180px;right:10px}
  .board:not(.tg-fr *){padding:40px 0 80px}
  .list-table th:nth-child(1),.list-table td:nth-child(1),.list-table .hide-m{display:none}
  .read .rh h2{font-size:22px}
  .form .row{grid-template-columns:1fr;gap:8px;padding:14px 0}
  .steps:not(.tg-fr *){grid-template-columns:1fr}
  .acad{grid-template-columns:1fr;padding-top:60px}.acad .por{max-width:320px}
  .interior .grid{grid-template-columns:repeat(2,1fr)}
  .img-tabs-nav button{height:56px;font-size:15px}
  .tv-band{padding:60px 0}
}
@media (max-width:480px){.gal-grid,.gal-grid.n3,.bna-grid,.vid-grid,.evt-grid{grid-template-columns:1fr}}
/* mobile: dock the quick rail at the bottom on sub pages (keeps content readable) */
@media (max-width:820px){
  body.sub #quick{display:flex;left:0;right:0;bottom:0;top:auto;width:auto;border-radius:0;border:0;border-top:1px solid #eee;box-shadow:0 -8px 24px rgba(0,0,0,.08);z-index:60}
  body.sub #quick a,body.sub #quick button{flex:1;height:58px;border-bottom:0;border-right:1px solid #f0f0f0;font-size:10.5px;gap:0}
  body.sub #quick .ic{transform:scale(.5);margin:-14px 0 -12px}
  body.sub #quick .tel,body.sub #quick .top{display:none!important}
  body.sub{padding-bottom:58px}
}

/* ===== 상세페이지 헤더를 메인 페이지와 동일하게 (2026-09-11) =====
   메인(index.html)은 라이브 레거시 헤더(#top 100px + #gnb 75px, Pretendard 16/700, 1500px 축)를 쓴다.
   서브는 마크업을 그대로 두고 CSS만 그 룩에 맞춘다 — 435개 파일이 이 파일 하나를 공유한다. */
body.sub{padding-top:175px}
body.sub .site-header{background:#fff;color:#333;box-shadow:none;border-bottom:1px solid #ededed;backdrop-filter:none}
body.sub .hd-top{height:100px;max-width:1500px;margin:0 auto;padding:0;justify-content:flex-end}
body.sub .hd-top{transition:none}   /* 머리띠 윗줄 높이 전환(main.css .3s) 끔 — 스크롤 뒤 국기(언어 버튼)가 미끄러져 내려오던 것, 2026-09-18 */
/* 메인에 없는 요소: 왼쪽 원형 버튼(예약·오시는길)·갈색 전화 pill */
body.sub .hd-util,body.sub .phone-pill{display:none!important}
body.sub .hd-logo img{height:54px;width:216px}
body.sub .site-header.scrolled .hd-logo img{width:auto}   /* 2026-09-29: 내린 상태는 높이만 34px 로 줄어 216x34 로 가로로 늘어나고, 30px 창에서 심볼 오른쪽(G·잎)이 잘렸다 → 폭 auto(136x34). 되돌리기: 이 줄 삭제 */
/* 오른쪽: 메인과 같은 지구본 아이콘 + 좌우 세로 구분선 */
body.sub .hd-right{gap:0;margin-right:3.5%;position:relative}
body.sub .hd-right::after{content:'';position:absolute;right:0;top:38%;width:1px;height:24%;background:#ddd}
body.sub .lang{width:65px;height:100px;padding:0;gap:0;font-size:0;position:relative}
body.sub .lang > svg,body.sub .lang > span{display:none}
body.sub .lang::before{content:'';position:absolute;inset:0;background:url(https://channel-static.rebeauty.co.kr/tanggleps/ko/live/images/top/icon_language_dark.png) center center no-repeat;opacity:.5;transition:opacity .2s}
body.sub .lang:hover::before{opacity:1}
body.sub .lang::after{content:'';position:absolute;left:0;top:38%;width:1px;height:24%;background:#ddd}
body.sub .lang ul{top:72px}
/* GNB: 메인과 같은 서체·크기·간격 (항목 사이 50px, 좌우 75px → 1500px 축에 정확히 맞는다) */
body.sub .hd-nav{border-top:1px solid #ededed;background:#fff}
body.sub .hd-nav > .container{max-width:1500px;padding:0}
body.sub .hd-nav > .container > ul{justify-content:space-between;gap:0;padding:0 75px}
body.sub .hd-nav li.d1 > a{line-height:75px;padding:0;font-family:"Pretendard Variable",Pretendard,system-ui,-apple-system,sans-serif;font-size:16px;font-weight:700;letter-spacing:1px;color:#333}
body.sub .hd-nav li.d1:nth-last-child(-n+3) > a{color:#FF6600}
body.sub .hd-nav li.d1 > a:hover{color:#FF6600}   /* 원본은 현재 메뉴를 강조하지 않는다(hover 만) */
body.sub section{scroll-margin-top:190px}
@media (max-width:1560px){body.sub .hd-top,body.sub .hd-nav > .container{padding:0 30px}}
@media (max-width:1360px){body.sub .hd-nav > .container > ul{gap:28px;padding:0 20px}}
@media (max-width:820px){body.sub{padding-top:72px}body.sub .hd-top{height:64px}body.sub .hd-logo img{height:34px;width:auto}body.sub .hd-util{display:flex!important}}

/* ===== GNB 2차 메뉴: 기준 홈페이지(tanggleps.com)와 같은 가로 바 (2026-09-15) =====
   갈색 드롭다운 대신 1차 메뉴 아래 전폭 흰 바(60px)에 하위 메뉴를 한 줄로 펼친다.
   · 1차: 메인·기준과 같은 gmsl 16/700 scaleX(.95). 호버·현재 항목 아래 주황 2px 밑줄
   · 2차: › 화살표 + gmsl 16/700. 호버·현재 페이지는 주황 + 옅은 주황 밑줄
   · 가로 위치(호버한 1차 항목 왼쪽에서 시작, 넘치면 오른쪽 끝 정렬)와 밑줄 위치는 js/site.js 가 잡는다 */
@font-face{font-family:'gmsl';font-weight:300;font-style:normal;font-display:swap;src:url('https://channel-static.rebeauty.co.kr/tanggleps/ko/font/GmarketSansLight.woff2') format('woff2'),url('https://channel-static.rebeauty.co.kr/tanggleps/ko/font/GmarketSansLight.woff') format('woff')}
body.sub .hd-nav .d1-bar{display:none}
@media (min-width:821px){
  body.sub .hd-nav{position:relative}
  body.sub .hd-nav li.d1{position:static}
  body.sub .hd-nav li.d1 > a{font-family:'gmsl',sans-serif;font-weight:700;transform:scaleX(.95);transition:color .5s}
  body.sub .hd-nav.d2-open li.d1.is-cur > a{color:#FF6600}
  body.sub .hd-nav.d2-open li.d1.active:not(.is-cur):not(:nth-last-child(-n+3)) > a{color:#333}
  body.sub .hd-nav .d1-bar{display:block;position:absolute;left:0;bottom:-1px;width:0;height:2px;background:#FF6600;opacity:0;z-index:71;pointer-events:none;
    transition:left .5s cubic-bezier(.215,.61,.355,1),width .5s cubic-bezier(.215,.61,.355,1),opacity .5s}
  body.sub .hd-nav li.d1 .d2{left:0;right:0;top:calc(100% + 1px);min-width:0;height:60px;padding:0;display:flex;
    background:rgba(255,255,255,.95);color:#333;border-radius:0;border-bottom:1px solid rgba(0,0,0,.2);box-shadow:none;
    opacity:1;visibility:hidden;transform:translateY(-60px);clip-path:inset(60px 0 0 0);
    transition:transform .5s cubic-bezier(.23,1,.32,1),clip-path .5s cubic-bezier(.23,1,.32,1),visibility 0s .5s}
  body.sub .hd-nav.d2-open li.d1.is-cur .d2{visibility:visible;transform:none;clip-path:inset(0);
    transition:transform .5s cubic-bezier(.23,1,.32,1),clip-path .5s cubic-bezier(.23,1,.32,1),visibility 0s}
  body.sub .hd-nav.d2-open.d2-swap li.d1 .d2{transition:none}
  body.sub .hd-nav .d2::before{display:none}
  body.sub .hd-nav .d2 a{position:relative;display:block;height:60px;padding:24px 20px 0 10px;background:none;opacity:1;
    font-family:'gmsl',sans-serif;font-weight:700;font-size:16px;line-height:1;letter-spacing:-.5px;color:#333;text-align:left;
    transform:scaleX(.95);transform-origin:left;transition:color .5s cubic-bezier(.23,1,.32,1)}
  body.sub .hd-nav .d2 a::before{content:"";position:absolute;left:0;top:50%;margin-top:-3px;width:4px;height:7px;background:url(https://channel-static.rebeauty.co.kr/tanggleps/ko/live/images/gnb/arrow.png) no-repeat;opacity:.3;transition:opacity .5s}
  body.sub .hd-nav .d2 a::after{content:"";position:absolute;left:10px;bottom:20px;width:0;height:1px;background:rgba(255,102,0,.4);transition:width .5s cubic-bezier(.23,1,.32,1)}
  body.sub .hd-nav .d2 a:hover,body.sub .hd-nav .d2 a.on{color:#FF6600;background:none}
  body.sub .hd-nav .d2 a:hover::before,body.sub .hd-nav .d2 a.on::before{opacity:1}
  body.sub .hd-nav .d2 a:hover::after,body.sub .hd-nav .d2 a.on::after{width:calc(100% - 30px)}
}

/* ─────────────────────────────────────────────────────────────
   퀵메뉴 — 기준(라이브) include/quick.php 를 그대로 옮긴 것 (2026-09-16)
   메인(index.html)은 이미 라이브 그대로라 서브페이지만 맞춘다.
   main.css 의 옛 퀵메뉴(흰 카드·라벨 노출) 값은 여기서 되돌린다.
   ───────────────────────────────────────────────────────────── */
#quick{top:0;right:20px;left:auto;bottom:auto;height:100%;width:auto;position:fixed;font-size:0;line-height:0;z-index:65;   /* 2026-09-24: 20 → 65. 머리 막대(.site-header z60)가 퀵메뉴 첫 칸(TALK) 위쪽을 덮었다 — 퀵메뉴를 맨 위로(팝업 90000·영상 100000 보다는 아래) */

  background:none;border:0;border-radius:0;box-shadow:none;overflow:visible;padding:0;display:block}
#quick .quick_wrap{width:80px;margin-top:calc((100vh - 770px)/2);position:relative;transition:all ease-in-out .5s}
#quick .quick_wrap.scroll{margin-top:calc((100vh - 850px)/2)}
#quick .quick_wrap .customer_wrap{width:100%;height:210px;background:url(https://channel-static.rebeauty.co.kr/tanggleps/ko/images/quick/call.png) no-repeat center 25px;position:relative;padding:100px 0 0 0}
#quick .quick_wrap .customer_wrap:before{content:"";bottom:0;left:20%;position:absolute;width:60%;height:1px;background:rgba(0,0,0,.2)}
#quick .quick_wrap .customer_wrap > p{font-family:'Oswald-light';font-size:21px;color:#f60;line-height:1;letter-spacing:1px;transform:rotate(90deg);transform-origin:top top;margin:0;white-space:nowrap}   /* 2026-09-24: 전화번호가 42px 칸에서 "02.542.8 / 427" 두 줄로 쪼개졌다 → 한 줄 */
#quick .quick_wrap .btn_wrap{position:relative}
#quick .quick_wrap .btn_wrap a{display:block;width:100%;height:auto;border:0;background:none;font-size:0;gap:0}
#quick .quick_wrap .btn_wrap .btn{width:calc(100% - 1px);height:80px;position:relative;cursor:pointer;overflow:hidden;display:block;border:0;border-radius:0;background:none;padding:0;box-shadow:none;color:inherit;font:inherit;min-width:0;margin:0}
#quick .quick_wrap .btn_wrap .btn > div{top:0;left:0;width:100%;height:100%;position:absolute;background:none}
#quick .quick_wrap .btn_wrap .btn > div .icon{width:50px;height:50px;margin:18px auto 0 auto;transform:none;transition:margin-top .4s cubic-bezier(.215,.61,.355,1)}
#quick .quick_wrap .btn_wrap .btn > div .title{bottom:12px;left:0;position:absolute;width:100%;font-family:'nanum';font-weight:400;font-size:13px;line-height:1;letter-spacing:-1px;color:#f60;text-align:center;opacity:0;margin:0;transition:opacity .4s}
#quick .quick_wrap .btn_wrap .btn .off{background:rgba(255,255,255,0)}
#quick .quick_wrap .btn_wrap .btn:before{content:'';top:0;left:20%;position:absolute;width:60%;height:1px;background:rgba(0,0,0,.2)}
#quick .quick_wrap .btn_wrap a:last-child .btn:after{content:"";bottom:0;left:20%;position:absolute;width:60%;height:1px;background:rgba(0,0,0,.2)}
#quick .quick_wrap .btn_wrap .btn:hover > div .icon{margin-top:6px}
#quick .quick_wrap .btn_wrap .btn:hover > div .title{opacity:1}
#quick .quick_wrap .btn_top{width:100%;height:0;overflow:hidden;position:relative;transition:all ease-out .3s}
#quick .quick_wrap .btn_top .wrap{top:0;left:0;margin-top:-80px;position:absolute;width:100%;height:80px;cursor:pointer;transition:all ease-in-out .3s;border:0;background:none;padding:0;display:block}
#quick.show-top .quick_wrap .btn_top{height:80px}
#quick.show-top .quick_wrap .btn_top .wrap{margin-top:0}
#quick .quick_wrap .btn_top .wrap .bg{top:0;left:0;position:absolute;width:100%;height:100%;background:#fff;opacity:0}
#quick .quick_wrap .btn_top .wrap .arrow{top:50%;left:50%;margin:-25px 0 0 -5px;transform:rotate(-135deg);position:relative;border:solid #f60;border-width:0 1px 1px 0;display:inline-block;vertical-align:middle;padding:4px}
#quick .quick_wrap .btn_top .wrap p{font-family:'Oswald-regular';font-size:15px;color:#f60;line-height:1;padding-top:40px;text-align:center;position:relative;margin:0}
/* 화면 높이별 축소 — 기준과 같은 값 */
@media only screen and (max-height:950px){
  #quick .quick_wrap{margin-top:calc((100vh - 672px)/2)}
  #quick .quick_wrap.scroll{margin-top:calc((100vh - 752px)/2)}
  #quick .quick_wrap .btn_wrap .btn{height:66px}
  #quick .quick_wrap .btn_wrap .btn > div .icon{width:44px;height:44px;margin:11px auto 0 auto}
  #quick .quick_wrap .btn_wrap .btn > div .title{bottom:8px;font-size:12px}
  #quick .quick_wrap .btn_wrap .btn:hover > div .icon{margin-top:1px}
}
@media only screen and (max-height:820px){
  #quick .quick_wrap{margin-top:calc((100vh - 602px)/2)}
  #quick .quick_wrap.scroll{margin-top:calc((100vh - 682px)/2)}
  #quick .quick_wrap .btn_wrap .btn{height:56px}
  #quick .quick_wrap .btn_wrap .btn > div .icon{width:38px;height:38px;margin:9px auto 0 auto}
  #quick .quick_wrap .btn_wrap .btn > div .title{bottom:6px;font-size:11px}
  #quick .quick_wrap .btn_wrap .btn:hover > div .icon{margin-top:1px}
}
@media only screen and (max-height:700px){
  #quick .quick_wrap{margin-top:calc((100vh - 546px)/2)}
  #quick .quick_wrap.scroll{margin-top:calc((100vh - 626px)/2)}
  #quick .quick_wrap .btn_wrap .btn{height:48px}
  #quick .quick_wrap .btn_wrap .btn > div .icon{width:32px;height:32px;margin:8px auto 0 auto}
  #quick .quick_wrap .btn_wrap .btn > div .title{display:none}
}
/* 모바일(기준은 m/ 별도 사이트) — 우리는 하단 가로 바로 둔다 */
@media (max-width:1100px){
  body.sub #quick, #quick{left:0;right:0;top:auto;bottom:0;height:auto;width:auto;background:#fff;border-top:1px solid #eee;box-shadow:0 -6px 20px rgba(0,0,0,.08);z-index:60}
  #quick .quick_wrap{width:auto;margin:0;display:flex}
  #quick .quick_wrap .btn_wrap{flex:1;display:flex}
  #quick .quick_wrap .btn_wrap a{flex:1}
  #quick .quick_wrap .btn_wrap .btn{width:100%;height:56px}
  #quick .quick_wrap .btn_wrap .btn > div .icon{width:34px;height:34px;margin:4px auto 0;background-size:34px 238px!important}
  #quick .quick_wrap .btn_wrap .btn > div .title{opacity:1;bottom:4px;font-size:10px;letter-spacing:-.5px}
  #quick .quick_wrap .btn_wrap .btn:before{display:none}
  #quick .quick_wrap .customer_wrap,#quick .quick_wrap .btn_top{display:none}
}

/* ─────────────────────────────────────────────────────────────
   하단 상담바 — 기준(라이브) include/common_fixed_sms.php 그대로 (2026-09-16)
   기준은 라벨 없이 자리표시자만 쓰고, 입력칸은 회색(#ccc)·gmsl 가짜볼드다.
   ───────────────────────────────────────────────────────────── */
#c_sms{width:100%;left:0;right:auto;bottom:-80px;position:fixed;z-index:10;transition:bottom ease-out .3s;
  background:none;backdrop-filter:none;transform:none;color:inherit}
#c_sms.on{bottom:0}
#c_sms > div{width:100%;height:80px;position:relative;background:rgba(0,0,0,.6);backdrop-filter:grayscale(100%) blur(5px);transition:background .5s}
#c_sms > div:hover{background:rgba(0,0,0,1)}
#c_sms .quick_sms_wrap{width:1288px;height:100%;margin:0 auto;position:relative;display:flex;align-items:center}
#c_sms form{max-width:none;margin:0;padding:0;display:block}
#c_sms .field_wrap{position:relative;display:flex;justify-content:flex-start;align-items:center}
#c_sms .field_wrap .box{position:relative}
#c_sms .field_wrap .input_sms{font-family:'gmsl';font-weight:bold;font-size:15px;line-height:1;color:#000;background:#ccc;
  padding:10px 10px 7px 10px;border:1px solid #ccc;box-sizing:border-box;border-radius:4px;overflow:hidden;height:auto;flex:none;
  transition:background .5s,border-color .5s}
#c_sms .field_wrap .input_sms::placeholder{font-family:'gmsl';font-weight:bold;font-size:16px;line-height:1;color:#000;opacity:1}
#c_sms .field_wrap .input_sms:focus{background:#fff;border-color:#f60;outline:none}
#c_sms .field_wrap .box:nth-child(n+2){margin-left:15px}
#c_sms .field_wrap .box:nth-child(1) .input_sms{width:160px}
#c_sms .field_wrap .box:nth-child(2) .input_sms{width:180px}
#c_sms .field_wrap .box:nth-child(3) .input_sms{width:440px}
#c_sms .field_wrap .box:nth-child(4){margin-left:25px;display:flex;align-items:flex-start}
#c_sms .field_wrap .box:nth-child(4) input{margin-top:6px}
#c_sms .field_wrap .box:nth-child(4) #btn_agree{margin-left:10px;padding-top:7px;font-family:'gmsl';font-weight:bold;font-size:13px;
  line-height:1.3;color:#ccc;cursor:pointer;white-space:nowrap}
#c_sms .field_wrap .box:nth-child(4) #btn_agree a{color:inherit;text-decoration:none;opacity:1}
#c_sms .field_wrap .box:nth-child(5){margin-left:80px;background:#f60;border:1px solid rgba(255,255,255,0);border-radius:4px;overflow:hidden;cursor:pointer;transition:border-color .5s}
#c_sms .field_wrap .box:nth-child(5):hover{border-color:#fff}
#c_sms .field_wrap .box:nth-child(5) button{font-family:'gmsl';font-weight:bold;font-size:18px;line-height:1;color:#fff;
  padding:13px 50px 10px 50px;background:none;border:0;height:auto;border-radius:0;display:block}
@media (max-width:1340px){ #c_sms .quick_sms_wrap{width:auto;padding:0 20px} }

/* ─────────────────────────────────────────────────────────────
   머리띠 — 기준(라이브) include/gnb.php 와 같은 움직임 (2026-09-16)
   · 아래로 내리면 통째로 숨고, 위로 올리면 75px 한 줄(로고 왼쪽 + 메뉴)로 다시 나온다.
   · 기준 서브페이지에는 시술 3단 탭 줄이 없다(2차 메뉴로 들어간다) → 데스크톱에선 감춘다.
   ───────────────────────────────────────────────────────────── */
@media (min-width:1101px){
  .site-header.scrolled{transition:transform .3s ease-out,background .3s,box-shadow .3s}
  .site-header.scrolled.hd-hide{transform:translateY(-105%)}
  .site-header.scrolled .hd-top{height:0;overflow:visible}
  .site-header.scrolled .hd-util,.site-header.scrolled .hd-right{display:none}
  .site-header.scrolled .hd-top{position:relative;z-index:2}
  /* 기준은 줄어든 머리띠에 심볼만 남기고 세로 구분선을 둔다 */
  .site-header.scrolled .hd-logo{left:40px;top:38px;transform:translateY(-50%);z-index:2;width:30px;overflow:hidden}
  .site-header.scrolled .hd-logo img{height:34px;max-width:none}
  .site-header.scrolled .hd-top:after{content:'';position:absolute;left:90px;top:20px;width:1px;height:36px;background:rgba(0,0,0,.18)}
  .site-header.scrolled .hd-nav{border-top:0}
  .site-header.scrolled .hd-nav > .container > ul{padding-left:128px}
  .site-header.scrolled .hd-nav li.d1 > a{line-height:75px}
  body.sub .subnav{display:none}
}

/* ─────────────────────────────────────────────────────────────
   본문 조각(.tg-fr) 안의 라벨 — 사이트 공통 부품(.eyebrow)이 끼어들어
   기준에는 없는 '대문자 변환·넓은 자간·앞 주황선'이 붙었다. 조각 안에서만 끈다. (2026-09-16)
   ───────────────────────────────────────────────────────────── */
.tg-fr .eyebrow{text-transform:none!important;letter-spacing:normal!important}
.tg-fr .eyebrow::before{content:none!important;display:none!important}

/* ── REAL SELFIE 갤러리 (원본 #sub_selfie 와 같은 모양) ────────────────────── */
.mod-selfie{padding-top:110px}
.mod-selfie .selfie-head{padding:30px 0 60px;text-align:center;position:relative}
.mod-selfie .selfie-head .wrap{position:relative;padding-bottom:25px;display:flex;justify-content:center;gap:15px}
.mod-selfie .selfie-head .wrap:before{content:'';bottom:0;left:50%;margin-left:-30px;position:absolute;width:60px;height:1px;background:#aaa}
.mod-selfie .selfie-head .wrap>p{font-family:'GloberThinFree','Oswald',sans-serif;font-size:44px;line-height:1;letter-spacing:0;text-transform:uppercase}
.mod-selfie .selfie-head .wrap>p.tangle{color:#f60}
.mod-selfie .selfie-head .wrap>p.rs{color:#000}
.mod-selfie .selfie-head .more-round{bottom:60px;right:0;position:absolute;border:1px solid #f90;width:62px;height:62px;border-radius:31px;display:flex;justify-content:center;align-items:center;transition:all .3s ease-out}
.mod-selfie .selfie-head .more-round:before{content:'';position:absolute;width:21px;height:1px;background:#f60}
.mod-selfie .selfie-head .more-round:after{content:'';position:absolute;width:1px;height:21px;background:#f60}
.mod-selfie .selfie-head .more-round:hover{background:#f90}
.mod-selfie .selfie-head .more-round:hover:before,.mod-selfie .selfie-head .more-round:hover:after{background:#fff}
.mod-selfie .selfie-grid{column-count:5;column-gap:10px}
.mod-selfie .selfie-grid .it{break-inside:avoid;margin:0 0 10px;position:relative;overflow:hidden;display:block;background:#fff}
.mod-selfie .selfie-grid .it img{width:100%;display:block;transition:transform .5s ease-out}
.mod-selfie .selfie-grid .it .ov{position:absolute;inset:0;background:rgba(0,0,0,.6);opacity:0;transition:opacity .4s ease-in-out;display:flex;justify-content:center;align-items:center}
.mod-selfie .selfie-grid .it .ov:before{content:'';position:absolute;width:52px;height:52px;border-radius:26px;border:1px solid rgba(255,255,255,.6);transform:scale(0);transition:transform .4s ease-in-out}
.mod-selfie .selfie-grid .it .ov:after{content:'';position:absolute;width:24px;height:1px;background:#fff;box-shadow:0 0 0 0 #fff}
.mod-selfie .selfie-grid .it:hover img{transform:scale(1.1)}
.mod-selfie .selfie-grid .it:hover .ov{opacity:1}
.mod-selfie .selfie-grid .it:hover .ov:before{transform:scale(1)}
@media (max-width:1200px){.mod-selfie .selfie-grid{column-count:4}}
@media (max-width:900px){.mod-selfie .selfie-grid{column-count:3}.mod-selfie .selfie-head .wrap>p{font-size:32px}.mod-selfie .selfie-head .more-round{width:48px;height:48px;border-radius:24px;bottom:56px}}
@media (max-width:560px){.mod-selfie .selfie-grid{column-count:2}.mod-selfie{padding-top:70px}}

/* ── 내시경 조각(260829myv1g) 제목: 우리 글꼴이 기준 이미지보다 커서 세 줄이 붙어 보였다.
      기준 이미지(add_01.jpg, 1920) 실측 — 잉크 높이 44/51/50px, 줄 빈틈 11/8px.
      우리 렌더 48/52/53px, 빈틈 9/7px → 줄마다 실측 비율로 줄인다. 폰 화면은 따로 규칙이 있어 제외. ── */
@media (min-width:1025px){
  .fr03[data-tc="260829myv1g"] .s00 .r02{--fs:calc(var(--fs-display-thin) * 0.92)!important}
  .fr03[data-tc="260829myv1g"] .s00 .r03{--fs:calc(var(--fs-display) * 0.98)!important}
  .fr03[data-tc="260829myv1g"] .s00 .r04{--fs:calc(var(--fs-display) * 0.94)!important}
}

/* ── OH! TANG:GLE TV — 원본(#mc_youtube) 과 같은 구성: 가운데 제목 + 큰 플레이어 + 오른쪽 세로 재생목록 ── */
.mod-tv{padding:110px 0 0}
.mod-tv .tv-head{padding:0 0 48px;text-align:center}
.mod-tv .tv-head .wrap{position:relative;padding-bottom:25px;display:flex;justify-content:center;gap:15px}
.mod-tv .tv-head .wrap:before{content:'';bottom:0;left:50%;margin-left:-30px;position:absolute;width:60px;height:1px;background:#aaa}
.mod-tv .tv-head p{font-family:'GloberThinFree','Oswald',sans-serif;font-size:44px;line-height:1;letter-spacing:0;color:#666;text-transform:uppercase;margin:0}
.mod-tv .tv-head p.tangle{color:#f60}
.mod-tv .tv-wrap{display:grid;grid-template-columns:minmax(0,1.78fr) minmax(0,1fr);gap:24px;align-items:start}
.mod-tv .tv-player{position:relative;width:100%;aspect-ratio:16/9;background:#000;overflow:hidden}
.mod-tv .tv-player iframe{position:absolute;inset:0;width:100%;height:100%;border:0}
.mod-tv .tv-list{list-style:none;margin:0;padding:0;overflow-y:auto;overscroll-behavior:contain;max-height:calc((min(1500px,100vw) - 84px) * 0.36)}
.mod-tv .tv-list::-webkit-scrollbar{width:6px}
.mod-tv .tv-list::-webkit-scrollbar-thumb{background:#ddd;border-radius:3px}
.mod-tv .tv-item{border-bottom:1px solid #e6e6e6}
.mod-tv .tv-item>a{display:grid;grid-template-columns:160px minmax(0,1fr);gap:14px;align-items:start;padding:14px 4px;color:inherit}
.mod-tv .tv-item .tv-thumb{display:block;width:160px;aspect-ratio:16/9;overflow:hidden;background:#eee;position:relative}
.mod-tv .tv-item .tv-thumb img{width:100%;height:100%;object-fit:cover;display:block}
.mod-tv .tv-item .tv-t{margin:0;display:block;font-size:15px;font-weight:600;line-height:1.35;color:#222;
  overflow:hidden;display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical}
.mod-tv .tv-item .tv-d{display:block;margin:6px 0 0;font-size:13px;line-height:1.4;color:#888;
  overflow:hidden;display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical}
.mod-tv .tv-item.on .tv-t,.mod-tv .tv-item>a:hover .tv-t{color:#f60}
.mod-tv .tv-item.on .tv-thumb{outline:2px solid #f60;outline-offset:-2px}
.mod-tv .tv-note{margin-top:20px;text-align:center;font-size:15px;line-height:1.2;letter-spacing:-.5px;color:#444}
@media (max-width:900px){
  .mod-tv{padding-top:70px}
  .mod-tv .tv-head p{font-size:32px}
  .mod-tv .tv-wrap{grid-template-columns:minmax(0,1fr);gap:16px}
  .mod-tv .tv-list{max-height:none}
  .mod-tv .tv-item>a{grid-template-columns:132px minmax(0,1fr);gap:12px}
  .mod-tv .tv-item .tv-thumb{width:132px}
}

/* ── BEFORE & AFTER — 원본(#bna) 과 같은 구성: 2열, 왼쪽 절반(Before)만 로그인으로 가린다 ── */
.mod-bna .bna-grid{grid-template-columns:repeat(2,1fr);gap:22px 20px;margin-top:34px}
.mod-bna .bna .ph{border-radius:0;background:#000}
.mod-bna .bna .ph>img{width:100%;height:100%;object-fit:cover;display:block}
.mod-bna .bna .ph .tag{display:none}
.mod-bna .bna .ph::after{content:'';position:absolute;left:0;top:0;bottom:0;width:50%;background:rgba(0,0,0,.86);pointer-events:none}
.mod-bna .bna .lock{position:absolute;left:0;top:0;bottom:0;width:50%;display:flex;flex-direction:column;
  align-items:center;justify-content:center;z-index:2;color:#fff;background:none;text-align:center;padding:0 12px}
.mod-bna .bna .lock svg{display:none}
.mod-bna .bna .lock .lk1{margin:0;display:block;font-size:15px;font-weight:400;line-height:1.7;color:#fff}
.mod-bna .bna .lock .lk2{margin:0;display:block;font-size:15px;font-weight:700;line-height:1.7;color:#ff6a00}
.mod-bna .bna .lock .lk3{margin:14px 0 0;display:inline-block;background:#ff6a00;color:#fff;
  font-size:13px;font-weight:700;letter-spacing:.08em;line-height:1;padding:11px 22px;border-radius:3px}
.mod-bna .bna .cap{margin-top:10px;text-align:center;font-size:14px;font-weight:400;color:#555}
.mod-bna .bna .info{display:none}
@media (max-width:640px){.mod-bna .bna-grid{grid-template-columns:1fr}}
/* 잠금 칸의 여분 문구 숨기고, 제목을 원본처럼 가운데 큰 글씨로 */
.mod-bna .bna .lock{font-size:0;line-height:0}
.mod-bna .bna .lock b::before,.mod-bna .bna .lock b::after,.mod-bna .bna .lock::after{font-size:15px;line-height:1.7}
.mod-bna .bna .lock::after{font-size:13px;line-height:1}
.mod-bna .mod-head{display:block;text-align:center;position:relative}
.mod-bna .mod-head .eyebrow{display:none}
.mod-bna .mod-head h3{font-family:'GloberThinFree','Oswald',sans-serif;font-size:44px;line-height:1;
  color:#e8d9cf;letter-spacing:.02em;text-transform:uppercase;margin:0;font-weight:700}
.mod-bna .mod-head h3::after{content:'BEFORE & AFTER'}
.mod-bna .mod-head h3{font-size:0}
.mod-bna .mod-head h3::after{font-size:44px}
.mod-bna .mod-head>div>p{margin-top:12px;font-size:14px;color:#c9b6a8}
.mod-bna .mod-head .more{position:absolute;right:0;top:50%;transform:translateY(-50%);margin:0}
@media (max-width:900px){.mod-bna .mod-head h3::after{font-size:30px}.mod-bna .mod-head .more{position:static;transform:none;display:inline-block;margin-top:14px}}
.mod-bna .bna-note{margin-top:30px;text-align:center;font-size:13px;color:#999;line-height:1.7}
.mod-bna .bna-more{margin-top:22px;text-align:center}
.mod-bna .bna-more-btn{display:inline-block;background:#9a9a9a;color:#fff;font-size:15px;font-weight:500;
  letter-spacing:-.02em;line-height:1;padding:19px 34px;border-radius:2px;transition:background .2s}
.mod-bna .bna-more-btn:hover{background:#7d7d7d}

/* ══ 원본 HTML 구역 글꼴·꾸밈 1:1 (2026-09-17, i18n_check/htmlcmp.py 로 원본 계산값 실측)
      원본 body = 'NanumBG'(나눔바른고딕) 13px #696969 · 구역 제목 = GloberThinFree 44px 검정/주황
      TV 목록 제목 .txt1 = NanumBG 16px 자간 -1 #444, 설명 .txt2 = 14px 자간 -1 #888, 안내 .surgerytxt = NanumBG 16px 자간 -1 #444
      B&A: 제목 = 그림 skin/bna_title.jpg(500×112) · 잠금 = 그림 skin/album/login/p_login_H.png(50%) 위 rgba(0,0,0,.9) · 사진 설명 = NanumBG 15px #333 자간 -.5
           안내 = NanumBG 15px #333 자간 -.5 위 80px · 더보기 = 그림 skin/btn_bnamore.jpg(261×69) 위 60px ══ */
main#content .tg-ins,main#content .mod{font-family:'NanumBG','NanumBarunGothic',sans-serif}
.mod-tv .tv-head p{color:#000}
.mod-tv .tv-item .tv-t{font-family:'NanumBG','NanumBarunGothic',sans-serif;font-size:16px;font-weight:400;line-height:1.2;letter-spacing:-1px;color:#444}
.mod-tv .tv-item .tv-d{font-family:'NanumBG','NanumBarunGothic',sans-serif;font-size:14px;font-weight:400;line-height:1.5;letter-spacing:-1px;color:#888}
.mod-tv .tv-note{font-family:'NanumBG','NanumBarunGothic',sans-serif;font-size:16px;line-height:1.2;letter-spacing:-1px;color:#444}
.mod-bna .mod-head{margin:0 auto;text-align:center}
.mod-bna .mod-head h3,.mod-bna .mod-head h3::after{content:none;font-size:0}
.mod-bna .mod-head h3{display:block;width:500px;height:112px;margin:0 auto;background:url(https://channel-static.rebeauty.co.kr/tanggleps/ko/skin/bna_title.jpg) no-repeat center/500px 112px}
.mod-bna .mod-head>div>p,.mod-bna .mod-head .more{display:none}
.mod-bna .bna .ph::after{background:rgba(0,0,0,.9) url(https://channel-static.rebeauty.co.kr/tanggleps/ko/skin/album/login/p_login_H.png) no-repeat center/50%}
html:not([data-tgi-lang]) .mod-bna .bna .lock{display:none}   /* 한국어: 원본처럼 잠금 안내는 그림 / 번역 페이지: 글로 */
.mod-bna .bna .cap{font-family:'NanumBG','NanumBarunGothic',sans-serif;margin-top:15px;font-size:15px;line-height:1;letter-spacing:-.5px;color:#333}
.mod-bna .bna-note{font-family:'NanumBG','NanumBarunGothic',sans-serif;margin-top:80px;font-size:15px;line-height:1;letter-spacing:-.5px;color:#333}
.mod-bna .bna-more{margin-top:60px}
.mod-bna .bna-more-btn,.mod-bna .bna-more-btn:hover{display:inline-block;width:261px;height:69px;padding:0;border-radius:0;font-size:0;background:url(https://channel-static.rebeauty.co.kr/tanggleps/ko/skin/btn_bnamore.jpg) no-repeat center/261px 69px}
/* B&A 폭·간격을 원본과 같게: #bna 1288px, 카드 600px 2열(사이 88px), 제목 위 50px·아래 40px, 사진 아래 설명 15px */
.mod-bna .container{max-width:1288px;padding:0}
.mod-bna .mod-head{padding:0;margin:0 auto 40px}
.mod-bna .bna-grid{grid-template-columns:repeat(2,600px);justify-content:center;gap:20px 80px;margin-top:0}   /* 원본 실측 카드 x 320~919 / 1000~1599 → 1280 가운데, 사이 80 (2026-09-18 검수) */
.mod-bna .bna .ph{aspect-ratio:1042/620;height:auto}
/* 원본 실측(2026-09-17): #bna 위 100px, 제목 112px+40, 카드 600×300(사진 2장 나란히 = 1042×521 합성본 그대로) 세로 간격 70, 설명 위 15, 안내 위 50, 더보기 위 60 */
.mod-bna{padding:100px 0 0}
.mod-bna .bna .ph{aspect-ratio:2/1}
.mod-bna .bna-grid{gap:70px 80px}
.mod-bna .bna .cap{margin-top:15px}
.mod-bna .bna-note{margin-top:50px}
.mod-bna .bna-more{margin-top:60px;line-height:0}
.mod-bna .bna-more-btn{vertical-align:top}   /* inline-block 기준선 때문에 단추가 4px 내려가던 것 (2026-09-18 검수) */
/* REAL Selfie 격자를 원본(Masonry: 1490px 안에 290px 5열, 틈 10px, 짧은 열부터 채움)과 같게 — 배치는 js/site.js 의 tgMasonry 가 한다. 원본 실측: 제목 구역 269px, 격자 870px, 아래 여백 80px */
@media (min-width:1025px){
  .mod-selfie .selfie-grid,.mod-selfie-bot .selfie-grid{column-count:auto;column-gap:0;position:relative;width:1490px;margin:0 auto}
  .mod-selfie .selfie-grid .it,.mod-selfie-bot .selfie-grid .it{position:absolute;width:290px;margin:0}
  .mod-selfie{padding-top:0}
  .mod-selfie .selfie-head{padding:140px 0 60px}
  .mod-selfie .container{padding-bottom:80px}
}
@media (min-width:1025px){ .mod-selfie .container,.mod-selfie-bot .container{max-width:1490px;padding-left:0;padding-right:0} }

/* ══ BEFORE & AFTER 앨범 (원본 .box_album + #albumtitle + #s_notice 를 1:1 로 — 2026-09-17, 원본 계산값 실측)
      상자 1280px 가운데, 제목 그림 172px, 슬라이더 920×460(왼쪽 반 잠금 그림), 앞/뒤 버튼 106×102 #333, 제목 nsk Medium 22 · 날짜 nsk 16,
      각도 버튼 60×30, 썸네일 305×153(+제목 40) 4열 간격 20 · 2행 간격 30, 페이지네이션, 안내문 nanum 15 ══ */
.mod-album{width:1288px;margin:0 auto;font-family:'NanumBG','NanumBarunGothic',sans-serif;font-size:13px;color:#696969;line-height:20px}
.mod-album .albumtitle{width:100%;height:172px;text-align:center}
.mod-album .albumtitle img{vertical-align:middle}
.mod-album .box_album{position:relative}
.mod-album .bna_container{margin:160px auto 40px;width:920px;position:relative;text-align:center;font-size:0;line-height:0}
.mod-album .bna_wrap{position:relative}
.mod-album .wrap__top{position:relative;background:#fff}
.mod-album .photo_container{position:relative;width:920px;height:460px;overflow:hidden;background:#fff;margin:0 auto}
.mod-album .photo_container .photo_wrap{position:absolute;top:0;left:0;width:100%;height:100%}
.mod-album .photo_container .photo{position:absolute;top:0;left:0;width:100%;height:100%;overflow:hidden}
.mod-album .photo_container .photo>img{position:absolute;top:0;left:0;width:920px;height:460px}
.mod-album .lock_wrap{position:absolute;top:0;left:0;background:rgba(25,25,25,.95);cursor:pointer;z-index:10}
.mod-album .photo_container .lock_wrap{width:460px;height:460px}
.mod-album .photo_container .lock_wrap .gp{width:100%;height:100%;background:url(https://channel-static.rebeauty.co.kr/tanggleps/ko/skin/album/login/p_login_H.png) center center no-repeat;image-rendering:pixelated}
.mod-album .btn_pn_wrap{position:absolute;top:0;width:120px;height:100%;cursor:pointer}
.mod-album .btn_pn_prev{left:0;margin-left:-120px}
.mod-album .btn_pn_next{right:0;margin-right:-120px}
.mod-album .btn_pn{position:absolute;top:50%;left:50%;margin:-51px 0 0 -53px;padding:30px 25px 30px 26px;background:#333;overflow:hidden;border-radius:10px}
.mod-album .btn_pn .gp{width:55px;height:42px;opacity:.5}
.mod-album .btn_prev .gp{background:url(https://channel-static.rebeauty.co.kr/tanggleps/ko/skin/album/bna/previous.png) no-repeat}
.mod-album .btn_next .gp{background:url(https://channel-static.rebeauty.co.kr/tanggleps/ko/skin/album/bna/next.png) no-repeat}
.mod-album .wrap__bottom{width:100%;position:relative;background:#fff;z-index:1}
.mod-album .subject_wrap{overflow:hidden;position:relative;padding-top:50px}
.mod-album .subject_wrap .t1{font-family:'nsk','Noto Sans KR',sans-serif;font-weight:500;font-size:22px;line-height:1;letter-spacing:-.5px;text-align:center;color:#333;margin:0}
.mod-album .subject_wrap .t2{font-family:'nsk','Noto Sans KR',sans-serif;font-weight:400;font-size:16px;line-height:1.4;letter-spacing:-.5px;text-align:center;color:#666;position:relative;margin:10px 0 0;padding-top:10px}
.mod-album .subject_wrap .t2:before{content:'';top:0;left:8%;position:absolute;width:84%;height:1px;border-top:1px dashed #999}
.mod-album .btn_wrap{position:relative;width:100%;height:30px;text-align:center;margin-top:10px}
.mod-album .btn_wrap .btn{cursor:pointer;display:inline-block;margin:10px 10px 0;width:60px;height:30px;border:1px solid #ccc;box-sizing:border-box;overflow:hidden;border-radius:5px;position:relative;vertical-align:top;padding:0;font-size:0;line-height:0;color:inherit;background:#fff;transition:none}   /* 공통 .btn 의 padding 0 26px·글꼴·전환이 끼어 "45도" 가 잘렸다 */
.mod-album .btn_wrap .btn>p{font-family:'nsk','Noto Sans KR',sans-serif;font-weight:400;font-size:18px;line-height:1;letter-spacing:-.5px;color:#aaa;padding:5px 0;margin:0;text-align:center;position:relative}
.mod-album .btn_wrap .btn.on{border-color:#333;cursor:default}
.mod-album .btn_wrap .btn.on>p{color:#333}
.mod-album .listArea{width:1280px;padding:40px 0 10px;font-size:0;line-height:0}
.mod-album .module_contents2{margin-bottom:70px;text-align:left}   /* 원본: 썸네일 끝 → 페이지네이션 사이 70 (50+테이블 여백) */
.mod-album .thumb{display:inline-block;width:305px;vertical-align:top;background:#fff;cursor:pointer;margin-right:20px;font-size:0;line-height:0}
.mod-album .thumb:nth-child(n+5){margin-top:30px}
.mod-album .thumb .photo_wrap{position:relative;width:305px;height:153px;overflow:hidden;background:#fff}
.mod-album .thumb .photo img{display:block;width:305px;height:152.5px}
.mod-album .thumb .lock_wrap{width:152.5px;height:153px}
.mod-album .thumb .lock_wrap .gp{width:100%;height:100%;background:url(https://channel-static.rebeauty.co.kr/tanggleps/ko/skin/album/login/thumb_login_H.png) center center no-repeat}
.mod-album .thumb .subject{font-family:'nanum';font-size:14px;line-height:20px;height:40px;margin:12px 0 0;color:#333;text-align:center;font-weight:normal;overflow:hidden}   /* 원본 실측(2026-09-19): 보고 있는 사례만 주황+굵게, 나머지는 #333 보통 */   /* 원본 list_ajax.php: 'nanum'(웹폰트 404 → 방문자 PC 기본 글꼴) 14px #ff6600, 현재 사례만 bold */
.mod-album .thumb.on .subject{font-weight:bold;color:#ff6600}
.mod-album .pagenavi{position:relative;text-align:center;margin-top:10px;font-size:0;line-height:0}
.mod-album .pagenavi span{display:inline-block;min-width:18px;max-width:45px;margin:0 6px;line-height:20px;padding:6px 12px;border:1px solid #ddd;background:#fff;font-weight:bold;letter-spacing:-1px;font-size:14px;box-sizing:border-box;height:34px;vertical-align:top}
.mod-album .pagenavi a{display:inline-block;color:#737373;font-size:14px;letter-spacing:-1px;cursor:pointer;text-decoration:none}
.mod-album .pagenavi a span{width:29px;padding:6px 0}
.mod-album .pagenavi strong span{background:#fff;color:#6d4099;border:1px solid #6d4099;font-size:14px;width:33px;padding:6px 0;text-align:center}
.mod-album .pagenavi .frst span{background:url(https://channel-static.rebeauty.co.kr/tanggleps/ko/skin/page/first.gif) no-repeat center center}
.mod-album .pagenavi .prev span{background:url(https://channel-static.rebeauty.co.kr/tanggleps/ko/skin/page/prev.gif) no-repeat center center}
.mod-album .pagenavi .next span{background:url(https://channel-static.rebeauty.co.kr/tanggleps/ko/skin/page/next.gif) no-repeat center center}
.mod-album .pagenavi .last span{background:url(https://channel-static.rebeauty.co.kr/tanggleps/ko/skin/page/end.gif) no-repeat center center}
.mod-album .s_notice{padding:50px 0;position:relative}
.mod-album .s_notice p{text-align:center;font-family:'nanum';font-size:15px;line-height:1;letter-spacing:-.5px;color:#333;margin:0}
@media (max-width:1300px){.mod-album{width:100%;max-width:1280px}.mod-album .listArea{width:100%}.mod-album .module_contents2{text-align:center}}
/* 앨범 썸네일: 4열 flex (inline-block 은 1280 폭에서 4번째가 밀려 내려감) — 원본 실측 열 간격 20, 행 간격 40(=205→245 피치), 목록 위 50 */
.mod-album .listArea{padding-top:50px}
.mod-album .module_contents2{display:flex;flex-wrap:wrap;gap:40px 20px;align-items:flex-start}
.mod-album .thumb{display:block;margin:0!important;height:205px}
.mod-album .thumb:nth-child(n+5){margin-top:0!important}
/* 변환 조각의 전체 덮는 절대배치 목록(ul.ab{left:0;top:0;width:100%;height:100%})이 아래 글의 드래그 선택을 막는다 → 목록 상자는 마우스를 통과시키고 항목만 받는다 (2026-09-17) */
.tg-fr ul.ab,.tg-fr ol.ab{pointer-events:none}
.tg-fr ul.ab>li,.tg-fr ol.ab>li{pointer-events:auto}
.mod-album .albumtitle img{display:inline-block;margin:0 auto}   /* 전역 img{display:block} 때문에 제목 그림이 왼쪽으로 붙던 것 → 가운데 */
.mod-album{display:block;margin-left:auto;margin-right:auto}
/* 원본 구역 세로 위치 맞춤(2026-09-17): TV 구역 764px(우리 776), 본문 이미지 끝 → 앨범 제목 사이 100px */
.mod-tv{padding-top:98px}
.mod-album{margin-top:0}   /* 원본 대부분은 after_care 그림 바로 아래 앨범 제목(0px); breast_01_01 만 100px(fontfix) */
.mod-album .pagenavi{position:relative;padding-top:20px}
.mod-album .pagenavi::before{content:'';position:absolute;top:0;left:0;right:0;height:1px;background:#e5e5e5}   /* 원본 목록 아래 가는 줄 */
.mod-album .module_contents2{margin-bottom:50px}

/* ══ 원본은 1920px 고정 배치를 가운데 두고 양옆을 자른다(.box_100{left:50%;margin-left:-960px;width:1920px}) — 창이 1920 보다 좁아도 글자·사진이 줄지 않는다.
      우리 조각도 데스크톱(1025px↑)에서는 같은 방식: 조각을 1920 고정으로 가운데 두고 배율 변수(--k, --u)를 1px 로 고정 (2026-09-17) ══ */
@media (min-width:1025px){
  .tg-fr{position:relative!important;left:50%!important;margin-left:-960px!important;margin-right:0!important;width:1920px!important;max-width:none!important}
  /* 배율 변수: 조각이 스스로 정의하지 않은 경우의 기본값 1px(= 1920 기준). 조각 자체 정의(.fr00{--k:…})가 더 뒤에 오므로 그쪽이 이긴다.
     vw 로 정의된 값은 js/site.js 가 1920 기준 px 로 바꿔 준다. 페이지별 fontfix 는 calc(N*var(--k)) 를 쓴다. */
  .tg-fr>*{--k:1px;--u:1px}
  /* 예외(2026-09-24): intro_doctor 두 번째 조각(양병이 원장)은 --u 를 '배율'이 아니라 '캔버스 폭'(min(100vw,1920px))으로 쓰고
     그 정의가 .tg-fr 자신에 붙어 있어 위 규칙에 덮였다 → 무대 폭 1px, 글이 오른쪽으로 960px 밀리고 사진이 화면 밖(x1986)으로 나갔다(ko·en 모두).
     다른 조각과 같은 1920 고정 배치로: 폭 = 캔버스, 배율 = 1px. */
  .tg-fr.tcf_intro_doctor_2>*{--u:var(--canvas,1920px);--px:1px}
}

/* ══ 이벤트 구역(section.mod-event) — 원본 #mc_event 1:1 (2026-09-17 실측): 높이 734 = 제목 269(위 140·아래 60) + 슬라이드 345 + 50 + 버튼 70
      제목 GloberThinFree 44 'TANG:GLE'(주황)+'EVENT'(검정) 가운데·60px 밑줄, 둥근 + 더보기(62×62 #f90 테두리) 오른쪽 위,
      슬라이드 345×345 가운데 간격 40, 캡션 없음, '더 많은 이벤트 보기' 260×70 #595959 gmsl bold 16 흰색 ══ */
.mod-event{padding:0}
.mod-event .container{max-width:1500px;padding:0}
.mod-event .evt-head{padding:140px 0 60px;text-align:center;position:relative}
.mod-event .evt-head .wrap{position:relative;padding-bottom:25px;display:flex;justify-content:center;gap:15px}
.mod-event .evt-head .wrap:before{content:'';bottom:0;left:50%;margin-left:-30px;position:absolute;width:60px;height:1px;background:#aaa}
.mod-event .evt-head .wrap>p{margin:0;font-family:'GloberThinFree','Oswald',sans-serif;font-size:44px;line-height:1;letter-spacing:0;text-transform:uppercase;color:#000}
.mod-event .evt-head .wrap>p.tangle{color:#f60}
.mod-event .evt-head .more-round{position:absolute;right:0;top:137px;width:62px;height:62px;border:1px solid #f90;border-radius:31px;display:block}
.mod-event .evt-head .more-round::before,.mod-event .evt-head .more-round::after{content:'';position:absolute;background:#f60;top:50%;left:50%}
.mod-event .evt-head .more-round::before{width:21px;height:1px;margin:-1px 0 0 -10px}
.mod-event .evt-head .more-round::after{width:1px;height:21px;margin:-10px 0 0 -1px}
.mod-event .evt-grid{display:flex;justify-content:center;gap:40px;margin:0}
.mod-event .evt{width:345px;flex:0 0 345px}
.mod-event .evt .ph{border-radius:0;aspect-ratio:1/1;background:#fff}
.mod-event .evt .ph img{object-position:50% 50%;transition:none}
.mod-event .evt:hover .ph img{transform:none}
.mod-event .evt h4,.mod-event .evt .meta{display:none}
.mod-event .evt-more{margin:50px auto 0;width:260px}
.mod-event .evt-more-btn{display:flex;justify-content:center;align-items:center;width:260px;height:70px;background:#595959;font-family:'gmsl','Gmarket Sans',sans-serif;font-weight:700;font-size:16px;line-height:1;color:#fff;padding-top:4px}

/* ══ TV 구역 — 원본 #mc_youtube 1:1 (2026-09-17 실측): 높이 796 = 제목 269(위 160·아래 40) + 488 + 안내 39
      본체 1288px 가운데: 플레이어 812×440(위 16), 목록 456(왼쪽 20 여백) 122px 항목 4개 보임(488), 사진 160×90, 글 180 왼쪽부터, 안내문은 플레이어 아래 가운데 ══ */
.mod-tv{padding:0}
.mod-tv .container{max-width:1288px;padding:0}
.mod-tv .tv-head{padding:160px 0 40px}
.mod-tv .tv-wrap{display:grid;grid-template-columns:812px 456px;gap:0 20px;align-items:start}
.mod-tv .tv-player{margin-top:16px;aspect-ratio:auto;height:440px}
.mod-tv .tv-list{max-height:488px;overflow-y:auto;scrollbar-width:none}
.mod-tv .tv-list::-webkit-scrollbar{display:none}
.mod-tv .tv-item{border-bottom:1px solid rgba(0,0,0,.1)}
.mod-tv .tv-item>a{grid-template-columns:160px 276px;gap:0 20px;padding:16px 0 15px;align-items:start}   /* 항목 피치 원본 122(테두리 포함) */
.mod-tv .tv-item .tv-thumb{width:160px;height:90px;aspect-ratio:auto}
.mod-tv .tv-item .tv-t{margin-top:4px;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.mod-tv .tv-item .tv-d{margin-top:15px;height:40px;overflow:hidden;word-break:keep-all;display:block;-webkit-line-clamp:none}   /* 원본 .txt2: 40px 상자에 그냥 잘림(말줄임 없음), <br> 줄바꿈 유지 */
.mod-tv .tv-note{width:812px;margin:20px 0 0;text-align:center}

/* ══ 공통 보정 2026-09-18 (에이전트 보고 종합) ══ */
/* TV: 원본 목록 상자는 항목 수와 무관하게 488 고정 → 구역 796 */
.mod-tv .tv-list{min-height:488px}
/* B&A 카드 사진: 합성본 비율 그대로(가슴 1042×521 → 600×300, 바디 1042×620 → 600×357) */
.mod-bna .bna .ph{aspect-ratio:auto;height:auto}
.mod-bna .bna .ph>img{height:auto}
.mod-bna .bna .ph::after,.mod-bna .bna .lock{height:100%}
/* 하단 REAL Selfie: 원본 #contents_wrap{margin-bottom:120px} + #mc_selfie:before 1920×1px #ddd 가로줄 (전 쪽 공통) */
.mod-album{margin-bottom:0}
main#content>section.mod-selfie-bot,.tg-page+section.mod-selfie-bot,section.mod-selfie-bot{margin-top:120px;position:relative}
section.mod-selfie-bot::before{content:'';position:absolute;top:0;left:50%;margin-left:-960px;width:1920px;height:1px;background:#ddd}
/* 앨범 사진 크기는 합성본 비율에 따라 js(site.js tgAlbum)가 정한다 — 큰 사진 920×(비율), 썸네일 305×(비율) */
.mod-album .photo_container{height:auto}
.mod-album .photo_container .lock_wrap{width:50%;height:100%}
.mod-album .thumb{height:auto}
.mod-album .thumb .photo_wrap{height:auto}
.mod-album .thumb .photo img{height:auto}
.mod-album .thumb .lock_wrap{width:50%;height:100%}

/* ══ 하위 탭(.tabs3) — 원본 #subMenu_d3 1:1 (2026-09-18): 히어로 그림 위 top:80px 에 겹쳐 가운데, 단추 260×70 #888(현재 #f60), 글 gmsl bold 18 #ddd(현재 #fff), 단추 사이 1px 흰 선(20%) ══ */
@media (min-width:1025px){
  .tabs3{position:absolute;top:calc(175px + 80px);left:0;width:100%;z-index:5;background:none;border:0;text-align:center;font-size:0}
  .tabs3 .container{max-width:none;padding:0;display:inline-block;width:auto}
  .tabs3 ul{display:inline-flex;gap:0;padding:0;overflow:visible}
  .tabs3 li{position:relative}
  .tabs3 li a{display:block;width:260px;height:70px;padding:0;margin:0;border:0;border-radius:0;background:#888;color:#ddd;font-family:'gmsl','Gmarket Sans',sans-serif;font-weight:700;font-size:18px;line-height:70px;letter-spacing:0;transition:none;box-sizing:border-box}
  .tabs3 li+li a::before{content:'';position:absolute;top:0;left:0;width:1px;height:100%;background:rgba(255,255,255,.2)}
  .tabs3 li a:hover,.tabs3 li a.on{background:#f60;color:#fff;border:0}
  .tabs3 li a.on::after{content:'';position:absolute;left:50%;bottom:20px;transform:translateX(-50%);width:calc(100% - 100px);height:1px;background:rgba(255,255,255,.2)}
}
/* 앨범 쪽번호: 숫자 칸 원본과 같게(33×34, 활성 보라 테두리), 여러 쪽 */
.mod-album .pagenavi a[data-page]:not(.frst):not(.prev):not(.next):not(.last) span{width:33px;padding:6px 0;text-align:center;color:#737373;cursor:pointer}
.mod-album .pagenavi a[data-page]:not(.frst):not(.prev):not(.next):not(.last):hover span{background:#f9f9f9;color:#6d4099;border:1px solid #6d4099}
.mod-album .thumb[hidden],.mod-album .photo_wrap[hidden],.mod-album .photo[hidden],.mod-album .case_info[hidden]{display:none!important}   /* display:block/flex 규칙이 hidden 속성을 이기지 않게 */
/* 조각 CSS 의 vw 를 cqw 로 바꿨으므로(2026-09-18) 조각 상자를 컨테이너로 — 1cqw = 19.2px(1920 고정), 창 폭·확대율과 무관 */
@media (min-width:1025px){ .tg-fr{container-type:inline-size} }

/* ─────────────────────────────────────────────────────────────
   검수(body_01_01)에서 나온 공통 차이 (2026-09-18)
   · 앨범 썸네일: 공통 main.css 의 .thumb{border-radius:10px} .thumb img{filter:…} 가 끼어들어 모서리가 둥글고 채도가 낮았다 → 원본은 각진 모서리·원색
   · TV 선택 영상: 원본 제목색 #ff7800, 선택 테두리 4px #ff7800(안쪽)
   · 구역 제목 'TANG:GLE': 원본 마크업은 TANG<span>:</span> GLE — 콜론은 30px 로 따로 absolute(top:2px,left:109px). 글꼴 목록도 원본처럼
     'GloberThinFree' 하나만(콜론 글리프가 없어 방문자 PC 대체 글꼴로 찍히는 것까지 원본과 같게)
   ───────────────────────────────────────────────────────────── */
.mod-album .thumb{border-radius:0;aspect-ratio:auto;overflow:visible}   /* main.css .thumb{aspect-ratio:16/9;overflow:hidden} 도 해제 — height:auto 로 바꾼 뒤 썸네일이 172px 로 잘려 제목이 안 보였다 */
.mod-album .thumb img{filter:none}
.mod-tv .tv-item.on .tv-t{color:#ff7800}
.mod-tv .tv-item>a:hover .tv-t{color:#444}.mod-tv .tv-item.on>a:hover .tv-t{color:#ff7800}   /* 원본은 제목 hover 색 변화 없음 */
.mod-tv .tv-item.on .tv-thumb{outline:4px solid #ff7800;outline-offset:-4px}
.mod-tv .tv-item .tv-thumb img{filter:grayscale(100%);transition:all .5s ease}   /* 원본: 재생 중이 아닌 썸네일은 회색조 */
.mod-tv .tv-item.on .tv-thumb img{filter:grayscale(0%)}
.mod-selfie .selfie-head .wrap>p,.mod-tv .tv-head p,.mod-event .evt-head .wrap>p{font-family:'GloberThinFree'}
.mod-selfie .selfie-head .wrap>p.tangle,.mod-tv .tv-head p.tangle,.mod-event .evt-head .wrap>p.tangle{position:relative}
.mod-selfie .selfie-head .wrap>p.tangle span,.mod-tv .tv-head p.tangle span,.mod-event .evt-head .wrap>p.tangle span{position:absolute;top:2px;left:109px;font-size:30px;line-height:1}

/* ── 폰 서랍 메뉴 좌우 여백 정리 (2026-09-22) ──────────────────────────
   위쪽 두 규칙은 «좁은 데스크톱» 용인데 분기점이 max-width 뿐이라 폰까지 내려왔다:
     @media (max-width:1560px) body.sub .hd-nav > .container{padding:0 30px}
     @media (max-width:1360px) body.sub .hd-nav > .container > ul{gap:28px;padding:0 20px}
   서랍(.hd-nav.open)에서는 이 둘이 겹쳐 글자가 왼쪽에서 30+20+4=54px 나 들어가고
   줄 사이가 28px 씩 벌어져 어색했다. 폰에서는 ul 쪽 값만 되돌린다
   (컨테이너 30px 는 위 로고 줄과 같은 여백이라 그대로 둔다 → 글자 시작 34px). */
@media (max-width:820px){
  body.sub .hd-nav > .container > ul{gap:0;padding:0}
  /* 긴 이름이 «+» 를 넘어가 잘리던 것(영 «Anti-Aging Surgery / Stem Cell», 330px 화면) —
     기본 규칙이 white-space:nowrap 이라 줄바꿈을 못 했다. 폰에서는 접히게 하고 줄 높이는 여백으로 잡는다. */
  body.sub .hd-nav.open li.d1 > a{white-space:normal;line-height:1.35;padding:15px 4px;min-height:54px;gap:10px}
}

/* ── 좁은 폰(≤379px) 머리띠 (2026-09-22) ──────────────────────────────
   30px 여백 + 동그라미 42px 두 개 + 가운데 절대배치 로고(136px)는 320px 화면에서 서로 겹친다
   (실측: 왼쪽 칸이 100px 까지, 로고는 92px 에서 시작). 여백·동그라미·로고를 한 단계씩 줄인다.
   랜딩(css/landing-mobile.css)에도 같은 규칙이 있다 — 두 머리띠는 같은 모양이어야 한다. */
@media (max-width:379px){
  body.sub .hd-top{padding:0 16px}
  body.sub .hd-util{gap:8px}
  body.sub .icon-btn,body.sub .hamburger{width:38px;height:38px}
  body.sub .hd-logo img{height:26px;width:auto}
}

/* 목록 페이지 나눔(자필후기·탱글TV): .gcard{display:block} 이 hidden 속성을 이겨 한 쪽에 다 보였다 — 2026-09-23 */
.gal-grid .gcard[hidden],.bna-grid [hidden]{display:none!important}