@charset "utf-8";
/* 동네 의원형 1 (clinic) — 하늘온 의원 · 라이트 블루 신뢰 톤 */

:root{
  --cl-ink:#0F172A; --cl-body:#334155; --cl-mut:#64748B;
  --cl-pri:#1A63E0; --cl-pri-d:#0F3E9E; --cl-pri-l:#EAF1FD; --cl-sky:#DCEBFF;
  --cl-ok:#16A34A; --cl-warn:#F59E0B; --cl-off:#94A3B8;
  --cl-line:#E2E8F0; --cl-soft:#F5F8FC; --cl-dark:#0B1B34;
  --cl-r:14px; --cl-wrap:1240px;
  --cl-sh:0 10px 30px rgba(15,62,158,.08); --cl-sh-lg:0 24px 60px rgba(15,62,158,.16);
}
*,*::before,*::after{ box-sizing:border-box; }
html{ scroll-behavior:smooth; scroll-padding-top:90px; }
html.cl-lock{ overflow:hidden; }
body{ margin:0; background:#fff; color:var(--cl-ink); font-family:"Pretendard Variable",Pretendard,-apple-system,BlinkMacSystemFont,"Apple SD Gothic Neo","Malgun Gothic",sans-serif; font-size:16px; line-height:1.7; letter-spacing:-.01em; word-break:keep-all; -webkit-text-size-adjust:100%; }
a{ color:inherit; text-decoration:none; }
img{ max-width:100%; height:auto; }
button{ font:inherit; color:inherit; cursor:pointer; background:none; border:0; padding:0; }
h1,h2,h3,h4{ margin:0; letter-spacing:-.03em; line-height:1.35; }
:focus-visible{ outline:3px solid var(--cl-pri); outline-offset:2px; }
@media (prefers-reduced-motion:reduce){ *,*::before,*::after{ transition:none !important; animation:none !important; } html{ scroll-behavior:auto; } }

.cl-wrap{ max-width:var(--cl-wrap); margin:0 auto; padding:0 24px; }
.cl-skip{ position:absolute; left:-9999px; top:0; z-index:999; }
.cl-skip:focus{ left:8px; top:8px; padding:10px 14px; background:#000; color:#fff; }
.cl-eyebrow{ margin:0 0 10px; font-size:12px; font-weight:800; letter-spacing:.22em; color:var(--cl-pri); }
.cl-empty{ padding:40px; text-align:center; color:var(--cl-mut); background:#fff; border-radius:var(--cl-r); }
.cl-btn{ display:inline-flex; align-items:center; justify-content:center; gap:8px; padding:11px 18px; border-radius:10px; font-size:15px; font-weight:700; transition:background .2s, transform .2s, box-shadow .2s; }
.cl-btn--pri{ background:var(--cl-pri); color:#fff; }
.cl-btn--pri:hover{ background:var(--cl-pri-d); transform:translateY(-1px); box-shadow:var(--cl-sh); }
.cl-btn--lg{ padding:15px 26px; font-size:16px; border-radius:12px; }
.cl-more{ display:inline-flex; align-items:center; gap:6px; font-size:14px; font-weight:700; color:var(--cl-mut); white-space:nowrap; }
.cl-more:hover{ color:var(--cl-pri); }
.cl-more i{ font-size:11px; }

/* 데모 띠 */
.cl-demo{ display:flex; flex-wrap:wrap; justify-content:center; gap:4px 14px; padding:7px 16px; background:var(--cl-dark); color:#CBD5E1; font-size:12.5px; text-align:center; }
.cl-demo b{ margin-right:6px; padding:1px 7px; border-radius:4px; background:#B4E56E; color:var(--cl-dark); font-weight:800; }
.cl-demo a{ color:#93C5FD; font-weight:700; }

/* 오늘 진료 표시 */
.cl-now{ display:inline-flex; align-items:center; gap:8px; margin:0; font-size:13.5px; font-weight:700; }
.cl-now i{ width:9px; height:9px; border-radius:50%; background:var(--cl-off); flex:none; }
.cl-now.is-open i{ background:var(--cl-ok); box-shadow:0 0 0 4px rgba(22,163,74,.18); }
.cl-now.is-lunch i,.cl-now.is-before i{ background:var(--cl-warn); box-shadow:0 0 0 4px rgba(245,158,11,.18); }

/* 윗줄 */
.cl-topbar{ background:var(--cl-soft); border-bottom:1px solid var(--cl-line); font-size:13px; color:var(--cl-body); }
.cl-topbar__in{ display:flex; justify-content:space-between; align-items:center; gap:12px; min-height:38px; }
.cl-topbar__r{ display:flex; gap:18px; margin:0; }
.cl-topbar__r a{ font-weight:800; color:var(--cl-ink); }
.cl-topbar__r a i{ color:var(--cl-pri); }

/* 헤더 */
.cl-header{ position:sticky; top:0; z-index:80; background:rgba(255,255,255,.96); backdrop-filter:blur(8px); border-bottom:1px solid var(--cl-line); transition:box-shadow .2s; }
.cl-header.is-scrolled{ box-shadow:0 6px 20px rgba(15,23,42,.06); }
.cl-header__in{ display:flex; align-items:center; gap:28px; height:76px; }
.cl-brand{ display:flex; align-items:center; gap:11px; flex:none; margin:0; }
.cl-brand__mark{ display:grid; place-items:center; width:42px; height:42px; border-radius:50%; background:var(--cl-pri); color:#fff; font-size:19px; }
.cl-brand__name b{ display:block; font-size:20px; font-weight:800; letter-spacing:-.03em; line-height:1.15; }
.cl-brand__name small{ display:block; margin-top:2px; font-size:10px; letter-spacing:.2em; color:var(--cl-mut); }
.cl-gnb{ flex:1; display:flex; justify-content:center; }
.cl-gnb > ul{ display:flex; gap:4px; margin:0; padding:0; list-style:none; }
.cl-gnb > ul > li{ position:relative; }
.cl-gnb > ul > li > a{ display:block; padding:26px 18px; font-size:16px; font-weight:700; }
.cl-gnb > ul > li:hover > a,.cl-gnb > ul > li.is-on > a,.cl-gnb > ul > li:focus-within > a{ color:var(--cl-pri); }
.cl-gnb__sub{ position:absolute; top:calc(100% - 8px); left:50%; min-width:176px; margin:0; padding:10px; list-style:none; background:#fff; border:1px solid var(--cl-line); border-radius:12px; box-shadow:var(--cl-sh-lg);
  opacity:0; visibility:hidden; transform:translate(-50%,6px); transition:opacity .18s, transform .18s, visibility .18s; }
.cl-gnb > ul > li:hover > .cl-gnb__sub,.cl-gnb > ul > li:focus-within > .cl-gnb__sub{ opacity:1; visibility:visible; transform:translate(-50%,0); }
.cl-gnb__sub a{ display:block; padding:9px 14px; border-radius:8px; font-size:14.5px; font-weight:500; color:var(--cl-body); white-space:nowrap; }
.cl-gnb__sub a:hover{ background:var(--cl-pri-l); color:var(--cl-pri-d); }
.cl-gnb__empty{ margin:0; font-size:13px; color:var(--cl-mut); }
.cl-header__act{ display:flex; align-items:center; gap:10px; flex:none; }
.cl-burger{ display:none; flex-direction:column; justify-content:center; align-items:center; gap:5px; width:44px; height:44px; }
.cl-burger span{ display:block; width:22px; height:2px; border-radius:2px; background:var(--cl-ink); }

/* 전체 메뉴 */
.cl-drawer{ position:fixed; inset:0; z-index:200; background:rgba(11,27,52,.45); opacity:0; transition:opacity .25s; }
.cl-drawer.is-open{ opacity:1; }
.cl-drawer[hidden]{ display:none; }
.cl-drawer__panel{ position:absolute; top:0; right:0; bottom:0; display:flex; flex-direction:column; gap:16px; width:min(360px,88vw); padding:20px 22px 24px; overflow-y:auto; background:#fff; transform:translateX(100%); transition:transform .25s; }
.cl-drawer.is-open .cl-drawer__panel{ transform:none; }
.cl-drawer__top{ display:flex; justify-content:space-between; align-items:center; }
.cl-drawer__close{ width:40px; height:40px; border-radius:50%; background:var(--cl-soft); font-size:18px; }
.cl-drawer__menu{ flex:1; }
.cl-drawer__menu > div{ padding:12px 0; border-bottom:1px solid var(--cl-line); }
.cl-drawer__h{ display:block; font-size:17px; font-weight:800; }
.cl-drawer__menu ul{ display:flex; flex-wrap:wrap; gap:6px; margin:10px 0 0; padding:0; list-style:none; }
.cl-drawer__menu li a{ display:block; padding:6px 12px; border-radius:99px; background:var(--cl-soft); font-size:14px; color:var(--cl-body); }
.cl-drawer__cta{ display:grid; grid-template-columns:1fr 1fr; gap:8px; }
.cl-drawer__cta a{ display:flex; align-items:center; justify-content:center; gap:6px; padding:13px 8px; white-space:nowrap; border-radius:10px; border:1px solid var(--cl-line); font-size:14.5px; font-weight:700; }
.cl-drawer__cta a.is-pri{ background:var(--cl-pri); border-color:var(--cl-pri); color:#fff; }

/* 첫 화면 */
.cl-hero{ position:relative; height:clamp(460px,64vh,640px); overflow:hidden; background:var(--cl-dark); }
.cl-hero__slide{ position:absolute; inset:0; opacity:0; visibility:hidden; transition:opacity .9s, visibility .9s; }
.cl-hero__slide.is-on{ opacity:1; visibility:visible; }
.cl-hero__img{ position:absolute; inset:0; width:100%; height:100%; object-fit:cover; transform:scale(1.04); transition:transform 7s ease-out; }
.cl-hero__slide.is-on .cl-hero__img{ transform:scale(1); }
.cl-hero__slide::after{ content:""; position:absolute; inset:0; background:linear-gradient(90deg,rgba(8,24,56,.78) 0%,rgba(8,24,56,.45) 45%,rgba(8,24,56,0) 75%); }
.cl-hero__copy{ position:relative; z-index:2; display:flex; flex-direction:column; justify-content:center; align-items:flex-start; height:100%; padding-bottom:60px; color:#fff; }
.cl-hero__copy .cl-eyebrow{ color:#9CC3FF; }
.cl-hero h1,.cl-hero__h{ margin:0; font-size:clamp(34px,5vw,58px); font-weight:800; line-height:1.2; letter-spacing:-.04em; }
.cl-hero__sub{ margin:18px 0 30px; font-size:clamp(15px,1.6vw,18px); color:#DCE7F7; }
.cl-hero__ctrl{ position:absolute; left:0; right:0; bottom:92px; z-index:3; display:flex; align-items:center; gap:14px; }
.cl-hero__dots{ display:flex; gap:8px; }
.cl-hero__dots button{ width:28px; height:4px; border-radius:4px; background:rgba(255,255,255,.4); transition:width .3s, background .3s; }
.cl-hero__dots button.is-on{ width:52px; background:#fff; }
.cl-hero__pause{ width:30px; height:30px; border-radius:50%; background:rgba(255,255,255,.18); color:#fff; font-size:11px; }

/* 빠른 메뉴 */
.cl-quick{ position:relative; z-index:5; margin-top:-64px; }
.cl-quick__in{ display:grid; grid-template-columns:minmax(280px,1fr) 2.2fr; }
.cl-quick__today{ padding:26px 28px; border-radius:var(--cl-r) 0 0 var(--cl-r); background:var(--cl-pri); color:#fff; }
.cl-quick__today .cl-now{ margin-bottom:14px; font-size:15px; }
.cl-quick__today .cl-now.is-closed i{ background:#CBD5E1; }
.cl-quick__today dl{ margin:0; font-size:14px; }
.cl-quick__today dl div{ display:flex; justify-content:space-between; gap:12px; padding:5px 0; border-bottom:1px solid rgba(255,255,255,.16); }
.cl-quick__today dl div:last-child{ border:0; }
.cl-quick__today dt{ color:#CFE0FF; }
.cl-quick__today dd{ margin:0; font-weight:700; }
.cl-quick__today .is-today dt,.cl-quick__today .is-today dd{ color:#fff; font-weight:800; }
.cl-quick__today .is-today dt::before{ content:"오늘 "; color:#B4E56E; }
.cl-quick__menu{ display:grid; grid-template-columns:repeat(4,1fr); margin:0; padding:0; list-style:none; background:#fff; border-radius:0 var(--cl-r) var(--cl-r) 0; box-shadow:var(--cl-sh-lg); }
.cl-quick__menu li + li{ border-left:1px solid var(--cl-line); }
.cl-quick__menu a{ display:flex; flex-direction:column; justify-content:center; gap:4px; height:100%; padding:26px 22px; transition:background .2s; }
.cl-quick__menu a:hover{ background:var(--cl-pri-l); }
.cl-quick__menu i{ margin-bottom:8px; font-size:24px; color:var(--cl-pri); }
.cl-quick__menu b{ font-size:17px; }
.cl-quick__menu span{ font-size:13.5px; color:var(--cl-mut); }

/* 섹션 */
.cl-sec{ padding:100px 0; }
.cl-sec--soft{ background:var(--cl-soft); }
.cl-sechd{ display:flex; justify-content:space-between; align-items:flex-end; gap:20px; margin-bottom:40px; }
.cl-sechd h2{ font-size:clamp(28px,3.2vw,38px); font-weight:800; }
.cl-sechd p:not(.cl-eyebrow){ margin:12px 0 0; max-width:620px; color:var(--cl-body); }
.cl-sechd--center{ flex-direction:column; align-items:center; text-align:center; }
.cl-sechd--inline{ align-items:center; margin-bottom:18px; }
.cl-sechd--inline h2{ font-size:24px; }
.cl-sechd__act{ display:flex; align-items:center; gap:8px; }
.cl-arrow{ width:42px; height:42px; border:1px solid var(--cl-line); border-radius:50%; background:#fff; color:var(--cl-body); }
.cl-arrow:hover{ border-color:var(--cl-pri); color:var(--cl-pri); }

/* 진료과목 */
.cl-dept{ display:grid; grid-template-columns:repeat(4,1fr); gap:20px; margin:0; padding:0; list-style:none; }
.cl-dept a{ position:relative; display:flex; flex-direction:column; height:100%; overflow:hidden; border:1px solid var(--cl-line); border-radius:18px; background:#fff; transition:transform .25s, box-shadow .25s, border-color .25s; }
.cl-dept a:hover{ transform:translateY(-4px); box-shadow:var(--cl-sh-lg); border-color:transparent; }
.cl-dept__img{ display:block; aspect-ratio:4/3; overflow:hidden; }
.cl-dept__img img{ width:100%; height:100%; object-fit:cover; transition:transform .5s; }
.cl-dept a:hover .cl-dept__img img{ transform:scale(1.05); }
.cl-dept__ico{ display:grid; place-items:center; width:52px; height:52px; margin:-26px 0 0 22px; position:relative; border-radius:14px; background:var(--cl-pri); color:#fff; font-size:21px; box-shadow:0 8px 20px rgba(26,99,224,.35); }
.cl-dept h3{ margin:14px 22px 2px; font-size:21px; font-weight:800; }
.cl-dept a > p{ margin:0 22px; font-size:14.5px; color:var(--cl-mut); }
.cl-dept ul{ display:flex; flex-wrap:wrap; gap:6px; margin:16px 22px 0; padding:0; list-style:none; }
.cl-dept ul li{ padding:3px 10px; border-radius:99px; background:var(--cl-pri-l); font-size:12.5px; font-weight:600; color:var(--cl-pri-d); }
.cl-dept__go{ margin:auto 22px 22px; padding-top:18px; font-size:14px; font-weight:700; color:var(--cl-pri); }

/* 의료진 */
.cl-docs{ display:grid; grid-template-columns:repeat(3,1fr); gap:24px; margin:0; padding:0; list-style:none; }
.cl-docs li{ overflow:hidden; border-radius:18px; background:#fff; box-shadow:var(--cl-sh); }
.cl-docs__photo{ display:block; aspect-ratio:4/4.2; overflow:hidden; background:var(--cl-sky); }
.cl-docs__photo img{ width:100%; height:100%; object-fit:cover; object-position:top; }
.cl-docs__body{ padding:22px 24px 26px; }
.cl-docs__title{ display:inline-block; padding:2px 10px; border-radius:6px; background:var(--cl-pri-l); font-size:12.5px; font-weight:800; color:var(--cl-pri); }
.cl-docs h3{ margin:10px 0 2px; font-size:24px; font-weight:800; }
.cl-docs__field{ margin:0; font-weight:600; color:var(--cl-body); }
.cl-docs__note{ margin:4px 0 0; font-size:14px; color:var(--cl-mut); }

/* 숫자 */
.cl-trust{ padding:54px 0; background:linear-gradient(120deg,var(--cl-pri-d),var(--cl-pri)); color:#fff; }
.cl-trust__in{ display:grid; grid-template-columns:repeat(4,1fr); }
.cl-trust__in div{ text-align:center; }
.cl-trust__in div + div{ border-left:1px solid rgba(255,255,255,.2); }
.cl-trust strong{ display:block; font-size:clamp(34px,4vw,48px); font-weight:800; line-height:1.1; letter-spacing:-.03em; }
.cl-trust strong small{ margin-left:2px; font-size:.5em; font-weight:700; }
.cl-trust span{ font-size:14px; color:#CFE0FF; }

/* 시설 */
.cl-rooms{ display:grid; grid-template-columns:repeat(3,1fr); gap:16px; margin:0; padding:0; list-style:none; }
.cl-rooms a{ position:relative; display:block; aspect-ratio:4/3; overflow:hidden; border-radius:16px; background:var(--cl-sky); }
.cl-rooms img{ width:100%; height:100%; object-fit:cover; transition:transform .5s; }
.cl-rooms a:hover img{ transform:scale(1.05); }
.cl-rooms span{ position:absolute; left:0; right:0; bottom:0; padding:48px 20px 18px; background:linear-gradient(transparent,rgba(8,24,56,.8)); color:#fff; }
.cl-rooms b{ display:block; font-size:18px; }
.cl-rooms small{ font-size:13.5px; color:#DCE7F7; }

/* 후기 */
.cl-reviews{ display:flex; gap:20px; margin:0; padding:4px 2px 12px; list-style:none; overflow-x:auto; scroll-snap-type:x mandatory; scrollbar-width:none; }
.cl-reviews::-webkit-scrollbar{ display:none; }
.cl-reviews li{ flex:0 0 calc((100% - 60px) / 4); scroll-snap-align:start; }
.cl-review{ display:flex; flex-direction:column; height:100%; padding:26px 24px; border-radius:16px; background:#fff; box-shadow:var(--cl-sh); transition:transform .2s; }
.cl-review:hover{ transform:translateY(-3px); }
.cl-review__q{ font-size:22px; color:var(--cl-sky); }
.cl-review__q i{ color:#BFD6FB; }
.cl-review h3{ margin:12px 0 8px; font-size:17px; font-weight:800; }
.cl-review p{ flex:1; margin:0; font-size:14.5px; color:var(--cl-body); }
.cl-review__meta{ display:flex; flex-wrap:wrap; align-items:center; gap:6px; margin-top:18px; font-size:13px; color:var(--cl-mut); }
.cl-review__meta em{ padding:2px 9px; border-radius:99px; background:var(--cl-pri-l); font-style:normal; font-weight:700; color:var(--cl-pri-d); }

/* 공지 · 칼럼 */
.cl-newsgrid{ display:grid; grid-template-columns:1fr 1.3fr; gap:56px; }
.cl-newslist{ margin:0; padding:0; list-style:none; border-top:2px solid var(--cl-ink); }
.cl-newslist a{ display:flex; justify-content:space-between; gap:16px; padding:17px 4px; border-bottom:1px solid var(--cl-line); }
.cl-newslist a:hover span{ color:var(--cl-pri); }
.cl-newslist span{ overflow:hidden; white-space:nowrap; text-overflow:ellipsis; font-weight:500; }
.cl-newslist time{ flex:none; font-size:14px; color:var(--cl-mut); }
.cl-colcards{ display:grid; grid-template-columns:repeat(3,1fr); gap:14px; margin:0; padding:0; list-style:none; }
.cl-colcards a{ display:block; height:100%; overflow:hidden; border:1px solid var(--cl-line); border-radius:14px; }
.cl-colcards img{ display:block; width:100%; aspect-ratio:3/2; object-fit:cover; }
.cl-colcards span{ display:block; padding:14px 16px 18px; }
.cl-colcards em{ display:block; margin-bottom:4px; font-style:normal; font-size:12.5px; font-weight:800; color:var(--cl-pri); }
.cl-colcards b{ display:-webkit-box; -webkit-line-clamp:2; -webkit-box-orient:vertical; overflow:hidden; font-size:15.5px; line-height:1.5; }
.cl-colcards a:hover b{ color:var(--cl-pri); }

/* FAQ */
.cl-faqwrap{ display:grid; grid-template-columns:1fr 2fr; gap:56px; }
.cl-faq details{ margin-bottom:10px; border-radius:14px; background:#fff; box-shadow:0 2px 8px rgba(15,23,42,.04); }
.cl-faq summary{ display:flex; justify-content:space-between; align-items:center; gap:14px; padding:20px 24px; cursor:pointer; list-style:none; }
.cl-faq summary::-webkit-details-marker{ display:none; }
.cl-faq summary h3{ font-size:17px; font-weight:700; }
.cl-faq summary h3 span{ margin-right:8px; color:var(--cl-pri); font-weight:800; }
.cl-faq summary i{ color:var(--cl-mut); transition:transform .2s; }
.cl-faq details[open] summary i{ transform:rotate(180deg); }
.cl-faq details p{ margin:0; padding:0 24px 22px 50px; color:var(--cl-body); }

/* 예약 + 오시는 길 */
.cl-reserve__in{ display:grid; grid-template-columns:1fr 1.15fr; gap:48px; align-items:start; }
.cl-reserve__info h2{ font-size:clamp(28px,3.2vw,38px); font-weight:800; }
.cl-reserve__note{ margin:18px 0 32px; padding:0; list-style:none; }
.cl-reserve__note li{ display:flex; gap:10px; padding:4px 0; color:var(--cl-body); }
.cl-reserve__note i{ margin-top:6px; font-size:13px; color:var(--cl-pri); }
.cl-visit{ padding:24px; border-radius:18px; background:var(--cl-soft); }
.cl-visit h3{ margin-bottom:14px; font-size:20px; font-weight:800; }
.cl-visit__map{ display:block; overflow:hidden; border-radius:12px; border:1px solid var(--cl-line); }
.cl-visit__map img{ display:block; width:100%; }
.cl-visit dl{ margin:16px 0 0; font-size:14.5px; }
.cl-visit dl div{ display:grid; grid-template-columns:52px 1fr; gap:10px; padding:5px 0; }
.cl-visit dt{ font-weight:800; color:var(--cl-pri-d); }
.cl-visit dd{ margin:0; color:var(--cl-body); }
.cl-visit__btns{ display:flex; gap:8px; margin:16px 0 0; }
.cl-visit__btns a{ flex:1; padding:11px; border-radius:10px; background:#fff; border:1px solid var(--cl-line); text-align:center; font-size:14px; font-weight:700; }
.cl-visit__btns a:hover{ border-color:var(--cl-pri); color:var(--cl-pri); }
.cl-visit__btns i{ font-size:11px; }

.cl-form{ display:grid; grid-template-columns:1fr 1fr; gap:16px 18px; padding:34px; border-radius:20px; background:#fff; border:1px solid var(--cl-line); box-shadow:var(--cl-sh-lg); }
.cl-form__row{ display:flex; flex-direction:column; gap:6px; min-width:0; }
.cl-form__row.is-wide,.cl-form__agree,.cl-form__err,.cl-form__submit,.cl-form__done{ grid-column:1 / -1; }
.cl-form label,.cl-form__lb{ font-size:14px; font-weight:700; }
.cl-form label b,.cl-form__lb b{ color:#DC2626; }
.cl-form input[type=text],.cl-form input[type=tel],.cl-form input[type=date],.cl-form select,.cl-form textarea{ width:100%; min-height:48px; padding:11px 14px; border:1px solid #CBD5E1; border-radius:10px; background:#fff; font:inherit; font-size:15px; color:var(--cl-ink); }
.cl-form textarea{ resize:vertical; }
.cl-form input:focus,.cl-form select:focus,.cl-form textarea:focus{ border-color:var(--cl-pri); outline:0; box-shadow:0 0 0 3px rgba(26,99,224,.15); }
.cl-chips{ display:flex; flex-wrap:wrap; gap:8px; }
.cl-chips label{ position:relative; }
.cl-chips input{ position:absolute; opacity:0; }
.cl-chips span{ display:block; padding:9px 15px; border:1px solid #CBD5E1; border-radius:99px; font-size:14px; font-weight:600; cursor:pointer; }
.cl-chips input:checked + span{ background:var(--cl-pri); border-color:var(--cl-pri); color:#fff; }
.cl-chips input:focus-visible + span{ outline:3px solid var(--cl-pri); outline-offset:2px; }
.cl-form__captcha #captcha{ display:flex; flex-wrap:wrap; align-items:center; gap:6px; }
.cl-form__captcha #captcha input{ width:120px !important; min-height:40px; padding:6px 10px; border:1px solid #CBD5E1; border-radius:8px; }
.cl-form__agree{ font-size:14px; }
.cl-form__agree label{ font-weight:600; }
.cl-form__agree a{ margin-left:8px; font-size:13px; color:var(--cl-pri); text-decoration:underline; }
.cl-form__agree p{ margin:6px 0 0; font-size:12.5px; color:var(--cl-mut); }
.cl-form__err{ margin:0; padding:10px 14px; border-radius:8px; background:#FEF2F2; color:#B91C1C; font-size:14px; }
.cl-form__err[hidden]{ display:none; }
.cl-form__done{ margin:0; padding:14px 16px; border-radius:10px; background:#ECFDF5; color:#047857; font-weight:700; }
.cl-form__submit{ width:100%; }
.cl-form__submit:disabled{ opacity:.6; cursor:wait; }

/* 푸터 */
.cl-footer{ padding:64px 0 36px; background:var(--cl-dark); color:#A9B7CC; font-size:14px; }
.cl-footer__top{ display:grid; grid-template-columns:1.4fr 1fr 1fr; gap:40px; padding-bottom:40px; border-bottom:1px solid rgba(255,255,255,.1); }
.cl-brand--dark .cl-brand__name b{ color:#fff; }
.cl-footer__slogan{ margin:18px 0; }
.cl-footer h2{ margin-bottom:14px; font-size:15px; font-weight:800; color:#fff; }
.cl-footer__hours dl{ margin:0; }
.cl-footer__hours dl div{ display:flex; justify-content:space-between; gap:10px; padding:3px 0; }
.cl-footer__hours dd{ margin:0; color:#E2E8F0; }
.cl-footer__hours p{ margin:10px 0 0; color:#FCA5A5; }
.cl-footer__tel{ display:block; font-size:28px; font-weight:800; color:#fff; letter-spacing:-.02em; }
.cl-footer__call p{ margin:6px 0 14px; }
.cl-footer__rsv{ display:inline-flex; align-items:center; gap:8px; padding:10px 16px; border-radius:10px; background:var(--cl-pri); color:#fff; font-weight:700; }
.cl-footer__bottom{ padding-top:26px; }
.cl-footer__nav{ display:flex; flex-wrap:wrap; gap:6px 20px; margin:0 0 12px; padding:0; list-style:none; }
.cl-footer__nav b{ color:#fff; }
.cl-footer__co,.cl-footer__co p{ margin:0; }
.cl-footer__co a{ color:#93C5FD; text-decoration:underline; }
.cl-footer__copy{ margin:12px 0 0; font-size:12.5px; color:#64748B; }
.cl-footer .adp-sns a{ color:#CBD5E1; }

/* 하단 버튼 · 위로 */
.cl-dock{ display:none; }
.cl-top{ position:fixed; right:22px; bottom:24px; z-index:70; width:48px; height:48px; border-radius:50%; background:#fff; color:var(--cl-pri); box-shadow:var(--cl-sh-lg); opacity:0; visibility:hidden; transition:opacity .2s, visibility .2s; }
.cl-top.is-on{ opacity:1; visibility:visible; }

/* 서브 페이지 */
.cl-sbanner{ position:relative; padding:74px 0 70px; overflow:hidden; background:var(--cl-pri-d); color:#fff; }
.cl-sbanner__bg{ position:absolute; inset:0; background-size:cover; background-position:center 40%; opacity:.28; }
.cl-sbanner::after{ content:""; position:absolute; inset:0; background:linear-gradient(90deg,rgba(15,62,158,.92),rgba(26,99,224,.55)); }
.cl-sbanner .cl-wrap{ position:relative; z-index:2; }
.cl-sbanner__crumb{ margin:0 0 10px; font-size:14px; color:#CFE0FF; }
.cl-sbanner__crumb i{ margin:0 6px; font-size:11px; }
.cl-sbanner h1{ font-size:clamp(28px,3.6vw,42px); font-weight:800; }
.cl-lnb{ border-bottom:1px solid var(--cl-line); background:#fff; }
.cl-lnb ul{ display:flex; gap:4px; margin:0; padding:0; list-style:none; overflow-x:auto; scrollbar-width:none; }
.cl-lnb ul::-webkit-scrollbar{ display:none; }
.cl-lnb a{ display:block; padding:17px 18px; border-bottom:3px solid transparent; font-size:15px; font-weight:600; color:var(--cl-mut); white-space:nowrap; }
.cl-lnb a:hover{ color:var(--cl-ink); }
.cl-lnb a.is-on{ border-bottom-color:var(--cl-pri); color:var(--cl-pri); font-weight:800; }
.cl-sub{ padding:64px 0 100px; min-height:50vh; }

/* 내용 페이지 (bbs/content.php basic 스킨) — 제목은 배너에 있으므로 숨긴다 */
#ctt > header{ position:absolute; width:1px; height:1px; overflow:hidden; clip:rect(0 0 0 0); }
#ctt{ margin:0; }
#ctt_con{ padding:0; font-size:16px; line-height:1.8; color:var(--cl-body); }
#ctt_con h2{ margin:56px 0 18px; font-size:28px; font-weight:800; color:var(--cl-ink); }
#ctt_con h2:first-child{ margin-top:0; }
#ctt_con h3{ margin:34px 0 12px; font-size:21px; font-weight:800; color:var(--cl-ink); }
#ctt_con p{ margin:0 0 14px; }
#ctt_con table{ width:100%; border-collapse:collapse; margin:10px 0 24px; font-size:15px; }
#ctt_con th,#ctt_con td{ padding:14px 16px; border-bottom:1px solid var(--cl-line); text-align:left; vertical-align:top; }
#ctt_con thead th{ background:var(--cl-pri-l); color:var(--cl-pri-d); font-weight:800; border-top:2px solid var(--cl-pri); }
#ctt_con tbody th{ width:28%; color:var(--cl-ink); font-weight:700; }
#ctt_con ul{ padding-left:20px; }

.clp-lead{ display:grid; grid-template-columns:1fr 1fr; gap:48px; align-items:center; margin-bottom:24px; }
.clp-lead img{ display:block; width:100%; border-radius:20px; box-shadow:var(--cl-sh-lg); }
.clp-lead .clp-kicker{ margin:0 0 8px; font-size:12.5px; font-weight:800; letter-spacing:.2em; color:var(--cl-pri); }
.clp-lead h2{ margin-top:0 !important; font-size:clamp(26px,3vw,36px) !important; line-height:1.35; }
.clp-sign{ margin-top:24px !important; font-weight:700; color:var(--cl-ink); }
.clp-cards{ display:grid; grid-template-columns:repeat(3,1fr); gap:18px; margin:18px 0 30px; padding:0 !important; list-style:none; }
.clp-cards li{ padding:24px; border-radius:16px; background:var(--cl-soft); }
.clp-cards b{ display:block; margin-bottom:6px; font-size:17px; color:var(--cl-ink); }
.clp-cards li::before{ content:attr(data-n); display:block; margin-bottom:10px; font-size:13px; font-weight:800; color:var(--cl-pri); }
.clp-doc{ display:grid; grid-template-columns:300px 1fr; gap:40px; padding:36px 0; border-bottom:1px solid var(--cl-line); }
.clp-doc:first-of-type{ padding-top:0; }
.clp-doc img{ display:block; width:100%; border-radius:18px; background:var(--cl-sky); }
.clp-doc h2{ margin:0 0 4px !important; font-size:30px !important; }
.clp-doc h2 small{ margin-left:10px; padding:3px 10px; border-radius:6px; background:var(--cl-pri-l); font-size:14px; color:var(--cl-pri); vertical-align:middle; }
.clp-doc .clp-field{ margin:0 0 18px; font-weight:700; color:var(--cl-pri-d); }
.clp-doc .clp-cols{ display:grid; grid-template-columns:1fr 1fr; gap:10px 30px; }
.clp-doc h3{ margin:8px 0 8px !important; font-size:16px !important; }
.clp-doc ul{ margin:0; padding-left:18px; font-size:15px; }
.clp-steps{ display:grid; grid-template-columns:repeat(4,1fr); gap:14px; margin:18px 0 30px; padding:0 !important; list-style:none; counter-reset:s; }
.clp-steps li{ position:relative; padding:24px 20px; border:1px solid var(--cl-line); border-radius:16px; counter-increment:s; }
.clp-steps li::before{ content:"STEP " counter(s); display:block; margin-bottom:8px; font-size:12.5px; font-weight:800; color:var(--cl-pri); }
.clp-steps b{ display:block; margin-bottom:4px; color:var(--cl-ink); }
.clp-box{ margin:20px 0; padding:22px 24px; border-radius:14px; background:var(--cl-pri-l); color:var(--cl-pri-d); }
.clp-box b{ color:var(--cl-pri-d); }
.clp-tags{ display:flex; flex-wrap:wrap; gap:8px; margin:0 0 20px; padding:0 !important; list-style:none; }
.clp-tags li{ padding:6px 14px; border-radius:99px; background:#fff; border:1px solid var(--cl-line); font-size:14px; font-weight:600; }
.clp-cta{ display:flex; flex-wrap:wrap; justify-content:space-between; align-items:center; gap:14px; margin-top:48px; padding:28px 32px; border-radius:18px; background:var(--cl-dark); color:#fff; }
.clp-cta p{ margin:0 !important; font-size:18px; font-weight:700; }
.clp-cta a{ display:inline-flex; align-items:center; gap:8px; padding:12px 20px; border-radius:10px; background:var(--cl-pri); color:#fff !important; font-weight:700; }
.clp-map img{ display:block; width:100%; border-radius:16px; border:1px solid var(--cl-line); }

/* 반응형 */
@media (max-width:1100px){
  .cl-gnb > ul > li > a{ padding:26px 12px; font-size:15px; }
  .cl-dept{ grid-template-columns:repeat(2,1fr); }
  .cl-reviews li{ flex-basis:calc((100% - 40px) / 3); }
  .cl-quick__menu{ grid-template-columns:repeat(2,1fr); }
  .cl-quick__menu li:nth-child(3){ border-left:0; }
  .cl-quick__menu li:nth-child(n+3){ border-top:1px solid var(--cl-line); }
}
@media (max-width:960px){
  .cl-gnb,.cl-header__act .cl-btn{ display:none; }
  .cl-burger{ display:flex; }
  .cl-header__in{ height:64px; justify-content:space-between; }
  .cl-quick__in{ grid-template-columns:1fr; }
  .cl-quick__today{ border-radius:var(--cl-r) var(--cl-r) 0 0; }
  .cl-quick__menu{ border-radius:0 0 var(--cl-r) var(--cl-r); }
  .cl-docs{ grid-template-columns:1fr 1fr 1fr; gap:14px; }
  .cl-newsgrid,.cl-faqwrap,.cl-reserve__in{ grid-template-columns:1fr; gap:40px; }
  .cl-footer__top{ grid-template-columns:1fr 1fr; }
  .cl-footer__brand{ grid-column:1 / -1; }
  .clp-lead{ grid-template-columns:1fr; gap:28px; }
  .clp-doc{ grid-template-columns:220px 1fr; gap:24px; }
  .clp-steps{ grid-template-columns:1fr 1fr; }
}
@media (max-width:640px){
  body{ font-size:15px; padding-bottom:64px; }
  .cl-wrap{ padding:0 16px; }
  .cl-topbar__r span{ display:none; }
  .cl-hero{ height:500px; }
  .cl-hero__slide::after{ background:linear-gradient(180deg,rgba(8,24,56,.3),rgba(8,24,56,.8)); }
  .cl-hero__copy{ justify-content:flex-end; padding-bottom:130px; }
  .cl-hero__ctrl{ bottom:84px; }
  .cl-quick{ margin-top:-56px; }
  .cl-quick__today{ padding:20px; }
  .cl-quick__menu a{ padding:18px 16px; }
  .cl-quick__menu i{ font-size:20px; margin-bottom:4px; }
  .cl-quick__menu b{ font-size:15.5px; }
  .cl-quick__menu span{ font-size:12.5px; }
  .cl-sec{ padding:68px 0; }
  .cl-sechd{ flex-direction:column; align-items:flex-start; margin-bottom:28px; }
  .cl-sechd--center{ align-items:center; }
  .cl-sechd--inline{ flex-direction:row; align-items:center; }
  .cl-dept{ grid-template-columns:1fr 1fr; gap:12px; }
  .cl-dept h3{ margin:12px 14px 2px; font-size:17px; }
  .cl-dept a > p{ margin:0 14px; font-size:13px; }
  .cl-dept ul{ display:none; }
  .cl-dept__ico{ width:42px; height:42px; margin:-21px 0 0 14px; font-size:17px; }
  .cl-dept__go{ margin:auto 14px 16px; padding-top:10px; font-size:13px; }
  .cl-docs{ grid-template-columns:1fr; }
  .cl-docs li{ display:grid; grid-template-columns:120px 1fr; align-items:center; }
  .cl-docs__photo{ aspect-ratio:3/4; height:100%; }
  .cl-docs__body{ padding:16px 18px; }
  .cl-docs h3{ font-size:20px; }
  .cl-trust__in{ grid-template-columns:1fr 1fr; gap:24px 0; }
  .cl-trust__in div:nth-child(3){ border-left:0; }
  .cl-rooms{ grid-template-columns:1fr 1fr; gap:10px; }
  .cl-rooms span{ padding:30px 12px 10px; }
  .cl-rooms b{ font-size:14.5px; }
  .cl-rooms small{ display:none; }
  .cl-reviews li{ flex-basis:82%; }
  .cl-sechd__act .cl-arrow{ display:none; }
  .cl-colcards{ grid-template-columns:1fr; }
  .cl-colcards a{ display:grid; grid-template-columns:110px 1fr; align-items:center; }
  .cl-colcards img{ width:110px; height:84px; aspect-ratio:auto; object-fit:cover; }
  .cl-faq summary{ padding:16px 18px; }
  .cl-faq summary h3{ font-size:15.5px; }
  .cl-faq details p{ padding:0 18px 18px 18px; }
  .cl-form{ grid-template-columns:1fr; padding:22px 18px; }
  .cl-footer__top{ grid-template-columns:1fr; gap:28px; }
  .cl-dock{ position:fixed; left:0; right:0; bottom:0; z-index:90; display:grid; grid-template-columns:1fr 1fr 1.3fr; background:#fff; border-top:1px solid var(--cl-line); box-shadow:0 -6px 20px rgba(15,23,42,.08); transition:transform .25s; }
  .cl-dock.is-off{ transform:translateY(100%); }
  .cl-dock a{ display:flex; flex-direction:column; align-items:center; justify-content:center; gap:2px; height:62px; font-size:12.5px; font-weight:700; }
  .cl-dock a i{ font-size:17px; color:var(--cl-pri); }
  .cl-dock a.is-pri{ background:var(--cl-pri); color:#fff; }
  .cl-dock a.is-pri i{ color:#fff; }
  .cl-top{ bottom:78px; right:14px; width:42px; height:42px; }
  .cl-sbanner{ padding:48px 0 44px; }
  .cl-lnb a{ padding:14px 12px; font-size:14px; }
  .cl-sub{ padding:40px 0 70px; }
  #ctt_con h2{ font-size:23px; }
  .clp-cards{ grid-template-columns:1fr; }
  .clp-doc{ grid-template-columns:1fr; }
  .clp-doc img{ max-width:260px; }
  .clp-doc .clp-cols{ grid-template-columns:1fr; }
  .clp-steps{ grid-template-columns:1fr; }
  #ctt_con table{ font-size:14px; }
  #ctt_con th,#ctt_con td{ padding:11px 10px; }
  .clp-cta{ padding:22px; }
}