@import url("https://cdn.jsdelivr.net/gh/orioncactus/pretendard@v1.3.9/dist/web/variable/pretendardvariable-dynamic-subset.min.css");

/* 포르테클리닉 시안B / 공통 스타일 */

/* ---------- reset ---------- */
*, *::before, *::after { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; }
body, h1, h2, h3, h4, h5, p, ul, ol, li, dl, dt, dd, figure, form, fieldset, table, th, td { margin: 0; padding: 0; }
ul, ol { list-style: none; }
img { display: block; max-width: 100%; border: 0; }
a { color: inherit; text-decoration: none; }
button { font: inherit; color: inherit; background: none; border: 0; cursor: pointer; }
table { border-collapse: collapse; width: 100%; }
fieldset { border: 0; }
legend { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); }
address { font-style: normal; }

:root {
  --pt: #a73439;          /* 버건디 */
  --pt-dk: #84050b;
  --pt-lt: #fbf4f4;
  --gold: #c08f3e;
  --txt: #221e1f;
  --txt2: #666666;
  --txt3: #999999;
  --line: #dddddd;
  --line2: #eeeeee;
  --bg2: #f9f9f9;
  --bg3: #f4f1ec;
  --dark: #1d1a1a;
  --kakao: #fee500;
}

body {
  font-family: "Pretendard Variable", Pretendard, -apple-system, BlinkMacSystemFont,
    system-ui, "Apple SD Gothic Neo", "Noto Sans KR", "Malgun Gothic", sans-serif;
  font-size: 15px; font-weight: 400; line-height: 1.55;
  letter-spacing: -0.03em; color: var(--txt); background: #fff; word-break: keep-all;
}
.blind { position: absolute; width: 1px; height: 1px; margin: -1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }

/* ---------- 레이아웃 ---------- */
.inner { width: 1200px; margin: 0 auto; padding: 0 16px; }
.sec { padding: 90px 0; }
.sec.bg { background: var(--bg2); }
.sec.dark { background: var(--dark); color: #fff; }
.sec.tight { padding: 60px 0; }

.sec-head { margin-bottom: 40px; text-align: center; }
.sec-head .lb { display: inline-block; font-size: 11px; font-weight: 700; letter-spacing: 0.02em; color: #fff; background: var(--pt); padding: 4px 12px; margin-bottom: 14px; }
.sec-head h2 { font-size: 32px; font-weight: 700; letter-spacing: -0.045em; line-height: 1.38; }
.sec-head h2 b { color: var(--pt); }
.sec-head p { margin-top: 14px; font-size: 15px; color: var(--txt2); line-height: 1.75; }
.sec.dark .sec-head h2 { color: #fff; }
.sec.dark .sec-head h2 b { color: var(--gold); }
.sec.dark .sec-head p { color: rgba(255,255,255,.66); }
.sec-head.left { text-align: left; }

/* ---------- 상단 띠배너 ---------- */
#topbar { background: var(--pt); color: #fff; }
#topbar .inner { height: 42px; display: flex; align-items: center; justify-content: center; gap: 14px; font-size: 13px; }
#topbar b { font-weight: 700; }
#topbar a { text-decoration: underline; text-underline-offset: 3px; font-size: 12px; opacity: .85; }
#topbar .cls { position: absolute; right: 22px; font-size: 15px; opacity: .7; }

/* ---------- 헤더 3단 (42 + 38 + 56 + 54) ---------- */
#header { position: sticky; top: 0; z-index: 100; background: #fff; }
.h-util { border-bottom: 1px solid var(--line2); background: #fafafa; }
.h-util .inner { height: 38px; display: flex; align-items: center; justify-content: flex-end; gap: 16px; }
.h-util a { font-size: 12px; color: var(--txt2); }
.h-util a:hover { color: var(--txt); }
.h-util .lang { display: flex; gap: 9px; padding-left: 16px; border-left: 1px solid var(--line); }
.h-util .lang a { font-size: 11px; color: var(--txt3); }
.h-util .lang a.on { color: var(--pt); font-weight: 700; }

.h-main { border-bottom: 1px solid var(--line2); }
.h-main .inner { height: 66px; display: flex; align-items: center; }
.h-main h1 { flex: none; font-size: 22px; font-weight: 700; letter-spacing: 0.04em; line-height: 1.1; white-space: nowrap; }
.h-main h1 span { display: block; font-size: 10px; font-weight: 400; color: var(--txt3); letter-spacing: 0.1em; margin-top: 3px; }
.h-main .hr { margin-left: auto; display: flex; align-items: center; gap: 12px; }
.h-main .tel { font-size: 12px; color: var(--txt2); white-space: nowrap; }
.h-main .tel b { display: block; font-size: 21px; font-weight: 700; color: var(--txt); letter-spacing: -0.03em; line-height: 1.15; }
.h-main .cta { height: 42px; padding: 0 20px; display: inline-flex; align-items: center; font-size: 14px; font-weight: 500; white-space: nowrap; }
.h-main .cta.a { background: var(--pt); color: #fff; }
.h-main .cta.a:hover { background: var(--pt-dk); }
.h-main .cta.b { border: 1px solid var(--line); color: var(--txt); }
.h-main .cta.b:hover { border-color: var(--txt); }

#gnb { border-bottom: 1px solid var(--line); }
#gnb .mo-lang { display: none; }   /* 모바일 메뉴에서만 노출 */
#gnb .inner { height: 54px; }
#gnb > .inner > ul { display: flex; height: 100%; }
#gnb > .inner > ul > li { flex: 1; }
#gnb > .inner > ul > li > a { display: block; height: 100%; line-height: 53px; text-align: center; font-size: 16px; font-weight: 500; white-space: nowrap; }
#gnb > .inner > ul > li.on > a { color: var(--pt); font-weight: 700; }
#gnb > .inner > ul > li:hover > a { color: var(--pt); }

.mega { display: none; position: absolute; left: 0; width: 100%; background: #fff; border-top: 1px solid var(--line2); border-bottom: 2px solid var(--pt); box-shadow: 0 8px 16px rgba(0,0,0,.06); z-index: 99; }
#header.on .mega { display: block; }
.mega .inner { display: flex; padding-top: 30px; padding-bottom: 34px; }
.mega .mcol { flex: 1; padding-right: 22px; }
.mega .mcol h3 { font-size: 15px; font-weight: 700; margin-bottom: 14px; padding-bottom: 11px; border-bottom: 1px solid var(--txt); }
.mega .mcol li { margin-bottom: 8px; }
.mega .mcol a { font-size: 14px; color: var(--txt2); }
.mega .mcol a:hover { color: var(--pt); text-decoration: underline; text-underline-offset: 3px; }
.mega .mbanner { width: 250px; flex: none; background: var(--bg3); padding: 24px 22px; }
.mega .mbanner strong { display: block; font-size: 16px; font-weight: 700; letter-spacing: -0.04em; line-height: 1.5; }
.mega .mbanner p { margin-top: 10px; font-size: 13px; color: var(--txt2); line-height: 1.7; }
.mega .mbanner .b { margin-top: 16px; display: inline-flex; height: 36px; padding: 0 16px; align-items: center; background: var(--pt); color: #fff; font-size: 13px; }

.btn-mo { display: none; width: 44px; height: 44px; margin-left: 8px; }
.btn-mo span { display: block; width: 20px; height: 2px; background: var(--txt); margin: 4px auto; }

/* ---------- 메인 비주얼 ---------- */
#visual { position: relative; height: 620px; background: #2b2724; overflow: hidden; }
#visual .vimg { position: absolute; inset: 0; }
#visual .vimg img { width: 100%; height: 100%; object-fit: cover; object-position: center 32%; }
#visual .vimg::after { content: ""; position: absolute; inset: 0; background: linear-gradient(90deg, rgba(18,14,13,.82) 0%, rgba(18,14,13,.55) 50%, rgba(18,14,13,.18) 100%); }
#visual .inner { position: relative; height: 100%; display: flex; flex-direction: column; justify-content: center; padding-bottom: 40px; }
#visual .badge { display: inline-flex; align-self: flex-start; align-items: center; gap: 8px; font-size: 12px; color: #e8c98e; border: 1px solid rgba(232,201,142,.5); padding: 6px 14px; margin-bottom: 20px; }
#visual h2 { font-size: 46px; font-weight: 700; color: #fff; line-height: 1.34; letter-spacing: -0.05em; }
#visual h2 b { color: #e8c98e; }
#visual p { margin-top: 18px; font-size: 16px; color: rgba(255,255,255,.78); line-height: 1.75; }
#visual .vb { margin-top: 32px; display: flex; gap: 8px; }
#visual .vb a { height: 50px; padding: 0 28px; display: inline-flex; align-items: center; font-size: 15px; font-weight: 500; }
#visual .vb .a { background: var(--pt); color: #fff; }
#visual .vb .a:hover { background: var(--pt-dk); }
#visual .vb .b { border: 1px solid rgba(255,255,255,.45); color: #fff; }
#visual .vb .b:hover { background: #fff; color: var(--txt); }

/* 히어로 하단 고정 퀵상담 폼 (아이디병원 패턴) */
.quick-form { background: var(--dark); }
.quick-form .inner { display: flex; align-items: center; gap: 12px; height: 96px; }
.quick-form .qf-tit { flex: none; color: #fff; }
.quick-form .qf-tit strong { display: block; font-size: 17px; font-weight: 700; letter-spacing: -0.04em; }
.quick-form .qf-tit span { display: block; font-size: 12px; color: rgba(255,255,255,.55); margin-top: 4px; }
.quick-form form { flex: 1; display: flex; align-items: center; gap: 8px; }
.quick-form input[type=text], .quick-form input[type=tel], .quick-form select {
  height: 46px; border: 0; padding: 0 12px; font: inherit; font-size: 14px; letter-spacing: -0.03em; background: #fff; color: var(--txt); min-width: 0;
}
.quick-form input[type=text] { flex: 1; }
.quick-form input[type=tel] { flex: 1.2; }
.quick-form select { flex: 1.4; }
.quick-form .agree { flex: none; display: flex; align-items: center; gap: 6px; font-size: 12px; color: rgba(255,255,255,.7); white-space: nowrap; }
.quick-form .agree input { width: 15px; height: 15px; accent-color: var(--pt); }
.quick-form .agree a { text-decoration: underline; text-underline-offset: 2px; color: rgba(255,255,255,.55); }
.quick-form button { flex: none; height: 46px; padding: 0 26px; background: var(--pt); color: #fff; font-size: 15px; font-weight: 700; }
.quick-form button:hover { background: var(--pt-dk); }

/* ---------- 숫자 ---------- */
.stat { display: flex; border-top: 1px solid var(--line); border-bottom: 1px solid var(--line); }
.stat li { flex: 1; padding: 30px 16px; text-align: center; border-left: 1px solid var(--line2); }
.stat li:first-child { border-left: 0; }
.stat .n { font-size: 38px; font-weight: 700; letter-spacing: -0.05em; line-height: 1; font-variant-numeric: tabular-nums; color: var(--pt); }
.stat .n i { font-style: normal; font-size: 17px; }
.stat .t { margin-top: 11px; font-size: 14px; color: var(--txt2); }

/* ---------- 시술 카드 그리드 ---------- */
.tgrid { display: flex; flex-wrap: wrap; gap: 20px; }
.tgrid > li { width: calc(25% - 15px); border: 1px solid var(--line2); background: #fff; }
.tgrid a { display: block; height: 100%; }
.tgrid a:hover { border-color: var(--pt); box-shadow: 0 4px 14px rgba(0,0,0,.06); }
.tgrid .ph { position: relative; padding-top: 66%; overflow: hidden; background: var(--bg3); }
.tgrid .ph img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; transition: transform .5s; }
.tgrid a:hover .ph img { transform: scale(1.05); }
.tgrid .ph .cat { position: absolute; left: 0; top: 0; z-index: 2; background: var(--pt); color: #fff; font-size: 11px; font-weight: 700; padding: 5px 11px; }
.tgrid .tx { padding: 20px 18px 24px; }
.tgrid strong { display: block; font-size: 18px; font-weight: 700; letter-spacing: -0.045em; }
.tgrid .eng { display: block; margin-top: 5px; font-size: 11px; color: var(--txt3); }
.tgrid p { margin-top: 12px; font-size: 14px; color: var(--txt2); line-height: 1.7; }
.tgrid .sp { margin-top: 14px; padding-top: 12px; border-top: 1px dashed var(--line); }
.tgrid .sp span { display: block; font-size: 12.5px; color: var(--txt2); line-height: 1.8; }
.tgrid .sp b { color: var(--txt); font-weight: 500; }

/* ---------- 이벤트 띠 ---------- */
.evtbar { background: var(--bg3); border-top: 1px solid #e5ddd0; border-bottom: 1px solid #e5ddd0; }
.evtbar .inner { height: 72px; display: flex; align-items: center; gap: 16px; }
.evtbar .lb { flex: none; font-size: 11px; font-weight: 700; color: #fff; background: var(--pt); padding: 4px 11px; }
.evtbar .tx { font-size: 16px; font-weight: 500; letter-spacing: -0.04em; }
.evtbar .tx b { color: var(--pt-dk); }
.evtbar .more { margin-left: auto; font-size: 13px; color: var(--txt2); }
.evtbar .more:hover { color: var(--pt); }

/* ---------- 전후사진 게이트 ---------- */
.ba-grid { display: flex; flex-wrap: wrap; gap: 16px; }
.ba-grid > li { width: calc(25% - 12px); }
.ba-grid .ph { position: relative; padding-top: 100%; overflow: hidden; background: var(--bg3); }
.ba-grid .ph img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; }
.ba-grid .lock { position: absolute; inset: 0; z-index: 2; background: rgba(34,30,31,.82); display: flex; flex-direction: column; align-items: center; justify-content: center; color: #fff; }
.ba-grid .lock .i { font-size: 22px; margin-bottom: 9px; }
.ba-grid .lock span { font-size: 12.5px; color: rgba(255,255,255,.75); text-align: center; line-height: 1.6; }
.ba-grid .cap { padding: 12px 2px 0; }
.ba-grid .cap strong { display: block; font-size: 14px; font-weight: 500; }
.ba-grid .cap span { display: block; margin-top: 5px; font-size: 12px; color: var(--txt3); font-variant-numeric: tabular-nums; }
.ba-note { margin-top: 26px; background: var(--pt-lt); border: 1px solid #efdada; padding: 22px 24px; }
.ba-note p { font-size: 14px; color: var(--txt2); line-height: 1.85; }
.ba-note b { color: var(--txt); font-weight: 500; }

/* ---------- 후기 ---------- */
.rv-list { display: flex; gap: 20px; }
.rv-list > li { flex: 1; border: 1px solid var(--line2); padding: 26px 24px; background: #fff; }
.rv-list .star { color: var(--gold); font-size: 14px; letter-spacing: 2px; }
.rv-list p { margin-top: 14px; font-size: 14.5px; color: var(--txt); line-height: 1.85; }
.rv-list .who { margin-top: 18px; padding-top: 14px; border-top: 1px solid var(--line2); font-size: 12.5px; color: var(--txt3); }
.rv-list .who b { color: var(--txt2); font-weight: 500; }

/* ---------- 공간 ---------- */
.rooms { display: flex; flex-wrap: wrap; gap: 2px; }
.rooms > li { width: calc(20% - 1.6px); position: relative; }
.rooms .ph { position: relative; padding-top: 130%; overflow: hidden; background: #2b2724; }
.rooms .ph img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; opacity: .82; transition: opacity .5s, transform 1s; }
.rooms > li:hover .ph img { opacity: 1; transform: scale(1.05); }
.rooms .ph::after { content: ""; position: absolute; inset: 0; background: linear-gradient(to top, rgba(12,10,9,.82), transparent 55%); }
.rooms .cap { position: absolute; left: 16px; bottom: 16px; z-index: 2; color: #fff; }
.rooms .cap em { font-style: normal; font-size: 11px; color: #e8c98e; font-variant-numeric: tabular-nums; }
.rooms .cap strong { display: block; margin-top: 4px; font-size: 16px; font-weight: 700; letter-spacing: -0.04em; }

/* ---------- 버튼 ---------- */
.btn { display: inline-flex; align-items: center; justify-content: center; height: 50px; padding: 0 28px; font-size: 15px; font-weight: 500; }
.btn.p { background: var(--pt); color: #fff; } .btn.p:hover { background: var(--pt-dk); }
.btn.d { background: var(--dark); color: #fff; } .btn.d:hover { background: #000; }
.btn.l { border: 1px solid var(--line); } .btn.l:hover { border-color: var(--txt); }
.btn.sm { height: 40px; padding: 0 18px; font-size: 14px; }
.btn.full { width: 100%; }
.more-line { display: inline-flex; align-items: center; gap: 7px; font-size: 14px; color: var(--txt2); border-bottom: 1px solid var(--line); padding-bottom: 4px; }
.more-line:hover { color: var(--pt); border-color: var(--pt); }

/* ---------- 서브 ---------- */
#sub-visual { height: 260px; background: #2b2724; position: relative; overflow: hidden; }
#sub-visual img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; opacity: .55; }
#sub-visual .inner { position: relative; z-index: 2; height: 100%; display: flex; flex-direction: column; justify-content: center; color: #fff; text-align: center; }
#sub-visual h2 { font-size: 36px; font-weight: 700; letter-spacing: -0.05em; }
#sub-visual p { margin-top: 10px; font-size: 15px; color: rgba(255,255,255,.75); }

.path { border-bottom: 1px solid var(--line2); }
.path .inner { height: 46px; display: flex; align-items: center; gap: 9px; font-size: 13px; color: var(--txt3); }
.path a { color: var(--txt3); } .path a:hover { color: var(--txt2); }
.path .cur { color: var(--txt); font-weight: 500; }

.stab { border-bottom: 1px solid var(--line); background: #fff; }
.stab ul { display: flex; width: 1200px; margin: 0 auto; padding: 0 16px; }
.stab li { flex: 1; }
.stab a { display: block; height: 58px; line-height: 58px; text-align: center; font-size: 15px; color: var(--txt2); border-left: 1px solid var(--line2); }
.stab li:last-child a { border-right: 1px solid var(--line2); }
.stab li.on a { background: var(--pt); color: #fff; border-color: var(--pt); font-weight: 500; }

/* ---------- 본문 ---------- */
.t2 { font-size: 28px; font-weight: 700; letter-spacing: -0.05em; line-height: 1.42; margin-bottom: 24px; }
.t2 b { color: var(--pt); }
.t3 { font-size: 20px; font-weight: 700; letter-spacing: -0.045em; margin-bottom: 15px; padding-left: 11px; border-left: 3px solid var(--pt); line-height: 1.3; }
.bd { font-size: 15.5px; color: var(--txt2); line-height: 1.88; }
.bd + .bd { margin-top: 15px; }
.box { background: var(--bg2); padding: 30px 32px; }
.box.pt { background: var(--pt-lt); border: 1px solid #efdada; }
.box.dk { background: var(--dark); color: rgba(255,255,255,.78); }
.box.dk b { color: #fff; }

.dots li { position: relative; padding-left: 13px; font-size: 15px; color: var(--txt2); line-height: 1.88; }
.dots li::before { content: ""; position: absolute; left: 0; top: 12px; width: 4px; height: 4px; background: var(--pt); }
.nums li { position: relative; padding-left: 30px; font-size: 15px; color: var(--txt2); line-height: 1.85; margin-bottom: 9px; }
.nums li b { position: absolute; left: 0; top: 2px; width: 21px; height: 21px; background: var(--pt); color: #fff; font-size: 11px; font-weight: 700; text-align: center; line-height: 21px; }
.note { margin-top: 15px; font-size: 13px; color: var(--txt3); line-height: 1.8; }
.note b { color: var(--txt2); font-weight: 500; }

.tbl { border-top: 2px solid var(--txt); }
.tbl th, .tbl td { padding: 14px 16px; border-bottom: 1px solid var(--line2); font-size: 15px; text-align: left; vertical-align: middle; }
.tbl th { background: var(--bg2); font-weight: 500; width: 180px; }
.tbl td { color: var(--txt2); }
.tbl td strong { color: var(--txt); font-weight: 500; }
.tbl.c th, .tbl.c td { text-align: center; } .tbl.c th { width: auto; }

.times { border-top: 1px solid var(--line); }
.times li { display: flex; padding: 13px 2px; border-bottom: 1px solid var(--line2); font-size: 15px; }
.times .d { width: 150px; flex: none; font-weight: 500; }
.times .t { color: var(--txt2); font-variant-numeric: tabular-nums; }
.times .m { margin-left: auto; font-size: 13px; color: var(--txt3); }

.c2 { display: flex; gap: 50px; } .c2 > div { flex: 1; min-width: 0; }
.c3 { display: flex; gap: 22px; } .c3 > div { flex: 1; min-width: 0; }
.c4 { display: flex; flex-wrap: wrap; gap: 20px; } .c4 > div { width: calc(25% - 15px); }

.card { border: 1px solid var(--line2); padding: 26px 24px; background: #fff; }
.card .n { font-size: 12px; font-weight: 700; color: var(--pt); font-variant-numeric: tabular-nums; }
.card h4 { margin: 11px 0 9px; font-size: 18px; font-weight: 700; letter-spacing: -0.045em; }
.card p { font-size: 14px; color: var(--txt2); line-height: 1.78; }

.steps { display: flex; }
.steps > li { flex: 1; padding: 0 22px; border-left: 1px solid var(--line2); }
.steps > li:first-child { border-left: 0; padding-left: 0; }
.steps .n { font-size: 12px; font-weight: 700; color: var(--pt); font-variant-numeric: tabular-nums; }
.steps h4 { margin: 9px 0 8px; font-size: 17px; font-weight: 700; letter-spacing: -0.045em; }
.steps p { font-size: 14px; color: var(--txt2); line-height: 1.75; }

.prow { display: flex; align-items: center; gap: 50px; }
.prow.rev { flex-direction: row-reverse; }
.prow .ph { width: 50%; flex: none; position: relative; padding-top: 33%; overflow: hidden; background: var(--bg3); }
.prow .ph img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; }
.prow .tx { flex: 1; }

/* 폼 */
.ftbl { border-top: 2px solid var(--txt); }
.ftbl .r { display: flex; border-bottom: 1px solid var(--line2); }
.ftbl .l { width: 165px; flex: none; background: var(--bg2); padding: 15px 16px; font-size: 15px; font-weight: 500; display: flex; align-items: center; }
.ftbl .l em { font-style: normal; color: var(--pt); margin-left: 3px; }
.ftbl .c { flex: 1; min-width: 0; padding: 11px 16px; display: flex; align-items: center; flex-wrap: wrap; gap: 8px; }
.ftbl .c > .inp, .ftbl .c > .sel { max-width: 100%; }
.inp, .sel, .txa { height: 44px; padding: 0 12px; border: 1px solid var(--line); font: inherit; font-size: 15px; letter-spacing: -0.03em; color: var(--txt); background: #fff; }
.inp:focus, .sel:focus, .txa:focus { border-color: var(--pt); outline: 0; }
.txa { height: auto; padding: 12px; width: 100%; line-height: 1.7; resize: vertical; }
.inp.w200 { width: 200px; } .inp.w260 { width: 260px; } .inp.full { width: 100%; } .sel { width: 260px; }
.agree-box { margin-top: 22px; border: 1px solid var(--line); padding: 20px 22px; }
.agree-box .r { display: flex; align-items: flex-start; gap: 8px; font-size: 14px; color: var(--txt2); line-height: 1.7; }
.agree-box .r + .r { margin-top: 10px; }
.agree-box input[type=checkbox] { width: 16px; height: 16px; margin-top: 3px; flex: none; accent-color: var(--pt); }
.agree-box .dt { margin-left: auto; font-size: 13px; color: var(--txt3); text-decoration: underline; text-underline-offset: 3px; flex: none; }

/* FAQ */
.faq { border-top: 2px solid var(--txt); }
.faq li { border-bottom: 1px solid var(--line2); }
.faq .q { width: 100%; text-align: left; padding: 21px 46px 21px 42px; font-size: 16px; font-weight: 500; letter-spacing: -0.04em; position: relative; }
.faq .q::before { content: "Q"; position: absolute; left: 6px; top: 20px; width: 24px; height: 24px; background: var(--txt); color: #fff; font-size: 12px; font-weight: 700; text-align: center; line-height: 24px; }
.faq .q::after { content: "+"; position: absolute; right: 12px; top: 50%; transform: translateY(-50%); font-size: 19px; color: var(--txt3); }
.faq li.on .q { color: var(--pt); }
.faq li.on .q::before { background: var(--pt); }
.faq li.on .q::after { content: "\2212"; color: var(--pt); }
.faq .a { display: none; padding: 0 46px 24px 42px; font-size: 15px; color: var(--txt2); line-height: 1.88; }
.faq li.on .a { display: block; }

/* ---------- 퀵 ---------- */
#quick { position: fixed; right: 18px; top: 50%; transform: translateY(-50%); width: 80px; z-index: 90; background: #fff; border: 1px solid var(--line); }
#quick .hd { background: var(--pt); color: #fff; font-size: 11px; font-weight: 700; text-align: center; padding: 9px 0; letter-spacing: 0.02em; }
#quick li + li { border-top: 1px solid var(--line2); }
#quick a { display: block; padding: 13px 4px; text-align: center; font-size: 11px; color: var(--txt2); line-height: 1.4; }
#quick a:hover { background: var(--pt-lt); color: var(--pt); }
#quick .ic { display: block; font-size: 15px; margin-bottom: 4px; color: var(--pt); }
#quick .kko { background: var(--kakao); color: #3c1e1e; } #quick .kko .ic { color: #3c1e1e; }
#quick .kko:hover { background: #f5dc00; color: #3c1e1e; }
#quick .tel-b { background: var(--dark); color: #fff; font-size: 12px; font-weight: 700; letter-spacing: -0.03em; padding: 12px 2px; }
#quick .tel-b:hover { background: #000; color: #fff; }
#quick .top { background: var(--bg2); font-size: 11px; }

/* ---------- 푸터 ---------- */
#footer { background: var(--bg2); border-top: 1px solid var(--line); padding: 34px 0 44px; }
.f-nav { display: flex; gap: 20px; padding-bottom: 18px; border-bottom: 1px solid var(--line); font-size: 14px; }
.f-nav a { color: var(--txt2); } .f-nav a:hover { color: var(--txt); }
.f-nav a.em { color: var(--pt); font-weight: 500; }
.f-in { margin-top: 20px; font-size: 13px; color: var(--txt2); line-height: 1.95; }
.f-in span { display: inline-block; margin-right: 14px; }
.f-in b { font-weight: 700; color: var(--txt); }
.f-cp { margin-top: 12px; font-size: 12px; color: var(--txt3); }
.f-ds { margin-top: 18px; padding-top: 18px; border-top: 1px solid var(--line2); font-size: 12px; color: var(--txt3); line-height: 1.85; }

#mo-bar { display: none; position: fixed; left: 0; bottom: 0; width: 100%; z-index: 95; background: #fff; border-top: 1px solid var(--line); }
#mo-bar ul { display: flex; }
#mo-bar li { flex: 1; border-left: 1px solid var(--line2); }
#mo-bar li:first-child { border-left: 0; }
#mo-bar a { display: block; height: 56px; line-height: 56px; text-align: center; font-size: 13px; }
#mo-bar .kko { background: var(--kakao); color: #3c1e1e; font-weight: 500; }
#mo-bar .rsv { background: var(--pt); color: #fff; font-weight: 500; }

/* ---------- 반응형 ---------- */
@media (max-width: 1240px) {
  .inner, .stab ul { width: 100%; }
  #gnb > .inner > ul > li > a { font-size: 15px; }
}
@media (max-width: 1024px) {
  #gnb, .h-util, .h-main .cta.b, .h-main .tel { display: none; }
  #header { position: sticky; }
  .h-main .inner { height: 60px; }
  .btn-mo { display: block; }
  #quick { display: none; }
  #mo-bar { display: block; }
  body { padding-bottom: 56px; }
  .mega { display: none !important; }

  #gnb.mo-open { display: block; position: fixed; top: 60px; left: 0; width: 100%; height: calc(100vh - 60px); background: #fff; overflow-y: auto; z-index: 99; border: 0; }
  #gnb.mo-open .inner { display: block; height: auto; padding: 0; width: 100%; }
  #gnb.mo-open > .inner > ul { display: block; height: auto; }
  #gnb.mo-open > .inner > ul > li { border-bottom: 1px solid var(--line2); }
  #gnb.mo-open > .inner > ul > li > a { height: auto; line-height: 1; padding: 17px 20px; text-align: left; font-size: 16px; }
  #gnb.mo-open .mo-lang { display: flex; gap: 20px; padding: 16px 20px; background: #fafafa; border-bottom: 1px solid var(--line2); }
  #gnb.mo-open .mo-lang a { font-size: 13px; color: var(--txt2); }

  .sec { padding: 55px 0; } .sec.tight { padding: 40px 0; }
  .sec-head { margin-bottom: 26px; }
  .sec-head h2 { font-size: 24px; } .sec-head p { font-size: 14.5px; }

  #visual { height: 500px; }
  #visual h2 { font-size: 29px; } #visual p { font-size: 15px; }
  #visual .vb a { flex: 1; justify-content: center; padding: 0 14px; }

  .quick-form .inner { height: auto; padding-top: 22px; padding-bottom: 22px; flex-direction: column; align-items: stretch; gap: 12px; }
  .quick-form form { flex-wrap: wrap; }
  .quick-form input[type=text], .quick-form input[type=tel] { flex: 1 1 calc(50% - 4px); }
  .quick-form select { flex: 1 1 100%; }
  .quick-form .agree { width: 100%; white-space: normal; }
  .quick-form button { width: 100%; }

  .stat { flex-wrap: wrap; border-left: 1px solid var(--line2); }
  .stat li { width: 50%; flex: none; border-bottom: 1px solid var(--line2); padding: 22px 10px; }
  .stat .n { font-size: 28px; }

  .tgrid > li { width: calc(50% - 10px); }
  .ba-grid > li { width: calc(50% - 8px); }
  .rooms > li { width: calc(50% - 1px); }
  .rv-list { flex-wrap: wrap; } .rv-list > li { width: 100%; flex: none; }
  .c2, .c3, .prow, .prow.rev { flex-direction: column; gap: 24px; }
  .c4 > div { width: calc(50% - 10px); }
  .prow .ph { width: 100%; padding-top: 62%; }
  .steps { display: block; }
  .steps > li { padding: 18px 0; border-left: 0; border-top: 1px solid var(--line2); }
  .steps > li:first-child { border-top: 0; padding-top: 0; }

  .stab ul { overflow-x: auto; } .stab li { flex: none; }
  .stab a { padding: 0 16px; height: 50px; line-height: 50px; font-size: 14px; }
  #sub-visual { height: 180px; } #sub-visual h2 { font-size: 25px; }

  .t2 { font-size: 21px; } .t3 { font-size: 17px; } .bd { font-size: 15px; }
  .tbl th { width: 108px; padding: 11px; font-size: 14px; }
  .tbl td { padding: 11px; font-size: 14px; }
  .ftbl .r { display: block; } .ftbl .l { width: 100%; padding: 10px 14px; } .ftbl .c { padding: 11px 14px; }
  .inp.w200, .inp.w260, .sel { width: 100%; }
  .times li { flex-wrap: wrap; } .times .m { margin-left: 0; width: 100%; margin-top: 4px; }
  .evtbar .inner { height: auto; padding: 16px; flex-wrap: wrap; gap: 8px; }
  .evtbar .tx { width: 100%; font-size: 15px; } .evtbar .more { margin-left: 0; }
  .f-nav { flex-wrap: wrap; gap: 9px 15px; font-size: 13px; }
  #topbar .inner { height: auto; padding: 10px 16px; flex-wrap: wrap; justify-content: flex-start; font-size: 12.5px; }
}
@media (max-width: 560px) {
  .tgrid > li, .c4 > div, .ba-grid > li, .rooms > li { width: 100%; }
  .stat li { width: 100%; }
  #visual h2 { font-size: 25px; }
  .quick-form input[type=text], .quick-form input[type=tel] { flex: 1 1 100%; }
}

/* ---------- 메인 레이어 팝업 (톡스앤필 .brand-popup 중앙 대형 오버레이 패턴) ---------- */
#popwrap { position: fixed; inset: 0; z-index: 200; background: rgba(0,0,0,.55); display: flex; align-items: center; justify-content: center; padding: 20px; }
#popwrap.hide { display: none; }
.pop { width: 880px; max-width: 100%; max-height: calc(100vh - 40px); background: #fff; border-radius: 0; display: flex; flex-direction: column; }
.pop.hide { display: none; }
.pop .pop-in { display: flex; flex: 1; min-height: 0; }
.pop .pop-ph { width: 46%; flex: none; position: relative; overflow: hidden; background: var(--bg3); }
.pop .pop-ph img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; }
.pop .pop-ph .lb { position: absolute; left: 0; top: 0; z-index: 2; background: var(--pt); color: #fff; font-size: 11px; font-weight: 700; padding: 6px 13px; }
.pop .pop-tx { flex: 1; padding: 36px 34px; overflow-y: auto; }
.pop .pop-tx .cate { font-size: 12px; font-weight: 700; color: var(--pt); }
.pop .pop-tx strong { display: block; margin: 12px 0 14px; font-size: 26px; font-weight: 700; letter-spacing: -0.05em; line-height: 1.35; }
.pop .pop-tx p { font-size: 15px; color: var(--txt2); line-height: 1.85; }
.pop .pop-tx .pe { margin-top: 18px; padding-top: 16px; border-top: 1px solid var(--line2); font-size: 13.5px; color: var(--txt3); font-variant-numeric: tabular-nums; }
.pop .pop-tx .go { margin-top: 20px; display: inline-flex; height: 44px; padding: 0 22px; align-items: center; background: var(--pt); color: #fff; font-size: 14px; font-weight: 500; }
.pop .pop-tx .go:hover { background: var(--pt-dk); }
.pop .pop-foot { flex: none; display: flex; align-items: center; border-top: 1px solid var(--line2); background: var(--bg2); }
.pop .pop-foot label { flex: 1; display: flex; align-items: center; gap: 8px; padding: 0 20px; height: 48px; font-size: 13px; color: var(--txt2); cursor: pointer; }
.pop .pop-foot input { width: 15px; height: 15px; accent-color: var(--pt); }
.pop .pop-foot .cls { flex: none; height: 48px; padding: 0 26px; background: var(--dark); color: #fff; font-size: 14px; }
.pop .pop-foot .cls:hover { background: #000; }

/* ---------- 게시판 ---------- */
.bd-top { display: flex; align-items: center; flex-wrap: wrap; gap: 10px; margin-bottom: 20px; }
.bd-total { font-size: 14px; color: var(--txt2); }
.bd-total b { color: var(--pt); font-weight: 700; font-variant-numeric: tabular-nums; }
.bd-tab { display: flex; gap: 5px; }
.bd-tab a { height: 38px; padding: 0 16px; display: inline-flex; align-items: center; border: 1px solid var(--line); font-size: 14px; color: var(--txt2); }
.bd-tab a.on { background: var(--pt); border-color: var(--pt); color: #fff; font-weight: 500; }
.bd-view-sw { display: flex; gap: 4px; margin-left: auto; }
.bd-view-sw button { width: 38px; height: 38px; border: 1px solid var(--line); font-size: 13px; color: var(--txt3); }
.bd-view-sw button.on { border-color: var(--txt); color: var(--txt); background: #fff; }
.bd-search { display: flex; gap: 5px; }
.bd-search select, .bd-search input { height: 38px; border: 1px solid var(--line); font: inherit; font-size: 14px; padding: 0 10px; letter-spacing: -0.03em; background: #fff; }
.bd-search input { width: 180px; }
.bd-search button { height: 38px; padding: 0 18px; background: var(--dark); color: #fff; font-size: 14px; letter-spacing: 0.2em; text-indent: 0.2em; }
.bd-search button:hover { background: #000; }

.bd-gal { display: flex; flex-wrap: wrap; gap: 26px 20px; }
.bd-gal > li { width: calc(33.333% - 14px); }
.bd-gal .ph { position: relative; padding-top: 66%; overflow: hidden; background: var(--bg3); border: 1px solid var(--line2); }
.bd-gal .ph img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; transition: transform .5s; }
.bd-gal a:hover .ph img { transform: scale(1.04); }
.bd-gal .st { position: absolute; left: 0; top: 0; z-index: 2; font-size: 11px; font-weight: 700; padding: 5px 11px; background: var(--pt); color: #fff; }
.bd-gal .st.end { background: #999; }
.bd-gal .tx { padding: 15px 2px 0; }
.bd-gal .tx strong { display: block; font-size: 17px; font-weight: 700; letter-spacing: -0.05em; line-height: 1.45; }
.bd-gal .tx p { margin-top: 7px; font-size: 14px; color: var(--txt2); line-height: 1.65; }
.bd-gal .meta { margin-top: 10px; display: flex; gap: 12px; font-size: 12.5px; color: var(--txt3); font-variant-numeric: tabular-nums; }
.bd-gal > li.off .ph img { filter: grayscale(1); opacity: .6; }
.bd-gal > li.off .tx strong { color: var(--txt3); }

.bd-list { border-top: 2px solid var(--txt); }
.bd-list li { border-bottom: 1px solid var(--line2); }
.bd-list a { display: flex; align-items: center; gap: 14px; padding: 16px 6px; }
.bd-list a:hover strong { color: var(--pt); }
.bd-list .cate { flex: none; width: 72px; font-size: 13px; color: var(--pt); font-weight: 500; }
.bd-list strong { font-size: 15.5px; font-weight: 500; letter-spacing: -0.04em; }
.bd-list .new { display: inline-block; margin-left: 7px; font-size: 10px; font-weight: 700; color: #fff; background: var(--pt); padding: 2px 5px; vertical-align: 2px; }
.bd-list .date { margin-left: auto; flex: none; font-size: 13px; color: var(--txt3); font-variant-numeric: tabular-nums; }
.bd-list .hit { flex: none; width: 72px; text-align: right; font-size: 13px; color: var(--txt3); font-variant-numeric: tabular-nums; }

/* 갤러리 <-> 리스트 전환 */
.bd-wrap.is-list .bd-gal { display: none; }
.bd-wrap.is-gal .bd-list { display: none; }

.paging { margin-top: 38px; display: flex; justify-content: center; gap: 5px; }
.paging a { min-width: 36px; height: 36px; padding: 0 9px; display: inline-flex; align-items: center; justify-content: center; border: 1px solid var(--line); font-size: 14px; color: var(--txt2); font-variant-numeric: tabular-nums; }
.paging a:hover { border-color: var(--txt); color: var(--txt); }
.paging a.on { background: var(--pt); border-color: var(--pt); color: #fff; font-weight: 700; }

.bd-view { border-top: 2px solid var(--txt); }
.bd-view .vh { padding: 24px 6px; border-bottom: 1px solid var(--line); background: var(--bg2); }
.bd-view .vh .st { display: inline-block; font-size: 11px; font-weight: 700; padding: 4px 10px; background: var(--pt); color: #fff; margin-bottom: 12px; }
.bd-view .vh h3 { font-size: 25px; font-weight: 700; letter-spacing: -0.05em; line-height: 1.4; }
.bd-view .vh .meta { margin-top: 13px; display: flex; flex-wrap: wrap; gap: 8px 20px; font-size: 13px; color: var(--txt3); }
.bd-view .vh .meta b { color: var(--txt2); font-weight: 500; }
.bd-view .vb { padding: 34px 6px 42px; border-bottom: 1px solid var(--line2); }
.bd-view .vb img { margin: 0 auto 24px; }
.bd-nav { border-bottom: 1px solid var(--line2); }
.bd-nav a { display: flex; align-items: center; gap: 16px; padding: 14px 6px; font-size: 14.5px; border-top: 1px solid var(--line2); }
.bd-nav a:first-child { border-top: 0; }
.bd-nav a:hover .t { color: var(--pt); }
.bd-nav .d { flex: none; width: 78px; font-size: 13px; color: var(--txt3); }
.bd-nav .t { color: var(--txt2); }
.bd-btns { margin-top: 28px; display: flex; justify-content: center; gap: 8px; }

@media (max-width: 1024px) {
  .pop .pop-in { display: block; overflow-y: auto; }
  .pop .pop-ph { width: 100%; height: 180px; position: relative; }
  .pop .pop-tx { padding: 24px 20px; overflow: visible; }
  .pop .pop-tx strong { font-size: 21px; }
  .bd-gal > li { width: calc(50% - 10px); }
  .bd-view-sw { display: none; }
  .bd-wrap.is-list .bd-gal { display: flex; }
  .bd-search { width: 100%; }
  .bd-search input { flex: 1; width: auto; }
  .bd-list .hit { display: none; }
  .bd-list a { flex-wrap: wrap; }
  .bd-list .date { margin-left: 0; width: 100%; margin-top: 5px; }
  .bd-view .vh h3 { font-size: 19px; }
}
@media (max-width: 560px) {
  .bd-gal > li { width: 100%; }
  .bd-tab { width: 100%; }
  .bd-tab a { flex: 1; justify-content: center; padding: 0 6px; font-size: 13.5px; }
  .pop .pop-foot label { padding: 0 14px; font-size: 12.5px; }
  .pop .pop-foot .cls { padding: 0 18px; }
}