@charset "utf-8";
/* ═══════════════════════════════════════════════════════════════
guamez-refresh.css 2026-08-18
괌이지 메인 개편 — 시안(a3.html) CSS 를 그대로 옮긴 것
되돌리려면 test/menu1.asp 의 한 줄만 지우면 된다.
기존 CSS(new_style · menu_style · traveler-icon)는 한 줄도 고치지 않았다.
🔴 아래 이름은 건드리지 않는다 — script.asp 가 잡는다
#sFrm #intHotel #intDay #strGolfCode #intMeal #intAir #intShuttle #intCurPage
.sidebar .sidebar-menu .sidebar-buttons .apply-filter-button .reset-button
.sidebar-overlay .mobile-menu-toggle .product-list .hotel-list .loading-overlay
button[name="thisHotel"] 외 5종 · .selected
═══════════════════════════════════════════════════════════════ */
/* Pretendard — 시안이 이 글꼴을 전제로 자간을 잡았다 */
@import url("https://cdn.jsdelivr.net/gh/orioncactus/pretendard@v1.3.9/dist/web/variable/pretendardvariable-dynamic-subset.min.css");
/* ── 실서버 뼈대를 시안 조건에 맞춘다 ─────────────────────── */
body.p3page{
font-family:"Pretendard Variable",Pretendard,-apple-system,BlinkMacSystemFont,
system-ui,"Apple SD Gothic Neo","Malgun Gothic",sans-serif;
font-size:15px;line-height:1.6;letter-spacing:-.015em;
-webkit-font-smoothing:antialiased;background:#F8FAFC;color:#334155;
}
/* .wrapper 가 1300px 고정폭이라 좌측 네비를 세우면 잘린다 */
body.p3page .wrapper{
display:flex;align-items:flex-start;
width:auto;max-width:1420px;margin:0 auto;padding:0;
}
body.p3page .wrapper .product-list{
flex:1;min-width:0;width:auto;padding:0 26px;background:transparent;
}
/* 상품 목록을 시안 그리드로. #hotel-list 는 JS 가 잡으므로 이름은 그대로 둔다 */
body.p3page #hotel-list.hotel-list{
display:grid;grid-template-columns:repeat(auto-fill,minmax(228px,1fr));
gap:14px;width:auto;padding:0;margin:0 0 30px;background:transparent;
}
body.p3page .mobile-menu{display:none}
@media (max-width:720px){
body.p3page .wrapper .product-list{padding:0 14px}
body.p3page #hotel-list.hotel-list{grid-template-columns:minmax(0,1fr);gap:10px}
}
/* ═══════════════════════════════════════════════════════════════
여기부터는 시안 mock.css 원본이다. 손대지 않고 그대로 옮겼다
═══════════════════════════════════════════════════════════════ */
@charset "utf-8";
/* ============================================================
괌이지 메인 시안 공통 CSS — 2026-08-11
A-1 / A-2 는 기본 톤, A-2-1 은 로 색만 갈린다
실서버 CSS 는 안 쓴다. 사이드바를 새로 짜서 원본과 충돌하기 때문이다
============================================================ */
:root{
--paper:#ffffff;
--ground:#f1f4f8;
--ink:#141a20;
--ink-2:#5a6673;
--ink-3:#8d98a5;
--line:#e4e9ef;
--line-2:#eef2f6;
--brand:#0B69D4;
--brand-ink:#0a55ac;
--brand-soft:#eaf2fe;
--teal:#0E8A7D;
--sale:#e8542f;
--lime:#5bb543;
--amber:#B08213;
--amber-soft:#fdf6e6;
--r-s:8px;
--r-m:10px;
--r-l:14px;
--shadow-1:0 1px 2px rgba(16,32,48,.05), 0 2px 8px rgba(16,32,48,.05);
--shadow-2:0 4px 10px rgba(16,32,48,.08), 0 12px 28px rgba(16,32,48,.10);
--shadow-3:0 14px 40px rgba(8,24,40,.24);
--side-w:288px;
--main-w:1000px;
--wrap-w:1300px;
--font:"Pretendard Variable",Pretendard,-apple-system,BlinkMacSystemFont,system-ui,
"Apple SD Gothic Neo","Malgun Gothic",sans-serif;
--font-num:var(--font);
}
/* Tropical Ease — 디자인 시트 팔레트 */
body[data-tone="tropical"]{
--ground:#F8F9FA;
--ink:#1F1A14;
--ink-2:#6b6055;
--ink-3:#9c9285;
--line:#e9e2d8;
--line-2:#f2ece4;
--brand:#7D5A2B; /* Primary */
--brand-ink:#5E4320;
--brand-soft:#F6EFE5;
--teal:#1B5E3F; /* CTA 딥그린 */
--sale:#F9A825; /* Secondary */
--lime:#8BC34A; /* Tertiary */
--font-num:"Plus Jakarta Sans",var(--font);
}
*{box-sizing:border-box}
html,body{margin:0;padding:0}
body{
background:var(--ground);
color:var(--ink);
font-family:var(--font);
font-size:15px;
line-height:1.6;
letter-spacing:-.015em;
-webkit-font-smoothing:antialiased;
}
a{color:inherit;text-decoration:none}
button{font-family:inherit;letter-spacing:inherit}
img{display:block;max-width:100%}
:focus-visible{outline:2px solid var(--brand);outline-offset:2px}
.num{font-family:var(--font-num);font-variant-numeric:tabular-nums}
/* ───────────── 목업 라벨 (실제 배포에는 안 들어간다) ───────────── */
.mk-bar{
background:#10161c;color:#fff;font-size:13px;padding:10px 22px;display:flex;
align-items:center;gap:14px;flex-wrap:wrap;
}
.mk-bar b{color:#7ED9C9;font-weight:700}
.mk-bar a{color:#9fc7ff;border-bottom:1px solid rgba(159,199,255,.4)}
.mk-head{
max-width:var(--wrap-w);margin:24px auto 6px;padding:0 6px;
display:flex;align-items:baseline;gap:11px;
}
.mk-head span{
background:var(--teal);color:#fff;border-radius:4px;padding:3px 10px;
font-size:12px;font-weight:700;letter-spacing:0;flex:0 0 auto;
}
.mk-head h2{margin:0;font-size:16px;font-weight:700}
.mk-note{max-width:var(--wrap-w);margin:0 auto 16px;padding:0 6px;font-size:13px;color:var(--ink-2)}
.mk-gap{height:64px}
/* ───────────── 껍데기 ───────────── */
.wrap{
width:var(--wrap-w);margin:0 auto;background:var(--paper);
border:1px solid var(--line);border-radius:var(--r-l);
box-shadow:var(--shadow-1);display:flex;min-height:640px;
/* overflow:hidden 을 걸면 사이드바 sticky 가 죽는다 */
}
.main{width:var(--main-w);padding:0;background:var(--paper);
border-radius:0 var(--r-l) var(--r-l) 0;min-width:0}
.main-in{padding:20px 24px 30px}
/* A-1 — 히어로는 좌측 메뉴 오른쪽을 다 쓰고, 그 아래 콘텐츠는 안쪽으로 좁힌다.
폭이 한 단 좁아지는 것만으로 양옆 여백이 눈에 들어온다 */
#a1 .main-in > .bnrow,
#a1 .main-in > .sec,
#a1 .main-in > .hotelchips,
#a1 .main-in > .vgrid,
#a1 .main-in > .morewrap,
#a1 .main-in > .askbar{max-width:1014px;margin-left:auto;margin-right:auto}
#a1 .main-in > .sec{margin-top:32px}
#a1 .main-in > .bnrow{margin-top:22px}
.wrap.col{flex-direction:column}
.wrap.col .uhead{border-radius:var(--r-l) var(--r-l) 0 0}
.wrap.col .main{border-radius:0 0 var(--r-l) 0}
.wrap.col .rail{border-radius:0 0 0 var(--r-l)}
/* 히어로 하단에 겹쳐 앉는 프로모션 알약 */
.pills-over{margin-top:-24px;position:relative;z-index:2;padding:0 26px;margin-bottom:6px}
/* ───────────── 상단 탭 ───────────── */
.tabs{
display:flex;align-items:stretch;gap:2px;border-bottom:1px solid var(--line);
padding:0 24px;background:var(--paper);position:relative;
}
.tabs a{
display:flex;align-items:center;gap:7px;padding:16px 18px 14px;
font-size:15px;font-weight:500;color:var(--ink-2);position:relative;
border-bottom:3px solid transparent;transition:color .15s,border-color .15s;
}
.tabs a:hover{color:var(--ink)}
.tabs a.on{color:var(--brand);font-weight:700;border-bottom-color:var(--brand)}
.tabs a svg{width:17px;height:17px;flex:0 0 auto}
.tabs .sp{margin-left:auto;display:flex;align-items:center;gap:16px;font-size:13px;color:var(--ink-2)}
.tabs .sp a{padding:0;border:0;font-size:13px;font-weight:400}
.tabs .sp a:hover{color:var(--brand)}
/* ───────────── 사이드바 ───────────── */
.side{
width:var(--side-w);flex:0 0 var(--side-w);
background:var(--paper);border-right:1px solid var(--line);
border-radius:var(--r-l) 0 0 var(--r-l);
display:flex;flex-direction:column;
/* 스크롤을 내려도 필터와 검색 버튼이 따라온다. 사이드바 안에서만 스크롤된다 */
position:sticky;top:0;align-self:flex-start;max-height:100vh;
}
.side-top{padding:20px 20px 14px;flex:0 0 auto}
.side-logo{display:flex;align-items:center;gap:8px;margin-bottom:14px}
.side-logo img{height:30px;width:auto}
.side-lead{
background:var(--brand-soft);border-radius:var(--r-m);padding:12px 13px;
font-size:13px;line-height:1.55;color:var(--brand-ink);position:relative;
}
body[data-tone="tropical"] .side-lead{color:var(--brand-ink)}
.side-lead b{font-weight:700}
.side-body{flex:1 1 auto;padding:4px 20px 20px;overflow-y:auto;scrollbar-width:thin}
.side-body::-webkit-scrollbar{width:7px}
.side-body::-webkit-scrollbar-thumb{background:#d6dce4;border-radius:4px}
.fset{padding:16px 0 4px;border-top:1px solid var(--line-2)}
.fset:first-child{border-top:0;padding-top:6px}
.fset > h4{
margin:0 0 10px;font-size:12px;font-weight:700;color:var(--ink-3);
letter-spacing:.02em;display:flex;align-items:center;justify-content:space-between;
}
.fset > h4 em{font-style:normal;font-weight:500;color:var(--brand);font-size:11px}
/* 칩 */
.chips{display:flex;flex-wrap:wrap;gap:6px}
.chip{
border:1px solid var(--line);background:var(--paper);color:var(--ink-2);
border-radius:var(--r-s);padding:7px 11px;font-size:13px;font-weight:500;
cursor:pointer;transition:all .14s ease;line-height:1.2;
}
.chip:hover{border-color:var(--brand);color:var(--brand);background:var(--brand-soft)}
.chip.on{
background:var(--brand);border-color:var(--brand);color:#fff;font-weight:600;
box-shadow:0 2px 8px color-mix(in srgb,var(--brand) 34%,transparent);
}
/* 세그먼트 — 투숙일 */
.seg{display:flex;border:1px solid var(--line);border-radius:var(--r-s);overflow:hidden}
.seg button{
flex:1;border:0;border-left:1px solid var(--line);background:var(--paper);
padding:9px 0;font-size:13px;font-weight:500;color:var(--ink-2);cursor:pointer;
transition:background .14s,color .14s;
}
.seg button:first-child{border-left:0}
.seg button:hover{background:var(--brand-soft);color:var(--brand)}
.seg button.on{background:var(--brand);color:#fff;font-weight:700}
/* 골프장 — 원형 사진 + 이름 */
.courses{display:flex;flex-direction:column;gap:3px}
.course{
display:flex;align-items:center;gap:10px;padding:8px 6px 8px 11px;border-radius:var(--r-s);
cursor:pointer;border:1px solid transparent;transition:all .14s;
}
.course:hover{background:var(--brand-soft);border-color:color-mix(in srgb,var(--brand) 22%,transparent)}
.course.on{background:var(--brand-soft);border-color:var(--brand)}
.course .th{
width:34px;height:34px;border-radius:50%;flex:0 0 auto;overflow:hidden;
border:2px solid var(--paper);box-shadow:0 0 0 1px var(--line);
}
.course.on .th{box-shadow:0 0 0 2px var(--brand)}
.course .th img{width:100%;height:100%;object-fit:cover}
.course .tx{flex:1;min-width:0} /* 이름·설명 묶음. 없으면 두 줄이 한 줄로 붙는다 */
.course .nm{display:block;font-size:13.5px;font-weight:600;color:var(--ink);line-height:1.3}
.course .sb{display:block;font-size:11px;color:var(--ink-3);line-height:1.35;
white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
/* 체크 동그라미 대신 홀 깃발. 고르면 깃발이 꽂힌다 */
.course .ck{
margin-left:auto;width:26px;height:26px;flex:0 0 auto;border:0;border-radius:0;
background:transparent no-repeat center / 22px 22px;
background-image:url("data:image/svg+xml;utf8,");
transition:background-image .14s;
}
.course.on .ck{
background-image:url("data:image/svg+xml;utf8,");
}
.course:hover .ck{
background-image:url("data:image/svg+xml;utf8,");
}
.course.on:hover .ck{
background-image:url("data:image/svg+xml;utf8,");
}
/* 단독 페이지는 시트 파랑을 쓴다 */
.p3page .course.on .ck,
.p3page .course.on:hover .ck{
background-image:url("data:image/svg+xml;utf8,");
}
/* 하단 CTA */
.side-cta{
flex:0 0 auto;background:var(--paper);border-top:1px solid var(--line);
border-radius:0 0 0 var(--r-l);
padding:14px 20px 18px;display:flex;flex-direction:column;gap:8px;
}
.btn-primary{
border:0;border-radius:var(--r-m);background:var(--brand);color:#fff;
font-size:15px;font-weight:700;padding:13px 0;cursor:pointer;
box-shadow:0 4px 14px color-mix(in srgb,var(--brand) 32%,transparent);
transition:transform .12s,box-shadow .12s,background .15s;
}
.btn-primary:hover{background:var(--brand-ink);transform:translateY(-1px);
box-shadow:0 7px 20px color-mix(in srgb,var(--brand) 38%,transparent)}
.btn-ghost{
border:1px solid var(--line);border-radius:var(--r-m);background:var(--paper);
color:var(--ink-2);font-size:13.5px;padding:10px 0;cursor:pointer;transition:all .14s;
}
.btn-ghost:hover{border-color:var(--ink-3);color:var(--ink)}
.side-cta .cnt{font-size:12px;color:var(--ink-3);text-align:center}
.side-cta .cnt b{color:var(--brand);font-weight:700}
/* ───────────── 히어로 ───────────── */
.hero{
position:relative;border-radius:var(--r-l);overflow:hidden;
height:352px;display:flex;align-items:center;justify-content:center;
}
.hero.tall{height:470px}
.hero-bg{position:absolute;inset:0;background-size:cover;background-position:center 62%;transform:scale(1.02)}
.hero-veil{
position:absolute;inset:0;
background:linear-gradient(180deg,rgba(6,22,36,.56) 0%,rgba(6,22,36,.16) 40%,rgba(6,22,36,.58) 100%);
}
/* 밝은 사진(항공샷 초록) 위에서는 흰 글씨가 안 읽힌다. 중앙을 한 번 더 눌러 준다 */
.hero-veil.strong{
background:
radial-gradient(120% 78% at 50% 46%, rgba(4,20,34,.62) 0%, rgba(4,20,34,.30) 58%, rgba(4,20,34,.12) 100%),
linear-gradient(180deg,rgba(4,20,34,.50) 0%,rgba(4,20,34,.22) 38%,rgba(4,20,34,.56) 100%);
}
/* 접이식 상세 조건 — 사이드바가 길어져 검색 버튼이 화면 밖으로 밀리는 것을 막는다 */
.fset.fold{padding:14px 0 6px}
.fset.fold > summary{
list-style:none;cursor:pointer;display:flex;align-items:center;justify-content:space-between;
font-size:12px;font-weight:700;color:var(--ink-3);letter-spacing:.02em;padding:2px 0;
}
.fset.fold > summary::-webkit-details-marker{display:none}
.fset.fold > summary i{
width:7px;height:7px;border-right:1.6px solid var(--ink-3);border-bottom:1.6px solid var(--ink-3);
transform:rotate(45deg);margin-top:-3px;transition:transform .18s;
}
.fset.fold[open] > summary{color:var(--brand)}
.fset.fold[open] > summary i{transform:rotate(-135deg);margin-top:2px;border-color:var(--brand)}
.fset.fold .inner{padding-top:11px;display:flex;flex-direction:column;gap:14px}
.fset.fold .inner > div > h5{
margin:0 0 7px;font-size:11.5px;font-weight:600;color:var(--ink-3);
}
.hero-in{position:relative;width:100%;padding:0 32px;text-align:center}
.hero-eyebrow{
display:inline-block;background:rgba(255,255,255,.16);backdrop-filter:blur(6px);
border:1px solid rgba(255,255,255,.34);color:#fff;font-size:12px;font-weight:600;
border-radius:30px;padding:4px 13px;margin-bottom:13px;letter-spacing:.01em;
}
.hero h1{
margin:0 0 9px;color:#fff;font-size:34px;font-weight:800;letter-spacing:-.035em;
line-height:1.24;text-shadow:0 2px 16px rgba(0,0,0,.4);text-wrap:balance;
}
.hero .sub{
margin:0 0 22px;color:rgba(255,255,255,.93);font-size:15px;
text-shadow:0 1px 9px rgba(0,0,0,.45);
}
.hero-trust{
margin-top:18px;display:flex;justify-content:center;color:rgba(255,255,255,.95);
font-size:13px;text-shadow:0 1px 8px rgba(0,0,0,.5);
}
.hero-trust span{padding:0 15px;position:relative;display:inline-flex;align-items:center;gap:6px}
.hero-trust span+span::before{
content:"";position:absolute;left:0;top:5px;bottom:5px;width:1px;background:rgba(255,255,255,.4);
}
/* 장점 줄 — 아이콘을 문구 앞에 세운다. 사진 위에서는 밝은 하늘색이 가장 잘 읽힌다 */
.hero-trust svg{width:15px;height:15px;flex:0 0 auto;color:#93d5ff}
body[data-tone="tropical"] .hero-trust svg{color:#ffd479}
.hero-trust b{font-weight:600}
/* 원본 로고는 캔버스 여백이 절반이라(96px 중 그림이 50px) 18px 로 넣으면 9px 로 보였다.
여백을 걷은 파일로 바꾸고 옆 아이콘(15px)보다 크게 잡는다.
Ch 말풍선 대신 TALK 앱 아이콘을 쓴다 — 손님이 한눈에 알아보는 쪽이다
(2026-08-21 CTO 「ch로고말고 다른거로해야지」) */
.hero-trust .kk{width:20px;height:20px;flex:0 0 auto;border-radius:0}
/* 검색 카드 */
.hsearch{
max-width:812px;margin:0 auto;background:var(--paper);border-radius:var(--r-m);
box-shadow:var(--shadow-3);display:flex;align-items:stretch;padding:7px;text-align:left;
}
.hf{
flex:1;min-width:0;padding:9px 10px 9px 15px;position:relative;cursor:pointer;
border-radius:var(--r-s);transition:background .14s;
}
.hf+.hf{box-shadow:inset 1px 0 0 var(--line-2)}
.hf:hover{background:var(--brand-soft)}
.hf label{display:block;font-size:11px;color:var(--ink-3);margin-bottom:2px;cursor:pointer}
.hf .v{font-size:15px;font-weight:600;color:var(--ink);white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.hf .v.ph{color:var(--ink-3);font-weight:400}
.hf .cr{
position:absolute;right:12px;top:50%;margin-top:-3px;width:7px;height:7px;
border-right:1.6px solid var(--ink-3);border-bottom:1.6px solid var(--ink-3);
transform:rotate(45deg);
}
.hbtn{
flex:0 0 auto;margin-left:6px;border:0;border-radius:var(--r-s);background:var(--brand);
color:#fff;font-size:16px;font-weight:700;padding:0 30px;cursor:pointer;
display:flex;align-items:center;gap:7px;transition:background .15s;
}
.hbtn:hover{background:var(--brand-ink)}
.hbtn svg{width:17px;height:17px}
/* 아이콘 탭 (A-2) */
.itabs{
max-width:812px;margin:0 auto 10px;background:var(--paper);border-radius:var(--r-m) var(--r-m) 0 0;
display:flex;justify-content:center;gap:4px;padding:10px 8px 0;
}
.itab{
display:flex;flex-direction:column;align-items:center;gap:5px;padding:8px 20px 11px;
font-size:12.5px;font-weight:600;color:var(--ink-3);border-bottom:2.5px solid transparent;
cursor:pointer;transition:color .15s;
}
.itab svg{width:23px;height:23px}
.itab:hover{color:var(--ink-2)}
.itab.on{color:var(--brand);border-bottom-color:var(--brand)}
.hstack{max-width:812px;margin:0 auto}
.hstack .itabs{margin-bottom:0;box-shadow:var(--shadow-3)}
.hstack .hsearch{border-radius:0 0 var(--r-m) var(--r-m);max-width:none}
/* ───────────── 프로모션 알약 ───────────── */
.pills{display:grid;grid-template-columns:repeat(3,1fr);gap:10px;max-width:812px;margin:0 auto}
.pill{
display:flex;align-items:center;gap:11px;background:rgba(255,255,255,.95);
border-radius:var(--r-s);padding:8px 13px 8px 8px;box-shadow:0 5px 16px rgba(6,22,36,.16);
transition:transform .14s;
}
.pill:hover{transform:translateY(-2px)}
.pill img{width:46px;height:46px;border-radius:6px;object-fit:cover;flex:0 0 auto}
.pill .t{display:block;font-size:11px;font-weight:700;color:var(--brand)}
.pill .n{display:block;font-size:13px;font-weight:500;color:var(--ink);
white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
/* 프로모션 배너 2장 (A-2) */
.banners{display:grid;grid-template-columns:1fr 1fr;gap:14px;margin:18px 0 4px}
.banner{position:relative;border-radius:var(--r-m);overflow:hidden;box-shadow:var(--shadow-1)}
.banner img{width:100%;height:148px;object-fit:cover}
.banner .cap{
position:absolute;inset:0;padding:18px 20px;display:flex;flex-direction:column;
justify-content:center;background:linear-gradient(90deg,rgba(8,20,32,.72) 0%,rgba(8,20,32,.18) 78%);color:#fff;
}
.banner .cap b{font-size:17px;font-weight:800;letter-spacing:-.03em;margin-bottom:3px}
.banner .cap span{font-size:12.5px;color:rgba(255,255,255,.88)}
.banner .bd{
align-self:flex-start;background:var(--sale);color:#fff;font-size:11px;font-weight:700;
border-radius:4px;padding:2px 8px;margin-bottom:8px;
}
/* ───────────── 섹션 제목 ───────────── */
.sec{display:flex;align-items:flex-end;justify-content:space-between;margin:34px 0 14px}
.sec h3{margin:0;font-size:20px;font-weight:800;letter-spacing:-.035em}
.sec p{margin:3px 0 0;font-size:13px;color:var(--ink-2)}
.sec .more{font-size:13px;color:var(--ink-2);display:flex;align-items:center;gap:4px}
.sec .more:hover{color:var(--brand)}
.sec .more i{
width:6px;height:6px;border-right:1.5px solid currentColor;border-top:1.5px solid currentColor;
transform:rotate(45deg);display:inline-block;
}
/* ───────────── 골프장 5곳 ───────────── */
.courserow{display:grid;grid-template-columns:repeat(5,1fr);gap:12px}
.ccard{
position:relative;border-radius:var(--r-m);overflow:hidden;cursor:pointer;
box-shadow:var(--shadow-1);transition:transform .18s,box-shadow .18s;
}
.ccard:hover{transform:translateY(-3px);box-shadow:var(--shadow-2)}
.ccard img{width:100%;height:118px;object-fit:cover;transition:transform .5s}
.ccard:hover img{transform:scale(1.06)}
.ccard .g{
position:absolute;inset:0;
background:linear-gradient(180deg,rgba(4,16,28,.30) 0%,rgba(4,16,28,0) 42%,rgba(4,16,28,.74) 100%);
}
.ccard .bd{
position:absolute;top:8px;left:8px;background:rgba(255,255,255,.94);color:var(--ink);
font-size:10.5px;font-weight:700;border-radius:20px;padding:2.5px 8px;
}
.ccard .nm{position:absolute;left:11px;right:11px;bottom:9px;color:#fff}
.ccard .nm b{display:block;font-size:15px;font-weight:800;letter-spacing:-.035em;
text-shadow:0 1px 8px rgba(0,0,0,.5)}
.ccard .nm span{display:block;font-size:11px;color:rgba(255,255,255,.86);margin-top:1px}
.ccard.on{outline:2.5px solid var(--brand);outline-offset:0}
.ccard.on::after{
content:"";position:absolute;left:50%;bottom:-7px;width:14px;height:14px;
background:var(--brand);transform:translateX(-50%) rotate(45deg);border-radius:2px;
}
/* ───────────── 세로 쇼츠 카드 ───────────── */
.vgrid{display:grid;grid-template-columns:repeat(4,1fr);gap:13px}
.vgrid.c3{grid-template-columns:repeat(3,1fr)}
.vcard{
position:relative;aspect-ratio:9/16;border-radius:var(--r-l);overflow:hidden;
background:#e7ebf0;cursor:pointer;box-shadow:var(--shadow-1);
transition:transform .2s,box-shadow .2s;
}
.vcard:hover{transform:translateY(-4px);box-shadow:var(--shadow-2)}
.vcard > img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;transition:transform .6s}
.vcard:hover > img{transform:scale(1.07)}
/* 하단을 더 눌렀다. 밝은 사진(흰 건물·구름) 위에서 흰 글자가 묻히고 있었다 */
.vcard .g{
position:absolute;inset:0;transition:background .2s ease;
background:linear-gradient(180deg,rgba(2,12,22,.44) 0%,rgba(2,12,22,0) 22%,
rgba(2,12,22,.14) 38%,rgba(2,12,22,.70) 64%,rgba(2,12,22,.93) 100%);
}
.vtop{position:absolute;top:10px;left:10px;right:10px;display:flex;gap:5px;flex-wrap:wrap}
.vchip{
background:rgba(255,255,255,.94);color:#18222c;font-size:10.5px;font-weight:700;
border-radius:20px;padding:3px 8px;backdrop-filter:blur(3px);
}
.vchip.sale{background:var(--sale);color:#fff}
.vbody{position:absolute;left:13px;right:13px;bottom:13px;color:#fff}
/* 골프장 이름은 이 상품의 정체성이다. 가격 다음으로 먼저 읽혀야 한다.
색으로 세우면 가격과 싸우므로 알약 형태와 굵기로 세운다 */
.vtag{display:flex;flex-wrap:wrap;gap:4px;margin-bottom:7px;letter-spacing:-.03em}
.vtag span{
font-size:11px;font-weight:700;color:#fff;
background:rgba(255,255,255,.18);border:1px solid rgba(255,255,255,.42);
border-radius:20px;padding:2.5px 8px;backdrop-filter:blur(2px);
}
.vcard:hover .vtag span{background:#eaeff6;border-color:transparent;color:#2c3a4a}
@media (hover:none){
.vtag span{background:#eaeff6;border-color:transparent;color:#2c3a4a}
}
body[data-tone="tropical"] .vtag span{color:#fff}
.vname{
font-size:15.5px;font-weight:800;line-height:1.34;letter-spacing:-.04em;margin-bottom:6px;
text-shadow:0 1px 10px rgba(0,0,0,.55);
}
.vmeta{
font-size:11.5px;color:rgba(255,255,255,.82);line-height:1.5;
padding-bottom:9px;margin-bottom:9px;border-bottom:1px solid rgba(255,255,255,.22);
}
.vprice{display:flex;align-items:baseline;gap:6px;flex-wrap:wrap;font-family:var(--font-num)}
.vprice .was{font-size:11.5px;color:rgba(255,255,255,.62);text-decoration:line-through}
.vprice .now{font-size:20px;font-weight:800;letter-spacing:-.045em;line-height:1}
.vprice .won{font-size:12px;font-weight:600;margin-left:-3px}
.vgrid.c3 .vname{font-size:17px}
.vgrid.c3 .vprice .now{font-size:23px}
/* ───────────── 해시태그 — 호텔이 무엇으로 좋은지 한 줄 ───────────── */
.vhash{
display:flex;flex-wrap:wrap;gap:7px;margin-bottom:7px;
font-size:11px;font-weight:600;color:#bfe9dd;letter-spacing:-.02em;
}
body[data-tone="tropical"] .vhash{color:#e2efb6}
.p3page .vhash{color:#cfe8a8}
/* ───────────── 카드 호버 — 글자 판이 흰색으로 반전된다 ─────────────
사진 밝기에 따라 흰 글자가 묻힌다. 마우스를 올리면 판을 깔아 글자를 반전시킨다.
터치 기기에서는 호버가 없으므로 아래에서 흰 판을 기본값으로 둔다 */
.vbody{
padding:0;border-radius:12px;
transition:background .2s ease, box-shadow .2s ease, padding .2s ease, left .2s ease, right .2s ease;
}
.vcard:hover .vbody{
left:8px;right:8px;bottom:8px;padding:13px 14px 14px;
background:var(--paper);
box-shadow:0 8px 26px rgba(6,20,34,.30);
color:var(--ink);
}
.vcard:hover .g{background:linear-gradient(180deg,rgba(2,12,22,.34) 0%,rgba(2,12,22,0) 30%,rgba(2,12,22,.30) 100%)}
/* 판 안에서 색은 가격에만 준다. 다 파랗게 하면 눈이 어디를 볼지 모른다 */
.vcard:hover .vname{color:var(--ink);text-shadow:none}
.vcard:hover .vhash{color:var(--ink-2);font-weight:500}
.vcard:hover .vmeta{color:var(--ink-2);border-bottom-color:var(--line)}
.vcard:hover .vprice .now{color:var(--brand)}
.vcard:hover .vprice .was{color:var(--ink-3)}
.vcard:hover .vprice .won{color:var(--ink-2)}
/* ───────────── 구성 칩 — 「3박 4일 · 조식불포함」이 회색 두 줄이라 안 읽혔다 ─────────────
같은 정보를 칩으로 끊어 놓으면 눈이 하나씩 잡아낸다 */
.vfeat{display:flex;flex-wrap:wrap;gap:5px;margin:0 0 9px}
.vfeat span{
font-size:10.5px;font-weight:600;letter-spacing:-.03em;line-height:1.5;
background:rgba(255,255,255,.16);border:1px solid rgba(255,255,255,.38);
color:#fff;border-radius:5px;padding:3px 7px;
}
.vcard:hover .vfeat span{
background:#f1f5f9;border-color:transparent;color:#4c5a6b;
}
/* 색을 의미로 나눈다. 초록이 많은 카드는 포함이 많은 상품이라는 뜻이 된다.
사진 위에서는 색칩이 지저분해지므로 판이 깔린 뒤에만 색을 준다 */
.vcard:hover .vfeat span.ok{background:#e6f6ed;color:#137a4b}
.vcard:hover .vfeat span.mute{background:#f1f5f9;color:#78859a}
.vcard:hover .vfeat span.day{background:#fdf2e2;color:#8a6510}
.vcard:hover .vfeat span.night{background:#eaedfb;color:#3b4a91}
.vcard:hover .vfeat span.grade{background:#eaf2fe;color:#1a5cb8}
@media (hover:none){
.vfeat span.ok{background:#e6f6ed;color:#137a4b}
.vfeat span.mute{background:#f1f5f9;color:#78859a}
.vfeat span.day{background:#fdf2e2;color:#8a6510}
.vfeat span.night{background:#eaedfb;color:#3b4a91}
.vfeat span.grade{background:#eaf2fe;color:#1a5cb8}
}
/* 가격은 색이 아니라 크기로 이긴다.
파랑은 누를 수 있는 것의 색이라 가격에 쓰면 클릭 대상으로 오해받는다.
할인 신호는 앰버 배지 · 취소선 · 큰 숫자 셋으로 이미 충분하다 */
.vcard:hover .vprice{margin-top:2px}
.vcard:hover .vprice .now{color:#141a20;font-size:24px;letter-spacing:-.05em}
.vcard:hover .vprice .was{color:#9aa7b5;font-size:12px}
.vcard:hover .vprice .won{color:#5b6b7f}
/* 호버에서만 뜨는 버튼. 채움으로 두면 가격과 무게가 같아져 둘 다 죽는다 */
.vgo{
display:none;margin-top:11px;background:transparent;color:var(--brand);
border:1.5px solid var(--brand);
font-size:12.5px;font-weight:700;border-radius:7px;padding:9px 0;text-align:center;
letter-spacing:-.02em;transition:background .14s,color .14s;
}
.vcard:hover .vgo{display:block}
.vcard:hover .vgo:hover{background:var(--brand);color:#fff}
@media (hover:none){
.vfeat span{background:#f1f5f9;border-color:transparent;color:#4c5a6b}
.vtag{color:var(--ink-3)}
.vhash{color:var(--ink-2);font-weight:500}
.vprice .now{color:#141a20;font-size:24px}
.vprice .was{color:#9aa7b5}
.vprice .won{color:#5b6b7f}
.vgo{display:block}
}
/* 손가락으로 쓰는 기기 — 흰 판을 처음부터 깔아 둔다 */
@media (hover:none){
.vbody{
left:9px;right:9px;padding:12px 13px 13px;
background:var(--paper);color:var(--ink);box-shadow:0 4px 16px rgba(6,20,34,.20);
}
.vtag{color:var(--brand)}
.vname{color:var(--ink);text-shadow:none}
.vhash{color:var(--brand)}
.vmeta{color:var(--ink-2);border-bottom-color:var(--line)}
.vprice .now{color:var(--ink)}
.vprice .was{color:var(--ink-3)}
.vprice .won{color:var(--ink-2)}
}
/* 정렬바 · 호텔 칩 */
.sortbar{
display:flex;justify-content:space-between;align-items:center;
padding:2px 0 12px;font-size:14px;
}
.sortbar .cnt{font-weight:600}
.sortbar .cnt em{font-style:normal;font-weight:400;color:var(--ink-3);margin-left:3px}
.sortbar .srt{
font-size:13px;color:var(--ink-2);border:1px solid var(--line);border-radius:var(--r-s);
padding:7px 12px;display:flex;align-items:center;gap:7px;cursor:pointer;
}
.sortbar .srt:hover{border-color:var(--ink-3)}
.sortbar .srt i{
width:6px;height:6px;border-right:1.5px solid var(--ink-3);border-bottom:1.5px solid var(--ink-3);
transform:rotate(45deg);display:inline-block;margin-top:-3px;
}
.hotelchips{display:flex;gap:7px;overflow-x:auto;padding-bottom:16px;scrollbar-width:none}
.hotelchips::-webkit-scrollbar{display:none}
.hotelchips button{
flex:0 0 auto;border:1px solid var(--line);background:var(--paper);border-radius:30px;
padding:7px 15px;font-size:13px;color:var(--ink-2);cursor:pointer;transition:all .14s;
}
.hotelchips button:hover{border-color:var(--brand);color:var(--brand)}
.hotelchips button.on{background:var(--ink);border-color:var(--ink);color:#fff;font-weight:600}
/* ───────────── A-2 좌측 카테고리 네비 ───────────── */
.rail{
width:150px;flex:0 0 150px;background:var(--paper);border-right:1px solid var(--line);
padding:18px 0;
}
.rail-g{padding:0 0 14px;margin-bottom:14px;border-bottom:1px solid var(--line-2)}
.rail-g:last-child{border-bottom:0;margin-bottom:0}
.rail a{
display:flex;align-items:center;gap:10px;padding:9px 18px;font-size:13.5px;
color:var(--ink-2);font-weight:500;transition:background .14s,color .14s;
}
.rail a:hover{background:var(--brand-soft);color:var(--brand)}
.rail a.on{background:var(--brand-soft);color:var(--brand);font-weight:700}
.rail a svg{width:18px;height:18px;flex:0 0 auto}
.rail .lbl{
padding:0 18px 6px;font-size:11px;font-weight:700;color:var(--ink-3);letter-spacing:.03em;
}
.main.wide{width:calc(var(--wrap-w) - 150px)}
/* ───────────── 유틸 헤더 (A-2) ───────────── */
.uhead{
display:flex;align-items:center;gap:18px;padding:12px 24px;
border-bottom:1px solid var(--line);background:var(--paper);
}
.uhead img.logo{height:30px}
.uhead .ubox{
flex:1;max-width:330px;display:flex;align-items:center;gap:8px;
border:1.5px solid var(--brand);border-radius:var(--r-s);padding:7px 10px;
}
.uhead .ubox input{
border:0;outline:0;flex:1;font-family:inherit;font-size:13.5px;color:var(--ink);
background:transparent;
}
.uhead .ubox button{
border:0;background:var(--brand);color:#fff;border-radius:5px;width:30px;height:26px;
display:flex;align-items:center;justify-content:center;cursor:pointer;
}
.uhead .ubox button svg{width:15px;height:15px}
.uhead .unav{margin-left:auto;display:flex;align-items:center;gap:18px;font-size:13px;color:var(--ink-2)}
.uhead .unav a:hover{color:var(--brand)}
/* ───────────── A-3 · 검색이 상단 밴드로 빠지는 판 ─────────────
사진을 흐리게 깔고 브랜드색을 덮어 시원하게. 검색툴은 밴드 밖으로 걸쳐 나온다 */
.full{background:var(--paper)}
.full .inner{max-width:var(--wrap-w);margin:0 auto;padding:0 24px}
/* ───────────── A-3 — 히어로를 띄우고 바탕을 회색으로 ─────────────
전폭으로 깔면 여백이 사라진다. 여백은 비워서 생기는 게 아니라 구획으로 생긴다.
상단바 아래로 회색 바탕을 보이게 하고 히어로와 목록을 각각 라운드 판으로 세운다 */
#a3 .wrap.col{background:var(--paper)}
.t3row{display:flex;align-items:stretch}
.t3side{width:174px;flex:0 0 174px;border-right:1px solid var(--line);padding:15px 0}
.t3side .gp{padding-bottom:11px;margin-bottom:11px;border-bottom:1px solid var(--line-2)}
.t3side .gp:last-child{border-bottom:0;margin-bottom:0;padding-bottom:0}
/* 항목 열한 개가 히어로보다 아래로 내려가면 안 된다. 간격을 줄여 촘촘하게 */
.t3side a{
display:flex;align-items:center;gap:10px;padding:7px 18px;
font-size:13px;font-weight:500;color:var(--ink);letter-spacing:-.03em;
transition:background .14s,color .14s;
}
.t3side a svg{width:18px;height:18px;flex:0 0 auto;color:var(--ink-3);transition:color .14s}
.t3side a:hover{background:var(--brand-soft);color:var(--brand)}
.t3side a:hover svg{color:var(--brand)}
.t3side a.on{background:var(--brand-soft);color:var(--brand);font-weight:700}
.t3side a.on svg{color:var(--brand)}
.t3main{flex:1;min-width:0;padding-bottom:10px}
/* 히어로는 파란 판이다. 사진을 꽉 채우면 주변 흰 여백이 잡아먹혀 답답해진다 */
.hero.band{
width:auto;height:246px;margin:20px 26px 0;border-radius:14px;
}
/* 파란 판으로만 덮으면 골프장이 사라진다. 왼쪽만 진하게 눌러 글자를 받치고
오른쪽으로 갈수록 사진이 드러나게 한다. 트립닷컴도 판 오른쪽에 사진을 남긴다 */
#a3 .hero.band .hero-bg{opacity:1;filter:saturate(.9);background-position:center 58%}
#a3 .hero-veil.strong{
background:
linear-gradient(96deg,
rgba(7,54,134,.94) 0%, rgba(9,74,168,.88) 30%,
rgba(11,105,212,.62) 62%, rgba(12,120,190,.30) 100%),
linear-gradient(180deg, rgba(4,30,66,.30) 0%, rgba(4,30,66,0) 46%, rgba(4,30,66,.34) 100%);
}
body[data-tone="tropical"] #a3 .hero-veil.strong{
background:
linear-gradient(96deg,
rgba(18,60,40,.94) 0%, rgba(24,84,56,.88) 30%,
rgba(27,94,63,.60) 62%, rgba(48,110,60,.28) 100%),
linear-gradient(180deg, rgba(10,34,22,.30) 0%, rgba(10,34,22,0) 46%, rgba(10,34,22,.34) 100%);
}
.hero.band .hero-bg{filter:blur(1.5px) saturate(.86);transform:scale(1.06)}
.hero-veil.brand{
background:
linear-gradient(180deg, rgba(10,72,150,.90) 0%, rgba(11,105,212,.80) 46%, rgba(13,128,150,.86) 100%);
}
body[data-tone="tropical"] .hero-veil.brand{
background:linear-gradient(180deg, rgba(22,74,50,.92) 0%, rgba(27,94,63,.82) 48%, rgba(48,110,60,.88) 100%);
}
.hero.band h1{font-size:34px;margin-bottom:8px}
.hero.band .sub{margin-bottom:0;font-size:14.5px}
/* 검색툴이 아래를 46px 덮는다. 그만큼만 위로 올려 카피가 판 가운데 오게 한다 */
.hero.band .hero-in{padding-bottom:44px}
.hero.band .hero-trust{margin-top:13px;font-size:12.5px}
/* 목록은 히어로보다 안쪽에서 시작한다. 양옆 여백이 그대로 보이게 둔다 */
#a3 .full{background:transparent;padding:22px 0 40px}
#a3 .full .inner{
max-width:none;background:transparent;border:0;box-shadow:none;padding:0 44px;
}
#a3 .full .inner > .bnrow:first-child{margin-top:0}
#a3 .sec{margin-top:30px}
.sec h3 .cntbig{color:var(--brand);font-style:normal;font-weight:800}
body[data-tone="tropical"] .sec h3 .cntbig{color:var(--teal)}
.morewrap{text-align:center;padding:24px 0 6px}
.morewrap .btn-ghost{padding:12px 34px;border-radius:30px}
/* ───────────── 조건이 없을 때 받는 자리 ─────────────
목록이 곧 메인이면 스크롤 끝에서 손님이 갈 곳이 있어야 한다.
여행사 매출은 목록에 없는 조건을 문의로 받는 데서 나온다 */
.askbar{
margin-top:22px;display:flex;align-items:center;gap:22px;
background:var(--brand-soft);border:1px solid #cfe0f8;border-radius:14px;padding:20px 24px;
}
body[data-tone="tropical"] .askbar{background:var(--brand-soft);border-color:#e3d6c2}
.askbar .tx{flex:1;min-width:0}
.askbar .tx b{
display:block;font-size:16.5px;font-weight:800;letter-spacing:-.04em;color:var(--ink);
}
.askbar .tx span{
display:block;margin-top:5px;font-size:13.5px;line-height:1.6;color:var(--ink-2);
word-break:keep-all;
}
.askbar .bt{display:flex;gap:9px;flex:0 0 auto}
.askbar .bt a{
display:flex;align-items:center;gap:7px;font-size:13.5px;font-weight:700;
border-radius:8px;padding:12px 19px;letter-spacing:-.02em;
}
.askbar .bt svg{width:17px;height:17px}
.askbar .bt .pri{background:var(--brand);color:#fff}
.askbar .bt .pri:hover{background:#0a5cbb}
.askbar .bt .sec2{background:var(--paper);color:var(--ink);border:1.4px solid var(--line)}
.askbar .bt .sec2:hover{border-color:var(--brand);color:var(--brand)}
body[data-tone="tropical"] .askbar .bt .pri{background:var(--teal)}
/* 검색툴은 히어로보다 한 단 더 좁다. 히어로 → 검색툴 → 목록으로 폭이 좁아지는 계단이 여백을 만든다 */
.hstack.out{
width:auto;max-width:none;margin:-46px 128px 0;position:relative;z-index:3;
}
.hstack.out .itabs{max-width:none}
.trustline{width:100%}
.hstack.out .itabs{background:var(--paper);box-shadow:0 -2px 16px rgba(6,22,36,.10);padding:12px 8px 0}
.hstack.out .hsearch{box-shadow:0 16px 40px rgba(6,22,36,.20);padding:9px}
.hstack.out .hf{padding:11px 12px 11px 17px}
.hstack.out .hf .v{font-size:15.5px}
.hstack.out .hbtn{font-size:16.5px;padding:0 30px}
.trustline{
display:flex;justify-content:center;gap:0;margin:18px 0 0;font-size:13px;color:var(--ink-2);
}
.trustline span{padding:0 16px;position:relative;display:inline-flex;align-items:center;gap:6px}
.trustline span+span::before{
content:"";position:absolute;left:0;top:4px;bottom:4px;width:1px;background:var(--line);
}
.trustline svg{width:15px;height:15px;flex:0 0 auto;color:var(--brand)}
body[data-tone="tropical"] .trustline svg{color:var(--teal)}
.vgrid.c5{grid-template-columns:repeat(5,1fr)}
.vgrid.c5 .vname{font-size:14.5px}
.vgrid.c5 .vprice .now{font-size:18px}
.courserow.c5wide .ccard img{height:132px}
/* ───────────── 프로모션 배너 2장 (원본 비율 그대로) ─────────────
CCP 배너 3:1 · 렌터카 배너 1.76:1 이라 폭을 1.7:1 로 두면 높이가 저절로 맞는다.
cover 로 자르지 않으니 사진 속 글자가 잘리지 않는다 */
.bnrow{display:grid;grid-template-columns:1.7fr 1fr;gap:14px;margin:18px 0 4px}
.bnrow a{
display:block;border-radius:12px;overflow:hidden;background:#eef2f7;
box-shadow:var(--shadow-1);transition:transform .18s,box-shadow .18s;
}
.bnrow a:hover{transform:translateY(-3px);box-shadow:var(--shadow-2)}
.bnrow img{width:100%;height:auto}
/* A-3 은 밴드 바로 아래에서 시작하므로 위 여백을 더 준다 */
.full .inner > .bnrow:first-child{margin-top:26px}
/* ───────────── 좌측 메뉴의 골프장 목록 ─────────────
골프장 소개를 첫 화면에서 뺐다. 대신 늘 보이는 좌측 메뉴에서 바로 들어간다 */
/* 21px 원형 사진은 코스 항공샷을 다 초록 동그라미로 만든다. 구별이 안 되면 장식일 뿐이라 뺐다.
상위 항목의 아이콘 폭(18 + gap 10)만큼 들여써서 계층을 글자 위치로 드러낸다 */
.rail-sub{padding:0 0 5px}
.rail-sub a{
display:block;padding:6px 18px 6px 46px;position:relative;
font-size:12.5px;font-weight:500;color:var(--ink-2);letter-spacing:-.03em;
}
.rail-sub a:hover{color:var(--brand);background:var(--brand-soft)}
.rail-sub .dot{
position:absolute;right:18px;top:50%;transform:translateY(-50%);
width:5px;height:5px;border-radius:50%;background:var(--sale);
}
body[data-tone="tropical"] .rail-sub a:hover{color:#7D5A2B}
/* A-2 필터 줄의 정보 버튼 — 고르는 것과 읽는 것을 한 줄에서 가른다 */
.course .ci{
width:17px;height:17px;border-radius:50%;border:1.3px solid #cfd8e2;background:#fff;
color:var(--ink-3);font-size:10.5px;font-weight:700;font-family:Georgia,serif;
display:flex;align-items:center;justify-content:center;flex:0 0 auto;margin:0 7px 0 4px;
}
.course .ci:hover{border-color:var(--brand);color:var(--brand)}
/* ═════════════ 단독 페이지 a3.html — 괌이지 색 ═════════════
파랑은 트립닷컴 색이다. 괌은 바다 청록과 잔디 초록이다.
비교 페이지 안에 세 판을 이어 붙이면 폭이 묶여 시원함이 안 나오므로 화면을 넓게 쓴다 */
/* 색은 디자인 시트를 따른다 — 파랑이 주색, 초록과 앰버는 배지에만 */
.p3page{
--brand:#1570EF;
--brand-ink:#0B4DA2;
--brand-soft:#EAF2FE;
--lime:#22B573;
--sale:#F59E0B;
--ink:#334155;
--ink-2:#5b6b7f;
--ink-3:#94a3b8;
--ground:#F8FAFC;
--line:#e6ecf3;
--line-2:#f1f5f9;
background:var(--paper);
}
/* 화면을 다 쓴다. 폭을 묶으면 사이드 메뉴와 상품 사이 공간이 나오지 않는다 */
.p3page .wrap{
width:auto;max-width:none;border:0;border-radius:0;box-shadow:none;
background:var(--paper);
}
.p3page .uhead{border-radius:0;padding:14px 30px}
/* 히어로만 오른쪽 끝까지 빠진다. 잘린 판이 화면 밖으로 이어지는 느낌을 만든다 */
.p3page .hero.band{
height:288px;margin:26px 0 0 28px;border-radius:16px 0 0 16px;
}
/* 히어로 — 왼쪽은 시트의 네이비로 눌러 글자를 받치고 오른쪽으로 갈수록 코스가 드러난다 */
.p3page .hero-veil.strong{
background:
linear-gradient(96deg,
rgba(8,42,92,.94) 0%, rgba(11,77,162,.86) 30%,
rgba(21,112,239,.50) 62%, rgba(21,112,239,.16) 100%),
linear-gradient(180deg, rgba(6,26,54,.24) 0%, rgba(6,26,54,0) 46%, rgba(6,26,54,.32) 100%);
}
.p3page .hero.band .hero-bg{opacity:1;filter:saturate(1);background-position:center 56%}
.p3page .hero.band h1{font-size:38px}
.p3page .hero.band .sub{font-size:15.5px}
.p3page .hero.band .hero-in{padding-bottom:56px}
/* 검색툴과 목록은 가운데로 모은다. 사이드 메뉴와 이 사이에 생기는 빈 공간이 시원함을 만든다 */
.p3page .hstack.out{width:100%;max-width:1040px;margin:-52px auto 0}
.p3page .trustline{max-width:1040px;margin:18px auto 0}
.p3page .full{padding:24px 0 56px}
.p3page .full .inner{max-width:1040px;margin:0 auto;padding:0}
/* 좌측 메뉴 — A-2 회색 판을 따른다. 스크롤해도 따라오게 sticky 로 세우고 글자를 키웠다 */
.p3page .t3row{align-items:flex-start}
/* 좌측은 A-2 필터를 그대로 옮겨 왔다. 스크롤해도 따라오게 세운다 */
.p3page .side.classic{
width:288px;flex:0 0 288px;border-radius:0;
position:sticky;top:0;align-self:flex-start;
max-height:100vh;
}
.p3page .side.classic .side-lead b{color:var(--brand)}
.p3page .side.classic .fset > h4 em{color:var(--brand)}
.p3page .side.classic .side-top{padding-top:18px}
/* 지금 쓰지 않는 메뉴형 사이드바. 되살릴 일이 있으면 클래스만 붙이면 된다 */
.p3page .t3side{
width:228px;flex:0 0 228px;background:#eef2f7;border-right:1px solid #dfe5ed;
padding:20px 0 26px;
position:sticky;top:0;align-self:flex-start;
max-height:100vh;overflow-y:auto;
}
.p3page .t3side::-webkit-scrollbar{width:6px}
.p3page .t3side::-webkit-scrollbar-thumb{background:#cbd5e1;border-radius:3px}
.p3page .t3side .gp{border-bottom-color:#dde4ec;padding-bottom:15px;margin-bottom:15px}
.p3page .t3side a{
position:relative;color:#33455c;padding:12px 22px;font-size:15px;font-weight:600;gap:12px;
}
.p3page .t3side a svg{width:20px;height:20px;color:#8595ab}
.p3page .t3side a:hover{background:rgba(255,255,255,.75);color:var(--brand)}
.p3page .t3side a:hover svg{color:var(--brand)}
.p3page .t3side a.on{
background:var(--paper);color:var(--brand);font-weight:700;
box-shadow:0 1px 3px rgba(15,40,80,.10);
}
.p3page .t3side a.on svg{color:var(--brand)}
.p3page .t3side a.on::before{
content:"";position:absolute;left:0;top:7px;bottom:7px;width:3px;
background:var(--brand);border-radius:0 2px 2px 0;
}
/* 배지는 시트대로 — 기간은 파랑, 라운드는 초록, 조식·특가는 앰버 */
.p3page .hero-trust svg{color:#9fd0ff}
.p3page .askbar{background:var(--brand-soft);border-color:#cfe0f8}
.p3page .sec h3 .cntbig{color:var(--brand)}
.p3page .vchip{background:var(--brand);color:#fff;backdrop-filter:none}
.p3page .vchip.sale{background:var(--sale);color:#fff}
.p3page .vchip.rd{background:var(--lime);color:#fff}
.p3page .vtag{color:#a9d4ff}
.p3page .vhash{color:#bfdcff}
.p3page .vcard:hover .vtag,.p3page .vcard:hover .vhash{color:var(--brand)}
/* 골프장 다섯 곳 — 배너 아래 작은 가로 카드 한 줄 */
.p3page .courserow{gap:12px}
.p3page .ccard img{height:110px}
.p3page .ccard .bd{background:rgba(255,255,255,.95);color:var(--ink);font-weight:600}
.p3page .ccard.on .bd{background:var(--sale);color:#fff}
.p3page .ccard .nm b{font-size:14.5px}
.p3page .ccard .nm span{font-size:10.5px}
/* ═════════════ 모바일 (a3.html) ═════════════
여행사 트래픽은 모바일이 대부분이다. 데스크톱 화면을 축소하는 게 아니라
손가락으로 쓰는 화면을 따로 짠다. 좌측 필터는 접고, 목록은 한 줄 가로 카드로 바꾼다 */
.mtopbar,.mfixed{display:none}
@media (max-width:720px){
/* 데스크톱 고정폭(1300px)이 살아 있으면 화면 밖으로 밀린다.
flex 컨테이너도 자식이 안 줄어들면 부모를 늘리므로 block 으로 바꾼다 */
html,body{overflow-x:hidden}
.p3page{padding:0 0 78px;overflow-x:hidden}
/* 데스크톱 폭이 여러 곳에 박혀 있어 한 번에 눌러 둔다 */
.p3page .wrap,
.p3page .t3row,
.p3page .t3main,
.p3page .full,
.p3page .full .inner,
.p3page .hstack.out,
.p3page .hsearch,
.p3page .itabs{
width:100% !important;max-width:100% !important;min-width:0 !important;
}
.p3page .wrap{display:block;min-height:0}
.p3page .t3row,.p3page .t3main{display:block}
/* 상단바 — 로고와 검색만 남긴다 */
.p3page .uhead{padding:11px 14px;gap:10px}
.p3page .uhead .unav{display:none}
.p3page .uhead img.logo{height:26px}
.p3page .uhead .ubox input{font-size:14px}
/* 좌측 필터는 접는다. 대신 조건 요약 줄을 세운다 */
.p3page .t3row{display:block}
.p3page .side.classic{display:none}
.p3page .t3main{padding:0}
.mtopbar{
display:flex;align-items:center;gap:10px;padding:10px 14px;
background:var(--paper);border-bottom:1px solid var(--line);
position:sticky;top:0;z-index:40;
}
.mtopbar .cond{flex:1;min-width:0}
.mtopbar .cond b{display:block;font-size:13.5px;font-weight:700;letter-spacing:-.03em;
white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.mtopbar .cond span{display:block;font-size:11.5px;color:var(--ink-2);margin-top:2px}
.mtopbar .edit{
flex:0 0 auto;font-size:12.5px;font-weight:700;color:var(--brand);
border:1.4px solid var(--brand);border-radius:20px;padding:7px 13px;
}
/* 히어로 — 카피만 남기고 낮춘다 */
.p3page .hero.band{height:186px;margin:0;border-radius:0}
.p3page .hero.band h1{font-size:21px;letter-spacing:-.05em;padding:0 16px}
.p3page .hero.band .sub{font-size:12.5px;padding:0 18px;line-height:1.5}
.p3page .hero.band .hero-in{padding-bottom:16px}
.p3page .hero.band .hero-trust{display:none}
/* 검색툴 — 필드를 세로로 쌓는다. 한 줄에 넣으면 글자가 잘린다 */
.p3page .hstack.out{margin:12px 14px 0;max-width:none}
.hstack.out .itabs{padding:4px 2px 0;overflow-x:auto;-webkit-overflow-scrolling:touch}
.itabs{border-radius:10px 10px 0 0}
.itab{padding:9px 12px;font-size:12px;gap:4px;white-space:nowrap}
.itab svg{width:16px;height:16px}
.hsearch{flex-direction:column;padding:8px;box-shadow:var(--shadow-2);border-radius:0 0 10px 10px}
.hf{padding:10px 12px;border-bottom:1px solid var(--line-2)}
.hf::after{display:none}
.hf .v{font-size:14.5px}
.hbtn{width:100%;padding:14px 0;margin-top:8px;font-size:15px;border-radius:8px}
.p3page .trustline{display:none}
/* 배너는 한 장씩 */
.p3page .full{padding:14px 0 30px}
.p3page .full .inner{padding:0 14px}
/* grid 의 1fr 은 minmax(auto,1fr) 이라 내용 최소 크기 밑으로 줄지 않는다.
원본 1400px 배너와 가로 카드가 칸을 밀어내고 있었다. minmax(0,1fr) 로 바꿔야 줄어든다 */
.bnrow{grid-template-columns:minmax(0,1fr);gap:10px;margin:0}
.bnrow a{min-width:0}
.bnrow img{max-width:100%}
/* 골프장 다섯 곳 — 옆으로 밀어 본다 */
.sec{margin:24px 0 11px}
.sec h3{font-size:17px}
.sec p{font-size:12px}
.courserow{
display:flex;gap:9px;overflow-x:auto;-webkit-overflow-scrolling:touch;
margin:0 -14px;padding:0 14px 4px;scroll-snap-type:x mandatory;
}
.courserow .ccard{flex:0 0 148px;scroll-snap-align:start}
.courserow .ccard img{height:92px}
.courserow::-webkit-scrollbar{display:none}
/* 조건 칩도 옆으로 */
.hotelchips{overflow-x:auto;flex-wrap:nowrap;margin:0 -14px;padding:0 14px 6px}
.hotelchips button{white-space:nowrap}
.srt{font-size:12.5px}
/* 상품 목록 — 세로 카드를 한 줄 가로 카드로 바꾼다 */
.vgrid,.vgrid.c5,.vgrid.c3{grid-template-columns:minmax(0,1fr);gap:10px}
.vcard{
aspect-ratio:auto;display:flex;align-items:stretch;min-width:0;
background:var(--paper);border:1px solid var(--line);box-shadow:none;
}
.vcard:hover{transform:none;box-shadow:none}
.vcard > img{
position:relative;inset:auto;flex:0 0 128px;width:128px;height:auto;min-height:138px;
}
.vcard:hover > img{transform:none}
.vcard .g{display:none}
.vcard .vtop{top:7px;left:7px;right:auto}
.vchip{font-size:9.5px;padding:2.5px 6px}
.vbody,.vcard:hover .vbody{
position:static;left:auto;right:auto;bottom:auto;flex:1;min-width:0;
padding:11px 12px 12px;background:transparent;box-shadow:none;color:var(--ink);
}
.vtag{color:var(--ink-3);font-size:10.5px;margin-bottom:3px}
.vname{font-size:14.5px;color:var(--ink);text-shadow:none;margin-bottom:5px}
.vhash{font-size:10.5px;color:var(--ink-2);margin-bottom:5px}
.vfeat{gap:4px;margin-bottom:7px}
.vfeat span{font-size:9.5px;padding:2.5px 6px}
.vprice{margin-top:auto}
.vprice .now,.vcard:hover .vprice .now{font-size:19px;color:#141a20}
.vprice .was{font-size:11px}
.vgo{display:none !important}
.morewrap .btn-ghost{width:100%;padding:13px 0}
/* 문의 블록 — 세로로 */
.askbar{flex-direction:column;align-items:stretch;gap:13px;padding:16px 16px 17px;margin-top:18px}
.askbar .tx b{font-size:15px}
.askbar .tx span{font-size:12.5px}
.askbar .bt{display:grid;grid-template-columns:1fr 1fr;gap:8px}
.askbar .bt a{justify-content:center;padding:13px 0}
/* 하단 고정 — 모바일에서 상담으로 가는 길을 항상 열어 둔다 */
.mfixed{
display:grid;grid-template-columns:1fr 1.25fr;gap:8px;
position:fixed;left:0;right:0;bottom:0;z-index:60;
padding:9px 12px calc(9px + env(safe-area-inset-bottom));
background:rgba(255,255,255,.96);border-top:1px solid var(--line);
backdrop-filter:blur(8px);
}
.mfixed a{
display:flex;align-items:center;justify-content:center;gap:6px;
border-radius:9px;padding:13px 0;font-size:14px;font-weight:700;letter-spacing:-.02em;
}
.mfixed svg{width:17px;height:17px}
.mfixed .k{background:#FEE500;color:#191600}
.mfixed .p{background:var(--brand);color:#fff}
/* 시안 안내 줄은 모바일에서 자리만 차지한다 */
.p3bar{padding:8px 14px;font-size:11px;gap:8px}
.p3bar .sp{display:none}
}
/* 아주 좁은 화면 */
@media (max-width:380px){
.p3page .hero.band h1{font-size:19px}
.vcard > img{flex:0 0 112px;width:112px}
.vname{font-size:13.5px}
}
/* ───────────── 클래식 변형 — 지금 실서버 느낌을 살린 좌측 판 ───────────── */
.side.classic{background:#eef2f7;border-right:1px solid #dfe4ea}
.side.classic .side-lead{
background:#fff;border:1px solid #dde5ee;color:#333;border-radius:6px;font-size:13px;
}
.side.classic .side-lead b{color:#0056b3}
.side.classic .fset{border-top-color:#dbe2ea}
.side.classic .fset > h4{color:#333;font-size:13px;font-weight:600;letter-spacing:-.02em}
.side.classic .fset > h4 em{color:#0056b3}
.side.classic .chip{border-radius:5px;border-color:#c8d2dd;background:#fff;color:#333}
.side.classic .chip:hover{border-color:#007bff;color:#0056b3;background:#f2f8ff}
.side.classic .chip.on{background:#007bff;border-color:#007bff;color:#fff;box-shadow:none}
.side.classic .seg{border-radius:5px;border-color:#c8d2dd;background:#fff}
.side.classic .seg button{border-left-color:#dde5ee}
.side.classic .seg button.on{background:#007bff}
.side.classic .course:hover{background:#e4ecf6;border-color:#bcd2ec}
.side.classic .course.on{background:#e2edfb;border-color:#007bff}
.side.classic .course.on .th{box-shadow:0 0 0 2px #007bff}
/* 깃발로 바꾼 뒤로는 배경색을 칠하지 않는다. 칠하면 파란 사각형이 된다 */
.side.classic .course.on .ck{
background-color:transparent;border-color:transparent;
background-image:url("data:image/svg+xml;utf8,");
}
.p3page .side.classic .course.on .ck{
background-image:url("data:image/svg+xml;utf8,");
}
.side.classic .side-cta{background:#eef2f7;border-top-color:#dbe2ea}
.side.classic .btn-primary{border-radius:6px;background:#007bff;box-shadow:none;font-size:15px}
.side.classic .btn-primary:hover{background:#0069d9;transform:none}
.side.classic .btn-ghost{background:#e3e9f0;border-color:#d2dae3;border-radius:6px;color:#555}
.side.classic .fset.fold > summary{font-size:13px;color:#333;font-weight:600}
.side.classic .fset.fold[open] > summary{color:#0056b3}
.side.classic .side-body::-webkit-scrollbar-thumb{background:#c9d3de}
/* 클래식 탭 — 회색 블록, 활성은 파란 채움 */
.tabs.classic{padding:18px 24px 0;border-bottom:0;gap:3px}
.tabs.classic a{
flex:1;justify-content:center;background:#f1f3f6;color:#555;
border-bottom:0;border-radius:7px 7px 0 0;padding:15px 0 14px;font-size:15px;
}
.tabs.classic a:hover{background:#e8ecf1;color:#333}
.tabs.classic a.on{background:#007bff;color:#fff;font-weight:700}
.tabs.classic a svg,.tabs.classic .sp{display:none}
/* ───────────── Tropical Ease 톤 보정 ─────────────
브라운을 그대로 큰 버튼에 쓰면 골프 사진과 부딪치고 대비가 약하다.
행동 버튼은 시트의 딥그린, 강조는 오렌지, 선택 표시는 라임으로 나눈다 */
body[data-tone="tropical"] .hbtn{background:var(--teal)}
body[data-tone="tropical"] .hbtn:hover{background:#14472f}
body[data-tone="tropical"] .btn-primary{
background:var(--teal);box-shadow:0 4px 14px rgba(27,94,63,.30);
}
body[data-tone="tropical"] .btn-primary:hover{background:#14472f;box-shadow:0 7px 20px rgba(27,94,63,.36)}
body[data-tone="tropical"] .vchip.sale{color:#4a3208} /* 오렌지 위 흰 글씨는 안 읽힌다 */
body[data-tone="tropical"] .banner .bd{color:#4a3208}
body[data-tone="tropical"] .ccard.on{outline-color:var(--lime)}
body[data-tone="tropical"] .ccard.on::after{background:var(--lime)}
body[data-tone="tropical"] .hotelchips button.on{background:var(--teal);border-color:var(--teal)}
body[data-tone="tropical"] .tabs a.on,
body[data-tone="tropical"] .itab.on{color:var(--teal);border-bottom-color:var(--teal)}
body[data-tone="tropical"] .hero-eyebrow{
background:rgba(139,195,74,.24);border-color:rgba(139,195,74,.55);
}
body[data-tone="tropical"] .side-lead{background:var(--brand-soft);color:var(--brand-ink)}
/* 히어로 CTA 2개 — 디자인 시트 시안의 버튼 짝 */
.hero-cta{display:flex;justify-content:center;gap:10px;margin-bottom:22px}
.hero-cta button{
border:0;border-radius:30px;padding:12px 26px;font-size:14.5px;font-weight:700;
cursor:pointer;font-family:inherit;letter-spacing:-.02em;transition:transform .12s,background .15s;
}
.hero-cta .fill{background:var(--teal);color:#fff;box-shadow:0 6px 18px rgba(27,94,63,.34)}
.hero-cta .fill:hover{transform:translateY(-1px);background:#14472f}
.hero-cta .line{
background:rgba(255,255,255,.14);color:#fff;border:1.5px solid rgba(255,255,255,.6);
backdrop-filter:blur(6px);
}
.hero-cta .line:hover{background:rgba(255,255,255,.24)}
/* ───────────── 골프장 리포트 카드 ─────────────
4열 격자에서 CCP 만 두 칸을 쓴다. 나머지 넷은 세로에 가까운 칸이라 4:5 사진이 맞는다.
위 행 = CCP(2칸) + 망길라오 + 탈로포포 / 아래 행 = 파인이스트 + 레오팔레스 + 안내(2칸) */
.rgrid{display:grid;grid-template-columns:repeat(4,1fr);grid-auto-rows:320px;gap:14px}
.rcard{
position:relative;display:block;border-radius:14px;overflow:hidden;color:#fff;
background:#0d1b26;box-shadow:var(--shadow-1);transition:transform .2s,box-shadow .2s;
}
.rcard:hover{transform:translateY(-4px);box-shadow:var(--shadow-2)}
.rcard > img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;transition:transform .7s}
.rcard:hover > img{transform:scale(1.05)}
.rcard .g{
position:absolute;inset:0;
background:linear-gradient(180deg,
rgba(4,16,28,.34) 0%, rgba(4,16,28,0) 30%,
rgba(4,16,28,.34) 56%, rgba(4,16,28,.88) 100%);
}
.rcard .rb{position:absolute;top:12px;left:12px;display:flex;gap:6px}
.rcard .rb span{
background:rgba(255,255,255,.94);color:var(--ink);font-size:11px;font-weight:700;
border-radius:20px;padding:3.5px 9px;letter-spacing:-.02em;
}
.rcard .rb span.hot{background:var(--sale);color:#fff}
.rcard .rin{position:absolute;left:15px;right:15px;bottom:14px}
.rcard .rt{
font-size:15px;font-weight:800;line-height:1.4;letter-spacing:-.04em;
text-shadow:0 1px 10px rgba(0,0,0,.55);
}
/* 한글은 글자 단위로 끊긴다. 어절 단위로 넘겨야 「코스」가 갈라지지 않는다 */
.rcard .rt,.rcard .rx,.rcard.cta h4,.rcard.cta p,
.pmcard h4,.pmcard .pd,.pbody h1,.ptext,.pnote{word-break:keep-all}
.rcard .rx{display:none}
.rcard .au{display:flex;align-items:center;gap:7px;margin-top:11px}
.rcard .au .ph{
width:22px;height:22px;border-radius:50%;flex:0 0 auto;
background:linear-gradient(135deg,#1c88f0,#0b69d4);
display:flex;align-items:center;justify-content:center;
font-size:9.5px;font-weight:800;letter-spacing:-.05em;border:1.5px solid rgba(255,255,255,.85);
}
.rcard .au b{font-size:11.5px;font-weight:600;letter-spacing:-.02em}
.rcard .au em{font-size:11px;color:rgba(255,255,255,.66);font-style:normal}
body[data-tone="tropical"] .rcard .au .ph{background:linear-gradient(135deg,#2e9e6b,#1B5E3F)}
/* CCP — 두 칸을 쓰는 큰 카드. 발췌 한 줄이 더 붙는다 */
.rcard.big{grid-column:span 2}
.rcard.big .rin{left:22px;right:22px;bottom:20px}
.rcard.big .rt{font-size:24px;line-height:1.34}
.rcard.big .rx{
display:block;margin-top:9px;font-size:13.5px;line-height:1.62;
color:rgba(255,255,255,.86);max-width:88%;
}
.rcard.big .au{margin-top:14px}
.rcard.big .au .ph{width:27px;height:27px;font-size:11.5px}
.rcard.big .au b{font-size:12.5px}
/* 마지막 두 칸 — 사진 없이 리포트 전체로 보내는 자리 */
.rcard.cta{
grid-column:span 2;background:linear-gradient(128deg,#0d4f96 0%,var(--brand) 52%,#0f7fa8 100%);
display:flex;flex-direction:column;justify-content:center;padding:0 26px;
}
body[data-tone="tropical"] .rcard.cta{background:linear-gradient(128deg,#164a32 0%,#1B5E3F 54%,#2f7d4a 100%)}
.rcard.cta .k{font-size:11.5px;font-weight:700;color:rgba(255,255,255,.7);letter-spacing:.02em}
.rcard.cta h4{margin:8px 0 0;font-size:23px;font-weight:800;letter-spacing:-.045em;line-height:1.34}
.rcard.cta p{margin:9px 0 0;font-size:13px;line-height:1.6;color:rgba(255,255,255,.82)}
.rcard.cta .go{
margin-top:16px;align-self:flex-start;background:#fff;color:var(--brand);
font-size:13px;font-weight:700;border-radius:22px;padding:9px 17px;
display:flex;align-items:center;gap:6px;
}
body[data-tone="tropical"] .rcard.cta .go{color:#1B5E3F}
.rcard.cta .go i{
width:6px;height:6px;border-right:1.8px solid currentColor;border-top:1.8px solid currentColor;
transform:rotate(45deg);
}
/* 좌측 필터판이 있는 A-2 는 폭이 좁아 칸을 낮춘다 */
.rgrid.narrow{grid-auto-rows:288px;gap:12px}
.rgrid.narrow .rcard.big .rt{font-size:21px}
.rgrid.narrow .rcard .rt{font-size:14px}
/* ───────────── 골프장 세로 카드 한 줄 (A-2 · A-3) ─────────────
크기를 다르게 두지 않는다. 다섯 곳을 같은 카드로 세워 한 줄에 넣고
그 아래 패키지 목록이 바로 보이게 높이를 줄인다 */
.rgrid.row5{grid-template-columns:repeat(5,1fr);grid-auto-rows:auto;gap:12px}
.rgrid.row5 .rcard{aspect-ratio:3/4}
.rgrid.row5 .rcard .rin{left:13px;right:13px;bottom:12px}
.rgrid.row5 .cnm{
font-size:17px;font-weight:800;letter-spacing:-.045em;
text-shadow:0 1px 10px rgba(0,0,0,.6);
}
.rgrid.row5 .rcard .rt{font-size:12.5px;font-weight:600;margin-top:3px;color:rgba(255,255,255,.9)}
.rgrid.row5 .rcard .au{margin-top:9px}
.rgrid.row5 .rcard .au b{font-size:11px}
.rgrid.row5 .rcard .rb span{font-size:10.5px;padding:3px 8px}
/* ───────────── 프로모션 카드 ─────────────
AI 로 뽑은 배너를 통째로 깔면 폰트가 제각각이라 촌스러워진다.
사진만 쓰고 글자는 여기서 얹는다. 문구·사진만 갈아 끼우면 된다 */
.pmrow{display:grid;grid-template-columns:1.5fr 1fr;gap:14px;margin:20px 0 4px}
.pmcard{
position:relative;display:block;height:174px;border-radius:14px;overflow:hidden;color:#fff;
background:#0d3f6b;box-shadow:var(--shadow-1);transition:transform .18s,box-shadow .18s;
}
.pmcard:hover{transform:translateY(-3px);box-shadow:var(--shadow-2)}
.pmcard > img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover}
.pmcard .pv{
position:absolute;inset:0;
background:linear-gradient(97deg,rgba(3,24,45,.92) 0%,rgba(3,24,45,.78) 42%,rgba(3,24,45,.14) 100%);
}
.pmcard .pin{position:absolute;inset:0;padding:0 26px;display:flex;flex-direction:column;justify-content:center}
.pmcard .pk{font-size:11.5px;font-weight:700;color:#8ecdff;letter-spacing:.01em}
.pmcard h4{margin:7px 0 0;font-size:25px;font-weight:800;letter-spacing:-.05em;line-height:1.28}
.pmcard .pd{margin-top:8px;font-size:13px;color:rgba(255,255,255,.82);letter-spacing:-.02em}
.pmcard .pp{margin-top:12px;display:flex;align-items:baseline;gap:4px}
.pmcard .pp small{font-size:12px;color:rgba(255,255,255,.72)}
.pmcard .pp b{font-size:23px;font-weight:800;letter-spacing:-.04em}
.pmcard .pp span{font-size:12.5px;color:rgba(255,255,255,.8)}
/* 사진이 없는 판 — 렌터카처럼 쓸 실사가 없으면 색과 글자만으로 간다 */
.pmcard.flat{background:linear-gradient(126deg,#0c7b70 0%,var(--teal) 58%,#12968a 100%)}
body[data-tone="tropical"] .pmcard.flat{background:linear-gradient(126deg,#164a32 0%,#1B5E3F 58%,#2f7d4a 100%)}
.pmcard.flat .pk{color:rgba(255,255,255,.74)}
.pmcard.flat h4{font-size:22px}
/* 사진이 없으니 오른쪽이 텅 빈다. 빛무리 두 겹으로 채운다 */
.pmcard.flat::after{
content:"";position:absolute;right:-58px;top:-52px;width:250px;height:250px;border-radius:50%;
background:radial-gradient(circle at 34% 36%, rgba(255,255,255,.19) 0%, rgba(255,255,255,.05) 52%, rgba(255,255,255,0) 72%);
}
.pmcard.flat::before{
content:"";position:absolute;right:26px;bottom:-46px;width:118px;height:118px;border-radius:50%;
border:1.6px solid rgba(255,255,255,.22);
}
.pmcard.flat .pin{z-index:2}
.pmcard .pgo{
margin-top:13px;align-self:flex-start;display:flex;align-items:center;gap:6px;
background:rgba(255,255,255,.16);border:1.4px solid rgba(255,255,255,.55);
border-radius:22px;padding:7px 15px;font-size:12.5px;font-weight:700;backdrop-filter:blur(4px);
}
.pmcard:hover .pgo{background:rgba(255,255,255,.28)}
.pmcard .pgo i{
width:5.5px;height:5.5px;border-right:1.8px solid currentColor;border-top:1.8px solid currentColor;
transform:rotate(45deg);
}
/* A-3 밴드 — 골프장 사진을 흐리지 않고 그대로 쓴다 */
.hero.band .hero-bg{filter:none;transform:none}
/* ───────────── CCP 리포트 상세 ─────────────
왼쪽에 사진, 오른쪽에 글. 인스타 게시물을 데스크톱에서 볼 때의 구조다 */
.crumb{
max-width:var(--wrap-w);margin:0 auto;padding:16px 24px 0;
font-size:12.5px;color:var(--ink-2);display:flex;align-items:center;gap:7px;
}
.crumb a{color:var(--ink-2)}
.crumb a:hover{color:var(--brand)}
.crumb b{color:var(--ink);font-weight:600}
.crumb i{
width:5px;height:5px;border-right:1.4px solid var(--line-2);border-top:1.4px solid var(--line-2);
transform:rotate(45deg);
}
.post{
max-width:var(--wrap-w);margin:0 auto;padding:14px 24px 44px;
display:grid;grid-template-columns:minmax(0,1fr) 452px;gap:26px;align-items:start;
}
.gal{background:#0c151d;border-radius:14px;overflow:hidden;box-shadow:var(--shadow-1)}
.gal .stagepic{position:relative;aspect-ratio:4/3;background:#0c151d}
.gal .stagepic img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover}
.gal .cnt{
position:absolute;left:14px;bottom:14px;background:rgba(4,16,28,.62);color:#fff;
font-size:12px;font-weight:600;border-radius:20px;padding:4px 11px;backdrop-filter:blur(4px);
}
.gal .arw{
position:absolute;top:50%;transform:translateY(-50%);width:42px;height:60px;
background:rgba(10,22,34,.44);color:#fff;display:flex;align-items:center;justify-content:center;
cursor:pointer;transition:background .16s;
}
.gal .arw:hover{background:rgba(10,22,34,.72)}
.gal .arw.l{left:0;border-radius:0 4px 4px 0}
.gal .arw.r{right:0;border-radius:4px 0 0 4px}
.gal .arw i{
width:11px;height:11px;border-right:2px solid #fff;border-top:2px solid #fff;
}
.gal .arw.r i{transform:rotate(45deg)}
.gal .arw.l i{transform:rotate(-135deg)}
.gal .strip{display:flex;gap:6px;padding:8px;background:#101c26}
/* 다섯 장이 사진 폭을 나눠 갖게 한다. 고정폭으로 두면 오른쪽이 검게 비어 보인다 */
.gal .strip img{
flex:1 1 0;min-width:0;height:68px;object-fit:cover;border-radius:3px;cursor:pointer;
opacity:.55;transition:opacity .16s;
}
.gal .strip img:hover{opacity:.85}
.gal .strip img.on{opacity:1;outline:2.5px solid var(--brand);outline-offset:-2.5px}
.pbody{
background:var(--paper);border:1px solid var(--line);border-radius:14px;
padding:22px 24px;box-shadow:var(--shadow-1);
}
.pau{display:flex;align-items:center;gap:10px;padding-bottom:15px;border-bottom:1px solid var(--line)}
.pau .ph{
width:38px;height:38px;border-radius:50%;flex:0 0 auto;color:#fff;
background:linear-gradient(135deg,#1c88f0,#0b69d4);
display:flex;align-items:center;justify-content:center;font-size:14px;font-weight:800;
}
body[data-tone="tropical"] .pau .ph{background:linear-gradient(135deg,#2e9e6b,#1B5E3F)}
.pau .nm b{display:block;font-size:14px;font-weight:700;letter-spacing:-.03em}
.pau .nm span{display:block;font-size:12px;color:var(--ink-2);margin-top:2px}
.pau .fol{
margin-left:auto;font-size:12.5px;font-weight:700;color:var(--brand);
border:1.4px solid var(--brand);border-radius:20px;padding:6px 13px;cursor:pointer;
}
.pau .fol:hover{background:var(--brand);color:#fff}
.pbody h1{
margin:17px 0 0;font-size:22px;font-weight:800;line-height:1.42;letter-spacing:-.045em;
text-wrap:balance;
}
.pbody .tagline{margin:9px 0 0;display:flex;gap:6px;flex-wrap:wrap}
.pbody .tagline span{
font-size:11.5px;font-weight:600;color:var(--brand);background:var(--brand-soft);
border-radius:20px;padding:4px 10px;
}
.ptext{margin-top:16px;font-size:14.5px;line-height:1.78;color:var(--ink)}
.ptext p{margin:0 0 13px}
.ptext p:last-child{margin-bottom:0}
.ptext .lead{font-weight:600}
.pnote{
margin-top:16px;background:var(--amber-soft);border-left:3px solid var(--amber);
border-radius:0 6px 6px 0;padding:13px 15px;font-size:13.5px;line-height:1.7;
}
.pspec{margin-top:18px;border:1px solid var(--line);border-radius:8px;overflow:hidden}
.pspec dl{display:grid;grid-template-columns:104px 1fr;margin:0;font-size:13.5px}
.pspec dt{
padding:10px 13px;background:var(--ground);color:var(--ink-2);font-weight:600;
border-bottom:1px solid var(--line);
}
.pspec dd{margin:0;padding:10px 13px;border-bottom:1px solid var(--line);letter-spacing:-.02em}
.pspec dl > :nth-last-child(1),.pspec dl > :nth-last-child(2){border-bottom:0}
.pspec dd b{font-variant-numeric:tabular-nums}
.plink{
margin-top:18px;padding-top:16px;border-top:1px solid var(--line);
}
.plink .lb{font-size:12.5px;color:var(--ink-2);margin-bottom:9px}
.plink a{
display:flex;align-items:center;gap:11px;border:1px solid var(--line);border-radius:9px;
padding:10px;transition:border-color .16s,box-shadow .16s;
}
.plink a:hover{border-color:var(--brand);box-shadow:var(--shadow-1)}
.plink a img{width:56px;height:42px;object-fit:cover;border-radius:5px;flex:0 0 auto}
.plink a .tx b{display:block;font-size:13.5px;font-weight:700;letter-spacing:-.03em}
.plink a .tx span{display:block;font-size:12px;color:var(--ink-2);margin-top:2px}
.pact{
margin-top:16px;padding-top:14px;border-top:1px solid var(--line);
display:flex;align-items:center;gap:16px;font-size:13px;color:var(--ink-2);
}
.pact .cta{
margin-left:auto;background:var(--brand);color:#fff;font-weight:700;font-size:13.5px;
border-radius:8px;padding:11px 18px;
}
.pact .cta:hover{background:#0a5cbb}
body[data-tone="tropical"] .pact .cta{background:var(--teal)}
/* ───────────── 골프장이 주역이다 (2026-08-12) ─────────────
손님이 고르는 기준은 어느 골프장을 도느냐다. 광고 사이트링크에서도
골프장 고유명이 클릭률 5.2~8.5% 로 최상위였고 상품목록형은 1.0~3.0% 였다.
해시태그 알약은 SNS 문법이라 정보가 아니라 장식으로 읽힌다. 텍스트로 세운다 */
.vcourse{
font-size:15px;font-weight:800;line-height:1.34;letter-spacing:-.04em;
margin-bottom:2px;color:#fff;text-shadow:0 1px 10px rgba(0,0,0,.62);
}
.vcourse i{font-style:normal;font-weight:600;opacity:.66;margin:0 1px}
.vcourse b{
font-weight:700;font-size:11.5px;margin-left:5px;vertical-align:1px;
padding:2px 7px;border-radius:5px;letter-spacing:-.02em;
background:rgba(255,255,255,.2);border:1px solid rgba(255,255,255,.42);
white-space:nowrap; /* 골프장이 셋이면 「54 / 홀」로 갈린다 */
display:inline-block;
}
/* 호텔은 조건이지 주인공이 아니다. 골프장 아래에서 한 급 낮춘다 */
.vname{font-size:12.5px;font-weight:600;opacity:.92}
.vgrid.c3 .vcourse{font-size:16.5px}
.vgrid.c5 .vcourse{font-size:14px}
.vfeat span.view{background:rgba(255,255,255,.16);border-color:rgba(255,255,255,.38)}
.vcard:hover .vfeat span.view{background:#e8f4fb;color:#136f9e}
@media (hover:none){ .vfeat span.view{background:#e8f4fb;color:#136f9e} }
/* 흰 판이 깔리면 글자를 반전시킨다 */
.vcard:hover .vcourse{color:var(--ink);text-shadow:none}
.vcard:hover .vcourse i{opacity:.42}
.vcard:hover .vcourse b{background:#eaf2fe;border-color:transparent;color:#1a5cb8}
.vcard:hover .vname{color:var(--ink-2);text-shadow:none;font-weight:500}
.p3page .vcourse{color:#fff}
.p3page .vcard:hover .vcourse{color:var(--ink)}
@media (hover:none){
.vcourse{color:var(--ink);text-shadow:none}
.vcourse i{opacity:.42}
.vcourse b{background:#eaf2fe;border-color:transparent;color:#1a5cb8}
.vname{color:var(--ink-2);font-weight:500}
}
@media (max-width:760px){
.vcourse{font-size:14px;margin-bottom:2px}
.vcourse b{font-size:10.5px;padding:1.5px 6px}
.vname{font-size:11.5px;margin-bottom:5px}
}
/* ───────────── 골프장 위치와 이동시간 (2026-08-12) ─────────────
손님이 제일 먼저 재는 것이 호텔에서 몇 분 걸리느냐다.
구글 지도는 키가 필요하고 브랜드색을 못 입힌다. 괌은 섬이라 윤곽이 단순해 직접 그렸다.
다섯 골프장에 그대로 재사용한다 — 좌표와 강조 대상만 바꾸면 된다 */
.pmap,.pspec2{margin-top:14px;background:var(--paper);border:1px solid var(--line);border-radius:14px;padding:18px 20px 17px;box-shadow:var(--shadow-1)}
.mhd{display:flex;align-items:baseline;gap:9px;margin-bottom:13px}
.mhd h3{margin:0;font-size:15px;font-weight:800;letter-spacing:-.03em}
.mhd .dummy{
font-size:11px;font-weight:700;color:var(--amber);background:var(--amber-soft);
border-radius:20px;padding:2.5px 9px;letter-spacing:-.02em;
}
.mwrap{display:grid;grid-template-columns:104px 1fr;gap:16px;align-items:start}
.gmap{width:100%;height:auto;border-radius:8px;display:block}
.gmap .isle{fill:#dfe9de;stroke:#c3d2c2;stroke-width:1.2}
.gmap .pin circle{fill:#8fa39a}
.gmap .pin text{display:none}
.gmap .pin.here circle{fill:var(--brand);stroke:#fff;stroke-width:2.5}
.gmap .pin.here text{font-size:17px;fill:var(--brand);font-weight:800}
.gmap .ref rect,.gmap .ref circle{fill:#fff;stroke:#8fa39a;stroke-width:1.4}
.gmap .ref text{font-size:13px;fill:#7c8d84;font-weight:600}
.mtime .mt-lb{font-size:12px;color:var(--ink-2);margin-bottom:8px}
.mtime ul{list-style:none;margin:0;padding:0}
.mtime li{
display:flex;align-items:baseline;gap:10px;padding:9px 0;
border-bottom:1px solid var(--line);font-size:13.5px;
}
.mtime li:last-child{border-bottom:0}
.mtime li span{flex:1;min-width:0;color:var(--ink-2);letter-spacing:-.03em}
.mtime li b{
font-size:19px;font-weight:800;font-variant-numeric:tabular-nums;letter-spacing:-.04em;
color:var(--ink);white-space:nowrap;
}
.mtime li b i{font-style:normal;font-size:11.5px;font-weight:600;color:var(--ink-2);margin-left:1px}
.mnote{margin:9px 0 0;font-size:11.5px;color:var(--ink-3);line-height:1.6}
.maddr{
display:flex;align-items:center;gap:7px;margin-top:13px;padding-top:12px;
border-top:1px solid var(--line);font-size:12.5px;color:var(--ink-2);
}
.maddr svg{flex:0 0 auto;color:var(--ink-3)}
/* 스펙 — 골퍼가 확인하는 숫자. 위쪽 설명과 층을 나눈다 */
.sgrid{display:grid;grid-template-columns:repeat(4,1fr);gap:1px;background:var(--line);
border:1px solid var(--line);border-radius:8px;overflow:hidden}
.sgrid > div{background:var(--paper);padding:11px 12px}
.sgrid span{display:block;font-size:11.5px;color:var(--ink-3);margin-bottom:3px;letter-spacing:-.02em}
.sgrid b{font-size:15px;font-weight:800;letter-spacing:-.04em;font-variant-numeric:tabular-nums}
.sgrid b i{font-style:normal;font-size:11px;font-weight:600;color:var(--ink-2);margin-left:1px}
.sfoot{display:flex;flex-wrap:wrap;gap:6px 18px;margin-top:11px;font-size:12.5px;color:var(--ink-2)}
.sfoot b{color:var(--ink);font-weight:700;margin-right:4px}
@media (max-width:760px){
.mwrap{grid-template-columns:132px 1fr;gap:12px}
.sgrid{grid-template-columns:repeat(2,1fr)}
.mtime li{font-size:12.5px;padding:7px 0}
.mtime li b{font-size:16px}
}
/* ───────────── 작성자 자리에 로고 (2026-08-12) ─────────────
원형 아바타에 가로 로고를 넣으면 높이가 12px 로 뭉개진다. 창을 가로로 눕힌다.
로고 원본 800x400 중 글자는 184,120~630,278 안에만 있어 여백을 잘라 낸다 */
.pau .ph{
width:85px;height:30px;border-radius:0;background:none;
overflow:hidden;position:relative;flex:0 0 auto;
padding-right:0;margin-right:2px;
}
.pau .ph img{position:absolute;left:-35px;top:-23px;width:152px;max-width:none;display:block}
body[data-tone="tropical"] .pau .ph{background:none}
.pau .ph + .nm{padding-left:11px;border-left:1px solid var(--line)}
/* 골프장 카드 프로모션 배지 — 지금 무엇이 붙는지 카드에서 바로 보이게 */
.ccard{position:relative}
.ccard .promo{
position:absolute;left:8px;bottom:52px;z-index:2;display:flex;flex-wrap:wrap;gap:4px;align-items:flex-start;
}
.ccard .promo b{
font-size:10.5px;font-weight:800;letter-spacing:-.03em;line-height:1;
padding:4px 8px;border-radius:5px;color:#fff;
background:var(--amber);box-shadow:0 2px 8px rgba(0,0,0,.2);
}
.ccard .promo b.free{background:#137a4b}
.ccard .promo b.plus{background:#c2410c}
/* ───────────── 모자이크 갤러리 (2026-08-12) ─────────────
큰 사진 아래 썸네일 줄은 2010년대 쇼핑몰 문법이다. 큰 것 하나에 작은 넷을 붙인다 */
.gmos{
display:grid;grid-template-columns:2fr 1fr 1fr;grid-template-rows:1fr 1fr;
gap:4px;border-radius:14px;overflow:hidden;aspect-ratio:16/9;box-shadow:var(--shadow-1);
}
.gmos a{position:relative;display:block;overflow:hidden;background:#0c151d}
.gmos a.g1{grid-row:1 / 3}
.gmos img{width:100%;height:100%;object-fit:cover;display:block;transition:transform .3s ease}
.gmos a:hover img{transform:scale(1.04)}
.gmos .cap{
position:absolute;left:14px;bottom:13px;color:#fff;font-size:14px;font-weight:700;
letter-spacing:-.03em;text-shadow:0 1px 10px rgba(0,0,0,.6);
}
.gmos a.g1:after{
content:"";position:absolute;inset:auto 0 0 0;height:38%;
background:linear-gradient(180deg,transparent,rgba(4,12,20,.55));
}
.gmos .more{
position:absolute;inset:0;display:flex;align-items:center;justify-content:center;
background:rgba(6,16,26,.42);color:#fff;font-size:22px;font-weight:800;letter-spacing:-.03em;
}
@media (max-width:760px){
.gmos{grid-template-columns:1fr 1fr;grid-template-rows:auto auto;aspect-ratio:4/3}
.gmos a.g1{grid-column:1 / 3;grid-row:1}
.gmos a:nth-child(4),.gmos a:nth-child(5){display:none}
}
/* 알짜 넷 — 후기에서 자주 나오는데 공식 소개에는 잘 없는 것들. 크게 세운다 */
.pkey{
display:grid;grid-template-columns:repeat(2,1fr);gap:9px;margin-top:18px;
}
.pkey > div{
background:var(--ground);border:1px solid var(--line);border-radius:10px;padding:12px 14px;
display:grid;grid-template-columns:74px 1fr;align-items:baseline;column-gap:10px;
}
.pkey span{font-size:12px;color:var(--ink-2);letter-spacing:-.02em;font-weight:600}
.pkey b{font-size:15.5px;font-weight:800;letter-spacing:-.04em;color:var(--brand);line-height:1.35;word-break:keep-all}
.pkey i{grid-column:2;font-style:normal;font-size:11.5px;color:var(--ink-3);margin-top:2px;line-height:1.5;word-break:keep-all}
@media (max-width:760px){ .pkey{grid-template-columns:repeat(2,1fr)} }
/* ───────────── 골프장 안내 · 2단 (2026-08-12) ─────────────
갤러리를 전폭으로 두고 그 아래를 2단으로 나눈다.
앞서 갤러리만 왼쪽에 두었더니 그 아래가 통째로 비고 오른쪽에 정보가 다 몰렸다 */
.post2{max-width:var(--wrap-w);margin:0 auto;padding:14px 24px 44px}
.pcols{display:grid;grid-template-columns:minmax(0,1fr) 330px;gap:28px;align-items:start;margin-top:22px}
.pmain{min-width:0}
.pmain h1{
margin:0;font-size:26px;font-weight:800;line-height:1.38;letter-spacing:-.045em;text-wrap:balance;
}
.pmain .tagline{margin:11px 0 0;display:flex;gap:6px;flex-wrap:wrap}
.pmain .tagline span{
font-size:11.5px;font-weight:600;color:var(--brand);background:var(--brand-soft);
border-radius:20px;padding:4px 10px;
}
.pmain .pau{margin-top:18px;padding:13px 0;border-top:1px solid var(--line);border-bottom:1px solid var(--line)}
.pmain .ptext{margin-top:20px}
/* 작성자 — 후기가 없으니 사람이 신뢰의 축이다 */
.pau .ph{
width:46px;height:46px;border-radius:50%;flex:0 0 auto;object-fit:cover;
border:2px solid #fff;box-shadow:0 1px 6px rgba(16,26,38,.18);background:none;
padding:0;margin:0;position:static;
}
.pau .nm b{display:block;font-size:15px;font-weight:800;letter-spacing:-.03em}
.pau .nm b .rk{display:inline;font-size:13px;font-weight:600;color:var(--ink-2);margin-left:4px}
.pau .nm span{display:block;font-size:12px;color:var(--ink-2);margin-top:2px}
.pau .ph + .nm{padding-left:0;border-left:0}
/* 오른쪽 요약 카드 — 스크롤을 따라온다 */
.pside{position:sticky;top:78px}
.pcard{
background:var(--paper);border:1px solid var(--line);border-radius:14px;
padding:18px 20px 20px;box-shadow:var(--shadow-1);
}
.pct{font-size:14px;font-weight:800;letter-spacing:-.03em;margin-bottom:12px}
.pcdl{display:grid;grid-template-columns:66px 1fr;margin:0 0 16px;font-size:13px;row-gap:9px}
.pcdl dt{color:var(--ink-3);letter-spacing:-.02em}
.pcdl dd{margin:0;color:var(--ink);letter-spacing:-.02em;line-height:1.55}
.pcdl dd b{font-weight:700}
.pcta{
display:block;text-align:center;background:var(--brand);color:#fff;font-weight:700;font-size:14.5px;
border-radius:9px;padding:13px;letter-spacing:-.02em;transition:background .15s;
}
.pcta:hover{background:#0a5cbb}
body[data-tone="tropical"] .pcta{background:var(--teal)}
.pcsub{margin-top:9px;text-align:center;font-size:12px;color:var(--ink-2)}
.pcsub b{color:var(--ink);font-weight:700}
.pcact{
display:flex;gap:16px;justify-content:center;margin-top:14px;font-size:13px;color:var(--ink-2);
}
@media (max-width:900px){
.pcols{grid-template-columns:1fr;gap:20px}
.pside{position:static}
.pmain h1{font-size:21px}
}
@media (max-width:760px){
.post2{padding:12px 16px 40px}
.pmain h1{font-size:19.5px}
}
/* ───────────── 왼쪽은 사진과 사실, 오른쪽은 글 (2026-08-12) ───────────── */
.lcol{display:flex;flex-direction:column;gap:14px;min-width:0}
.lcol .pmap,.lcol .pspec2{margin-top:0}
.lcol .pkey{margin-top:0}
/* 왼쪽이 넓어졌으니 알짜는 4칸으로 편다 */
.lcol .pkey{grid-template-columns:repeat(2,1fr)}
@media (min-width:1100px){ .lcol .pkey{grid-template-columns:repeat(2,1fr)} }
@media (max-width:900px){
.post{grid-template-columns:1fr}
.lcol .pkey{grid-template-columns:repeat(2,1fr)}
}
@media (max-width:560px){ .lcol .pkey{grid-template-columns:1fr} }
/* ═════════════ 회의록 2026-08-12 반영 ═════════════ */
/* 회의록 5장 — 프로모션 배너는 좌우 슬라이드. 자산이 늘면 장수만 더하면 된다 */
.bnwrap{position:relative;margin:18px 0 4px}
.bnwrap .bnrow{margin:0}
.bnarw{
position:absolute;top:50%;transform:translateY(-50%);z-index:3;
width:34px;height:34px;border-radius:50%;background:rgba(255,255,255,.94);
border:1px solid var(--line);box-shadow:0 2px 10px rgba(8,24,40,.16);
display:flex;align-items:center;justify-content:center;cursor:pointer;
}
.bnarw:hover{background:#fff;box-shadow:0 4px 14px rgba(8,24,40,.22)}
.bnarw.l{left:-12px}
.bnarw.r{right:-12px}
.bnarw i{width:8px;height:8px;border-right:2px solid var(--ink-2);border-top:2px solid var(--ink-2)}
.bnarw.r i{transform:rotate(45deg);margin-left:-2px}
.bnarw.l i{transform:rotate(-135deg);margin-right:-2px}
.bndot{display:flex;justify-content:center;gap:6px;margin-top:10px}
.bndot span{
width:7px;height:7px;border-radius:50%;background:#cfd8e2;cursor:pointer;transition:background .16s,width .16s;
}
.bndot span.on{width:20px;border-radius:20px;background:var(--brand)}
/* 회의록 5장 — 카드 한 장에 금액과 인원 기준이 같이 보여야 한다 */
.vprice .per{
font-size:10.5px;font-weight:600;color:rgba(255,255,255,.72);
margin-left:2px;letter-spacing:-.02em;
}
.vcard:hover .vprice .per{color:var(--ink-3)}
@media (hover:none){ .vprice .per{color:var(--ink-3)} }
@media (max-width:720px){
.bnwrap{margin:0}
.bnarw{display:none}
.bndot{margin-top:9px}
}
/* ═════════════ 검색툴 드롭다운 ═════════════
칸 순서는 신이사님 기준 — 날짜가 맨 왼쪽. 출발일·투숙일을 붙이고 호텔·골프장·인원을 뒤에 둔다.
버튼에 배경을 지정하지 않으면 브라우저 기본 회색이 드러나 날짜마다 박스가 붙는다. 전부 명시한다 */
.hsearch{position:relative}
.hf{position:relative;border-radius:10px;transition:background .16s}
.hf.open{background:rgba(21,112,239,.055)}
.hf .v.ph{color:var(--ink-3)}
/* 칸 폭을 내용에 맞게 나눈다. 다섯 칸을 균등하게 두면 골프장 이름이 잘린다 */
/* 날짜 칸만 둘을 담는다. 나머지에서 조금씩 때온다 (2026-08-20) */
.hsearch .hf.f-date{flex:1.34}
.hsearch .hf.f-nights{flex:.88}
.hsearch .hf.f-hotel{flex:.98}
.hsearch .hf.f-course{flex:1.10}
.hsearch .hf.f-pax{flex:.95}
/* 패널 — 반투명 유리에 얕은 그림자 세 겹. 열릴 때 살짝 내려앉는다 */
.hpanel{
display:none;position:absolute;top:calc(100% + 12px);left:-4px;z-index:50;
background:rgba(255,255,255,.88);
-webkit-backdrop-filter:saturate(180%) blur(22px);
backdrop-filter:saturate(180%) blur(22px);
border:.5px solid rgba(16,24,40,.07);border-radius:18px;
box-shadow:0 1px 2px rgba(16,24,40,.04), 0 10px 26px rgba(16,24,40,.10), 0 28px 64px rgba(16,24,40,.13);
padding:16px;cursor:default;
}
.hf.open > .hpanel{display:block;animation:hpop .2s cubic-bezier(.32,.72,0,1)}
@keyframes hpop{ from{opacity:0;transform:translateY(-7px) scale(.975)} to{opacity:1;transform:none} }
.hpanel.right{left:auto;right:-4px}
.hpanel .ptit{
font-size:12.5px;font-weight:600;color:var(--ink-2);margin:2px 4px 11px;letter-spacing:-.02em;
}
.hpanel .cnote{
margin:12px 4px 2px;font-size:11.5px;color:var(--ink-3);line-height:1.55;letter-spacing:-.02em;
}
/* 목록형 — 투숙일 */
.hpanel.p-nights{width:274px}
.plist{display:flex;flex-direction:column;gap:1px}
.plist button{
display:flex;align-items:center;gap:8px;text-align:left;
background:transparent;border:0;padding:11px 12px;border-radius:12px;
font-size:14px;font-weight:500;color:var(--ink);letter-spacing:-.03em;
transition:background .14s,color .14s,transform .1s;
}
.plist button:hover{background:rgba(16,24,40,.045)}
.plist button:active{transform:scale(.985)}
.plist button.on{background:rgba(21,112,239,.09);color:var(--brand);font-weight:700}
.plist button em{
font-style:normal;font-size:11px;font-weight:600;color:var(--ink-3);
background:rgba(16,24,40,.055);border-radius:20px;padding:3px 8px;margin-left:auto;
}
.plist button.on em{background:rgba(21,112,239,.12);color:var(--brand)}
/* 체크 목록형 — 호텔 · 골프장. 동그란 체크가 네모보다 부드럽다 */
.hpanel.p-hotel{width:308px}
.hpanel.p-course{width:352px}
.pchk{display:flex;flex-direction:column;gap:1px;max-height:296px;overflow-y:auto;margin:0 -4px}
.pchk::-webkit-scrollbar{width:5px}
.pchk::-webkit-scrollbar-thumb{background:rgba(16,24,40,.16);border-radius:3px}
.pchk label{
display:flex;align-items:center;gap:11px;padding:9px 10px;border-radius:12px;
font-size:14px;font-weight:500;color:var(--ink);cursor:pointer;transition:background .14s;
}
.pchk label:hover{background:rgba(16,24,40,.045)}
.pchk input{display:none}
.pchk .bx{
width:21px;height:21px;flex:0 0 auto;border-radius:50%;
border:1.5px solid rgba(16,24,40,.2);background:transparent;position:relative;
transition:background .16s,border-color .16s,transform .12s;
}
.pchk label:active .bx{transform:scale(.9)}
.pchk input:checked + .bx{background:var(--brand);border-color:var(--brand)}
.pchk input:checked + .bx::after{
content:"";position:absolute;left:5.5px;top:7px;width:7.5px;height:4px;
border-left:1.9px solid #fff;border-bottom:1.9px solid #fff;transform:rotate(-45deg);
}
.pchk .th{width:42px;height:31px;border-radius:8px;object-fit:cover;flex:0 0 auto}
.pchk .tx{flex:1;min-width:0}
.pchk .tx b{display:block;font-size:14px;font-weight:600;letter-spacing:-.03em}
.pchk .tx span{display:block;font-size:11.5px;color:var(--ink-3);margin-top:1.5px;letter-spacing:-.02em}
.pfoot{display:flex;gap:8px;margin-top:13px;padding-top:13px;border-top:.5px solid rgba(16,24,40,.09)}
.pfoot button{
flex:1;padding:11px 0;border:0;border-radius:12px;font-size:13.5px;font-weight:600;
letter-spacing:-.02em;transition:background .14s,transform .1s;
}
.pfoot button:active{transform:scale(.98)}
.pfoot .ok{background:var(--brand);color:#fff}
.pfoot .ok:hover{background:var(--brand-ink)}
.pfoot .rst{background:rgba(16,24,40,.055);color:var(--ink)}
.pfoot .rst:hover{background:rgba(16,24,40,.09)}
/* 인원 — 성인 · 아동 · 유아 */
.hpanel.p-pax{width:296px}
.pax{display:flex;flex-direction:column}
.pax .row{display:flex;align-items:center;gap:10px;padding:11px 4px}
.pax .row + .row{border-top:.5px solid rgba(16,24,40,.07)}
.pax .row .lb{flex:1;min-width:0}
.pax .row .lb b{display:block;font-size:14.5px;font-weight:600;letter-spacing:-.03em}
.pax .row .lb span{display:block;font-size:11.5px;color:var(--ink-3);margin-top:2px;letter-spacing:-.02em}
.stp{display:flex;align-items:center;gap:13px;flex:0 0 auto}
.stp button{
width:30px;height:30px;border-radius:50%;border:0;background:rgba(16,24,40,.06);
display:flex;align-items:center;justify-content:center;
font-size:16px;font-weight:400;color:var(--ink);line-height:1;
transition:background .14s,transform .1s,opacity .14s;
}
.stp button:hover:not(:disabled){background:rgba(16,24,40,.1)}
.stp button:active:not(:disabled){transform:scale(.9)}
.stp button:disabled{opacity:.3;cursor:default}
.stp b{min-width:18px;text-align:center;font-size:15px;font-weight:600;font-variant-numeric:tabular-nums}
/* 달력 — 날짜는 원이다. 네모 박스를 깔면 격자처럼 보인다 */
.hpanel.p-date{width:316px}
.cal .chd{display:flex;align-items:center;justify-content:space-between;margin:0 2px 10px}
.cal .chd b{font-size:14.5px;font-weight:700;letter-spacing:-.03em}
.cal .chd button{
width:30px;height:30px;border-radius:50%;border:0;background:transparent;
display:flex;align-items:center;justify-content:center;
color:var(--ink-2);font-size:13px;transition:background .14s,transform .1s;
}
.cal .chd button:hover{background:rgba(16,24,40,.06);color:var(--ink)}
.cal .chd button:active{transform:scale(.9)}
.cal .cgrid{display:grid;grid-template-columns:repeat(7,1fr);gap:2px}
.cal .cgrid span.dw{
text-align:center;font-size:11.5px;font-weight:600;color:var(--ink-3);padding:2px 0 8px;
}
.cal .cgrid button{
height:38px;border:0;background:transparent;border-radius:50%;
font-size:14px;font-weight:500;color:var(--ink);font-variant-numeric:tabular-nums;
transition:background .15s,color .15s,transform .1s;
}
.cal .cgrid button:hover:not(:disabled):not(.on){background:rgba(16,24,40,.06)}
.cal .cgrid button:active:not(:disabled){transform:scale(.92)}
.cal .cgrid button.on{background:var(--brand);color:#fff;font-weight:700}
.cal .cgrid button:disabled{color:transparent;cursor:default}
.cal .cgrid button.sun{color:#d1495b}
.cal .cgrid button.on.sun{color:#fff}
/* 다크 모드 대응 — 유리판이 흰색으로 고정되면 밤에 눈이 부신다 */
@media (prefers-color-scheme:dark){
.p3page .hpanel{
background:rgba(28,32,38,.9);border-color:rgba(255,255,255,.09);
box-shadow:0 10px 26px rgba(0,0,0,.34), 0 28px 64px rgba(0,0,0,.4);
}
}
@media (max-width:720px){
/* 모바일에서는 칸이 세로로 쌓이므로 패널을 화면 폭에 맞춘다 */
.hpanel{left:0;right:0;width:auto !important;max-width:none;border-radius:16px}
.hpanel.right{left:0;right:0}
.hsearch .hf.f-date,.hsearch .hf.f-nights,.hsearch .hf.f-hotel,
.hsearch .hf.f-course,.hsearch .hf.f-pax{flex:none}
.pchk{max-height:44vh}
}
/* ───────────── 배너 자동 교체 · 골프셔틀 ↔ 렌터카 (2026-08-13) ─────────────
오른쪽 배너 칸 하나에 두 장을 겹쳐 두고 3.5 초마다 바꾼다.
첫 장은 흐름에 남겨 칸 높이를 만들고, 나머지는 그 위에 절대배치로 올린다.
두 이미지가 830x467 로 같은 규격이라 겹쳐도 테두리가 어긋나지 않는다 */
/* ═════ 배너 페이드 교체 (구) ═════
루트 /hotelpack/test/index.asp 는 아래 .bnroll 롤링으로 넘어갔지만
/admin/hotel/hotelpack/test/index.asp 가 아직 .bnswap 마크업을 쓰고 이 CSS 를 그대로 물고 있다.
지우면 그쪽 배너가 깨진다. 형제가 넘어올 때까지 남긴다 (2026-08-22 확인) */
.bnswap{position:relative;display:block;overflow:hidden;border-radius:12px}
.bnswap img{
width:100%;height:auto;display:block;
opacity:0;transform:translateX(14px);
transition:opacity .6s cubic-bezier(.32,.72,0,1),transform .6s cubic-bezier(.32,.72,0,1);
}
.bnswap img:first-child{position:relative}
.bnswap img + img{position:absolute;left:0;top:0;right:0;bottom:0;height:100%;object-fit:cover}
.bnswap img.on{opacity:1;transform:none}
@media (prefers-reduced-motion:reduce){
.bnswap img{transition:none;transform:none}
}
/* ═════ 배너 롤링 칸 (2026-08-22 개편) ═════
칸(.bncell)마다 독립으로 좌우로 넘어간다. 앞의 .bnswap 페이드를 대신한다.
장수가 늘어도 CSS 는 그대로다 — 마크업에 ![]()
만 더 넣으면 된다 */
.bnrow > .bncell{position:relative;min-width:0}
.bnroll{position:relative;display:block;overflow:hidden;border-radius:12px}
.bnroll img{
display:block;width:100%;
position:absolute;left:0;top:0;right:0;bottom:0;height:100%;object-fit:cover;
opacity:0;transform:translateX(100%);
transition:opacity .55s cubic-bezier(.32,.72,0,1),transform .55s cubic-bezier(.32,.72,0,1);
}
/* 첫 장이 칸 높이를 만든다. 안 보이는 동안에도 자리는 지킨다 */
.bnroll img:first-child{position:relative;height:auto}
/* 보이는 장 / 왼쪽으로 나간 장 / 오른쪽에 대기 중인 장 */
.bnroll img.on{opacity:1;transform:translateX(0)}
.bnroll img.bl{opacity:0;transform:translateX(-100%)}
.bnroll img.br{opacity:0;transform:translateX(100%)}
/* 화살표는 칸 안쪽에 둔다. 밖으로 빼면 두 칸 사이에서 서로 겹친다.
평소엔 숨어 있다가 손이 올라오면 뜬다 */
.bncell .bnarw{left:auto;right:auto;opacity:0;transition:opacity .18s}
.bncell .bnarw.l{left:10px}
.bncell .bnarw.r{right:10px}
.bncell:hover .bnarw{opacity:1}
/* 모션을 줄여 달라는 설정이면 애니메이션 없이 즉시 바뀐다 */
@media (prefers-reduced-motion:reduce){
.bnroll img{transition:none}
}
/* ═════════════ 모바일 카드 색 확정 (2026-08-13) ═════════════
카드 글자가 흰색인 채로 흰 판 위에 올라가 안 보였다.
hover:none 블록에만 반전을 걸어 뒀는데 그건 기기가 정해 준다 — 폭 기준으로 직접 박는다.
카드 구조가 .vtag 에서 .vcourse 로 바뀌어 있어 그쪽도 같이 지정한다 */
@media (max-width:720px){
.vcard .vcourse{color:#2c3a4a}
.vcard .vcourse i{color:#9aa7b5}
.vcard .vname{font-size:15px;color:#141a20;text-shadow:none;margin-bottom:6px}
.vcard .vhash{color:#5b6b7f}
.vcard .vfeat span{background:#f1f5f9;border-color:transparent;color:#4c5a6b}
.vcard .vfeat span.ok{background:#e6f6ed;color:#137a4b}
.vcard .vfeat span.mute{background:#f1f5f9;color:#78859a}
.vcard .vfeat span.day{background:#fdf2e2;color:#8a6510}
.vcard .vfeat span.night{background:#eaedfb;color:#3b4a91}
.vcard .vfeat span.grade{background:#eaf2fe;color:#1a5cb8}
.vcard .vprice .now{color:#141a20}
.vcard .vprice .was{color:#9aa7b5}
.vcard .vprice .won,.vcard .vprice .per{color:#5b6b7f}
}
/* ═══════════════════════════════════════════════════════════
2026-08-18 회의 반영 — 상세 조건
기존 규칙은 한 줄도 안 고친다. 여기에만 더한다
═══════════════════════════════════════════════════════════ */
.hmore{max-width:812px;margin:10px auto 0;text-align:center}
.hmt{
border:.5px solid rgba(16,24,40,.14);background:rgba(255,255,255,.86);
-webkit-backdrop-filter:saturate(180%) blur(18px);backdrop-filter:saturate(180%) blur(18px);
border-radius:999px;padding:7px 15px 7px 17px;cursor:pointer;
font-size:13px;font-weight:600;color:var(--ink-2);letter-spacing:-.02em;
display:inline-flex;align-items:center;gap:7px;
box-shadow:0 1px 2px rgba(16,24,40,.05),0 6px 18px rgba(16,24,40,.07);
transition:color .16s,border-color .16s,background .16s;
}
.hmt:hover{color:var(--brand);border-color:rgba(21,112,239,.34);background:#fff}
.hmore.picked .hmt{color:var(--brand);border-color:rgba(21,112,239,.42);background:var(--brand-soft)}
.hmt .cnt{font-weight:700;color:var(--brand)}
.hmt .ar{
width:6px;height:6px;border-right:1.6px solid currentColor;border-bottom:1.6px solid currentColor;
transform:rotate(45deg);margin-top:-3px;transition:transform .2s cubic-bezier(.32,.72,0,1);
}
.hmore.open .hmt .ar{transform:rotate(-135deg);margin-top:1px}
.hmp{
display:none;margin-top:9px;text-align:left;
background:rgba(255,255,255,.9);
-webkit-backdrop-filter:saturate(180%) blur(22px);backdrop-filter:saturate(180%) blur(22px);
border:.5px solid rgba(16,24,40,.07);border-radius:18px;padding:16px 18px 14px;
box-shadow:0 1px 2px rgba(16,24,40,.04),0 10px 26px rgba(16,24,40,.10),0 28px 64px rgba(16,24,40,.13);
}
.hmore.open .hmp{display:block;animation:hpop .2s cubic-bezier(.32,.72,0,1)}
.mgrp{display:flex;align-items:center;gap:12px;padding:7px 0}
.mgrp+.mgrp{border-top:.5px solid rgba(16,24,40,.06)}
.mlb{
flex:0 0 78px;font-size:12px;font-weight:700;color:var(--ink-3);
letter-spacing:-.02em;padding-top:1px;
}
.mchips{display:flex;flex-wrap:wrap;gap:6px;flex:1;min-width:0}
.mchips button{
border:1px solid var(--line);background:var(--paper);border-radius:999px;
padding:6px 13px;font-size:13px;font-weight:500;color:var(--ink);
letter-spacing:-.02em;cursor:pointer;
transition:background .14s,border-color .14s,color .14s,transform .1s;
}
.mchips button:hover{border-color:rgba(21,112,239,.38);color:var(--brand)}
.mchips button:active{transform:scale(.97)}
.mchips button.on{
background:var(--brand);border-color:var(--brand);color:#fff;font-weight:600;
}
.mfoot{
display:flex;align-items:center;gap:12px;
margin-top:11px;padding-top:11px;border-top:.5px solid rgba(16,24,40,.09);
}
.mrst{
border:0;background:rgba(16,24,40,.055);border-radius:8px;
padding:7px 13px;font-size:12.5px;font-weight:600;color:var(--ink);cursor:pointer;
letter-spacing:-.02em;transition:background .14s;
}
.mrst:hover{background:rgba(16,24,40,.09)}
.mnote{font-size:12px;color:var(--ink-3);letter-spacing:-.02em}
@media (hover:none){
.hmt:hover{color:var(--ink-2);border-color:rgba(16,24,40,.14);background:rgba(255,255,255,.86)}
.mchips button:hover{border-color:var(--line);color:var(--ink)}
}
@media (max-width:760px){
.hmore{margin-top:9px}
.mgrp{display:block;padding:9px 0}
.mlb{display:block;margin-bottom:7px}
.mchips button{padding:8px 14px;font-size:13.5px}
.mfoot{flex-direction:column;align-items:stretch;gap:8px}
.mnote{text-align:center}
}
/* ═══════════════════════════════════════════════════════════
2026-08-18 — 모바일 재설계
좌측 사이드바를 없앤 자리를 아이콘 네비가 대신한다.
검색툴은 접어 두고, 요약 한 줄을 탭하면 열린다 (트립닷컴 문법)
═══════════════════════════════════════════════════════════ */
.msum{display:none}
@media (max-width:720px){
/* ① 조건 요약 바 제거 — 아래 검색툴과 내용이 겹친다 */
.mtopbar{display:none !important}
/* ② 히어로를 낮춘다. 모바일은 첫 화면에 기능이 보여야 한다 */
.p3page .hero.band{height:150px}
.p3page .hero.band h1{font-size:19.5px}
.p3page .hero.band .sub{display:none}
/* ③ 상단 로고·검색 — 넘치지 않게 */
.p3page .uhead{padding:10px 14px;gap:9px;align-items:center}
.p3page .uhead img.logo{flex:0 0 auto}
.p3page .uhead .ubox{flex:1 1 auto;min-width:0}
.p3page .uhead .ubox input{min-width:0;width:100%}
/* ④ 아이콘 네비 — 사라진 좌측 메뉴를 여기서 되살린다 */
.p3page .hstack.out{margin:0;padding:0}
.hstack.out .itabs{
display:grid !important;grid-template-columns:repeat(4,1fr);
gap:0;padding:16px 8px 14px;margin:0;overflow:visible;
background:var(--paper);border:0;border-radius:0;
}
.itab{
display:flex;flex-direction:column;align-items:center;gap:7px;
padding:0;border:0;font-size:12px;font-weight:600;color:var(--ink);
letter-spacing:-.03em;text-align:center;line-height:1.25;white-space:normal;
}
.itab::before{
content:"";position:absolute;width:0;height:0;
}
.itab svg{
width:24px;height:24px;box-sizing:content-box;
padding:13px;border-radius:50%;
background:var(--brand-soft);color:var(--brand);
}
.itab.on{color:var(--brand);border:0}
.itab.on svg{background:var(--brand);color:#fff}
/* ⑤ 검색툴 — 기본은 접는다 */
.msum{
display:grid;grid-template-columns:minmax(0,1fr) 52px;align-items:stretch;
width:calc(100% - 28px);min-height:64px;margin:0 14px 4px;padding:0;
overflow:hidden;cursor:pointer;text-align:left;font:inherit;color:inherit;
background:var(--paper);border:1px solid #ccd9e8;border-radius:17px;
box-shadow:0 7px 20px rgba(35,64,94,.09);
}
.msum .ms-t{
min-width:0;padding:11px 8px 10px 14px;
display:flex;flex-direction:column;justify-content:center;
}
.msum .ms-t b{
display:block;font-size:14px;font-weight:750;letter-spacing:-.03em;
white-space:nowrap;overflow:hidden;text-overflow:ellipsis;
}
.msum .ms-t > span{
display:block;font-size:11px;color:#7f90a4;margin-top:4px;letter-spacing:-.02em;
white-space:nowrap;overflow:hidden;text-overflow:ellipsis;
}
.msum .ms-e{
display:grid;place-items:center;position:relative;background:var(--brand);color:#fff;
}
.msum .ms-e svg{width:19px;height:19px;transform:translateY(-5px)}
.msum .ms-e i{
position:absolute;bottom:9px;width:6px;height:6px;
border-right:1.5px solid currentColor;border-bottom:1.5px solid currentColor;
transform:rotate(45deg);transition:transform .2s ease;
}
.msum .ms-state{
position:absolute!important;width:1px!important;height:1px!important;
padding:0!important;margin:-1px!important;overflow:hidden!important;
clip:rect(0,0,0,0)!important;white-space:nowrap!important;border:0!important;
}
.hstack.sopen .msum{border-color:rgba(21,112,239,.55)}
.hstack.sopen .msum .ms-e i{transform:rotate(225deg) translate(-1px,-1px)}
/* 열기 전에는 검색툴과 상세조건을 감춘다 */
.p3page .hsearch,
.p3page .hmore{display:none}
.p3page .hstack.sopen .hsearch{display:flex}
.p3page .hstack.sopen .hmore{display:block}
.hsearch{
flex-direction:column;margin:0 14px;padding:7px;
border-radius:14px;box-shadow:var(--shadow-2);
animation:hpop .2s cubic-bezier(.32,.72,0,1);
}
.hf{padding:11px 13px;border-bottom:1px solid var(--line-2);border-radius:8px}
.hf:last-of-type{border-bottom:0}
.hbtn{
width:100%;margin:7px 0 0;padding:14px 0;font-size:15px;
border-radius:10px;justify-content:center;
}
.hmore{margin:9px 14px 0}
.hmp{padding:14px 15px 12px}
/* ⑥ 패널이 화면을 넘지 않게 */
.hpanel{
position:static;width:auto !important;margin-top:9px;
box-shadow:none;border:1px solid var(--line);border-radius:12px;
}
.hpanel.right{left:auto;right:auto}
.pchk{max-height:230px}
/* ⑦ 배너를 아이콘 바로 아래로 붙인다 */
.p3page .full{padding:16px 0 30px}
}
@media (max-width:380px){
.itab{font-size:11px}
.itab svg{width:21px;height:21px;padding:11px}
.msum .ms-t b{font-size:12.5px}
}
/* ═══════════════════════════════════════════════════════════
2026-08-18 — 좌측 카테고리 네비를 a3 에 되살린다
지운 것은 「필터」 사이드바이고, 이것은 「네비게이션」이다.
상단 검색과 묻는 것이 다르므로 08-09 해부도 2-4 의 중복 문제가 없다
═══════════════════════════════════════════════════════════ */
.p3page .rail{
flex:0 0 176px;width:176px;padding:20px 0;
border-right:1px solid var(--line);background:var(--paper);
position:sticky;top:0;align-self:flex-start;
}
.p3page .rail a{padding:10px 20px;font-size:13.5px;letter-spacing:-.025em;border-radius:0}
.p3page .rail a svg{width:17px;height:17px}
.p3page .rail-g{padding-bottom:13px;margin-bottom:13px}
.p3page .rail .lbl{padding:0 20px 7px}
/* 히어로가 오른쪽 끝까지 빠지는 인상은 유지한다 */
.p3page .t3main{min-width:0}
@media (max-width:1180px){
.p3page .rail{flex:0 0 150px;width:150px}
.p3page .rail a{padding:9px 16px;font-size:13px}
.p3page .rail .lbl{padding:0 16px 6px}
}
/* 모바일 — 좌측은 접는다. 아이콘 네비 4개가 그 역할을 한다 */
@media (max-width:720px){
.p3page .rail{display:none}
}
/* ═══════════════════════════════════════════════════════════
2026-08-18 — 역할 교대
PC 좌측 rail 이 카테고리를 맡는다 → 검색툴 위 탭은 중복이라 뺀다
모바일 rail 을 접으므로 탭이 아이콘 네비 역할을 한다
═══════════════════════════════════════════════════════════ */
.p3page .itabs{display:none}
.p3page .hsearch{border-radius:var(--r-l)}
@media (max-width:720px){
.p3page .itabs{display:grid !important}
}
/* 모바일 잔손질 — 검색 인풋 넘침, 안내띠 두 줄 */
@media (max-width:720px){
.p3page .uhead .ubox{flex:1 1 0;min-width:0;max-width:none;padding:6px 8px}
.p3page .uhead .ubox input{min-width:0;width:100%;font-size:16px}
.p3page .uhead .ubox button{flex:0 0 auto}
.p3bar{
display:flex;align-items:center;white-space:nowrap;overflow:hidden;
padding:7px 14px;font-size:11px;
}
.p3bar a{display:none}
}
/* ═══════════════════════════════════════════════════════════
2026-08-18 — 카드 위계: 호텔이 메인, 골프가 세컨
「호텔이 메인이고 골프가 그다음 세컨」 — 신대표 01:28:40
순서만 바꾸면 안 되고 크기도 뒤집어야 위계가 읽힌다
═══════════════════════════════════════════════════════════ */
.p3page .vname,
.p3page .vcard:hover .vname{
font-size:19px;font-weight:800;letter-spacing:-.045em;
line-height:1.28;margin-bottom:5px;
}
.p3page .vcourse,
.p3page .vcard:hover .vcourse{
font-size:13px;font-weight:600;letter-spacing:-.03em;margin-bottom:7px;
}
.p3page .vcourse b{font-size:10.5px;padding:1.5px 6px;vertical-align:1px}
.p3page .vgrid.c3 .vname{font-size:20.5px}
.p3page .vgrid.c5 .vname{font-size:17px}
@media (max-width:760px){
.p3page .vname,.p3page .vcard:hover .vname{font-size:15.5px;margin-bottom:3px}
.p3page .vcourse,.p3page .vcard:hover .vcourse{font-size:12px;margin-bottom:5px}
}
/* 2026-08-18 정정 — 메인에는 좌측 네비를 두지 않는다.
회의 결정대로 메인은 상단 검색으로 통일하고, 조건 선택 패널은 「맞춤견적」 화면에서 살린다
(신대표 01:19:44 「맞춤 견적을 눌렀을 때 이 다이나믹이 나오게끔」) */
.p3page .rail{display:none}
.p3page .itabs{display:flex}
@media (max-width:720px){ .p3page .itabs{display:grid !important} }
/* 2026-08-18 — 골프장 안내 갤러리
브로셔 사진이 가로 원본이라 세로 큰 칸에 cover 하면 하늘만 남는다.
시선을 아래로 내려 코스가 보이게 한다 */
.gmos a.g1 img{object-position:50% 64%}
.gmos a:not(.g1) img{object-position:50% 55%}
/* ═══════════════════════════════════════════════════════════
2026-08-18 — 골프장 지도를 구글 지도로 (회의 결정 18)
「지도는 구글 지도로 바꾸고 크게 넣습니다」 — 신대표 01:24:19
자체 SVG 는 「성의 없어 보인다」는 지적을 받았다
═══════════════════════════════════════════════════════════ */
.gmapbox{
border-radius:var(--r-m);overflow:hidden;border:1px solid var(--line);
background:var(--line-2);margin-bottom:14px;
}
.gmapbox iframe{display:block;width:100%;height:340px;border:0}
.pmap .mwrap{display:block}
.pmap .mtime{padding:0}
.pmap .mtime .mt-lb{
font-size:12px;font-weight:700;color:var(--ink-3);letter-spacing:-.02em;margin-bottom:6px;
}
@media (max-width:760px){
.gmapbox iframe{height:230px}
}
/* 지도를 크게 — .mwrap 의 104px 2열 그리드를 확실히 푼다 (회의 결정 18) */
.pmap .mwrap{display:block !important;grid-template-columns:none !important}
.pmap .gmapbox{width:100%}
/* ═══════════════════════════════════════════════════════════
2026-08-18 — 작성자를 팀 명의로
개인 이름을 걸면 책임이 따르고 사람이 바뀌면 다섯 페이지를 다 갈아야 한다.
신뢰 축은 「누가 확인했나」이므로 팀 이름 + 확인 표시로 대신한다
═══════════════════════════════════════════════════════════ */
/* 파란 체크 원 대신 괌이지 로고를 세운다. 이미지 자체에 흰 원이 있어
배경색과 체크 아이콘은 걷었다 (2026-08-21 CTO).
정사각 이미지라 cover 로도 안 찌그러진다 — 원본 1254x1254 */
.pau.team .tmark{
flex:0 0 auto;width:42px;height:42px;border-radius:50%;
object-fit:cover;display:block;background:#fff;
}
.pau.team .nm b{font-size:14.5px;font-weight:700;letter-spacing:-.03em}
.pau.team .nm span{font-size:11.5px;color:var(--ink-3);letter-spacing:-.02em}
/* ═══════════════════════════════════════════════════════════
2026-08-18 — 카드 팝업 흔들림 수정
호버하면 금액이 20px→24px 로 커진다. 그 순간 폭이 넘쳐
「1인 기준」이 다음 줄로 밀리고 카드 높이가 바뀌어 버벅거렸다.
→ 「1인 기준」을 처음부터 아래 줄에 고정한다. 그러면 흔들릴 일이 없다
═══════════════════════════════════════════════════════════ */
.vprice{flex-wrap:wrap;row-gap:0}
.vprice .per{
flex:0 0 100%;width:100%;margin:2px 0 0;
font-size:11.5px;color:var(--ink-3);letter-spacing:-.02em;
}
.vcard:hover .vprice .per{color:var(--ink-3)}
/* 금액 줄 높이를 미리 잡아 둔다 — 커져도 아래가 안 밀린다 */
.p3page .vprice{min-height:46px;align-content:flex-start}
/* ═══════════════════════════════════════════════════════════
2026-08-18 (재) — 좌측 네비를 메인에 둔다. CTO 확인 화면 기준
앞서 뺐다가 되살린다. 필터가 아니라 길잡이라 상단 검색과 겹치지 않는다.
골프장 안내 아래에 다섯 곳을 펼쳐 바로 갈 수 있게 한다
═══════════════════════════════════════════════════════════ */
.p3page .rail{
display:block;flex:0 0 186px;width:186px;padding:16px 0 24px;
border-right:1px solid var(--line);background:var(--paper);
position:sticky;top:0;align-self:flex-start;
}
.p3page .rail a{padding:10px 20px;font-size:13.5px;letter-spacing:-.03em;border-radius:0}
.p3page .rail a svg{width:17px;height:17px}
.p3page .rail-g{padding-bottom:12px;margin-bottom:12px}
.p3page .rail .lbl{padding:0 20px 7px}
.p3page .rail-sub a{padding:6px 20px 6px 48px;font-size:12.5px}
.p3page .rail-sub .dot{right:20px}
/* 좌측이 카테고리를 맡으므로 검색툴 위 탭은 PC 에서 뺀다 */
.p3page .itabs{display:none}
.p3page .hsearch{border-radius:var(--r-l)}
@media (max-width:1180px){
.p3page .rail{flex:0 0 158px;width:158px}
.p3page .rail a{padding:9px 16px;font-size:13px}
.p3page .rail .lbl{padding:0 16px 6px}
.p3page .rail-sub a{padding:6px 16px 6px 40px}
.p3page .rail-sub .dot{right:16px}
}
@media (max-width:720px){
.p3page .rail{display:none}
.p3page .itabs{display:grid !important}
}
/* ═══════════════════════════════════════════════════════════
2026-08-18 — 우하단 플로팅 (기존 괌이지와 같은 자리)
실서버 top.asp 가 카톡·공유·맨위로 셋을 띄운다. 그대로 옮기되 모양만 새로 잡는다
═══════════════════════════════════════════════════════════ */
.gfloat{
position:fixed;right:22px;bottom:26px;z-index:70;
display:flex;flex-direction:column;align-items:flex-end;gap:9px;
}
.gf{
display:flex;align-items:center;justify-content:center;gap:7px;
border:0;cursor:pointer;border-radius:999px;
box-shadow:0 2px 6px rgba(16,24,40,.12),0 10px 26px rgba(16,24,40,.16);
transition:transform .16s cubic-bezier(.32,.72,0,1),box-shadow .16s,background .16s;
}
.gf:hover{transform:translateY(-2px);box-shadow:0 4px 10px rgba(16,24,40,.14),0 16px 34px rgba(16,24,40,.2)}
.gf:active{transform:scale(.97)}
.gf svg{width:21px;height:21px;flex:0 0 auto}
.gf.kakao{
background:#FEE500;color:#191600;padding:12px 19px 12px 16px;
font-size:14px;font-weight:700;letter-spacing:-.03em;
}
.gf.kakao .lb{white-space:nowrap}
.gf.share,.gf.top{
width:46px;height:46px;padding:0;
background:rgba(255,255,255,.92);color:var(--ink-2);
-webkit-backdrop-filter:saturate(180%) blur(16px);backdrop-filter:saturate(180%) blur(16px);
border:.5px solid rgba(16,24,40,.08);
}
.gf.share:hover,.gf.top:hover{color:var(--brand)}
/* 맨 위로는 조금 내려가야 나타난다 */
.gf.top{opacity:0;visibility:hidden;transform:translateY(6px)}
.gf.top.on{opacity:1;visibility:visible;transform:none}
/* 모바일 — 하단 고정 바가 이미 있으므로 카톡 라벨을 접고 위로 띄운다 */
@media (max-width:720px){
.gfloat{right:13px;bottom:calc(72px + env(safe-area-inset-bottom));gap:8px}
.gf.kakao{width:46px;height:46px;padding:0}
.gf.kakao .lb{display:none}
.gf.share{display:none}
/* ── 하단 고정 바가 없는 페이지는 사정이 다르다 (2026-08-24) ────────
호텔 상세 12곳과 골프 상세 5곳에는 .mfixed 가 없다. 위 규칙을 그대로 두면
모바일에서 카톡과 공유가 둘 다 사라져 상담 창구가 화면에 남지 않는다.
390px 실측으로 확인했다 — 「맨 위로」 하나만 떠 있었다.
그런 페이지에서는 셋을 다 살리고 바닥에 붙인다.
:not(:has()) 로 예외를 파는 방향이라 이 선택자를 모르는 브라우저에서는
지금과 똑같이 동작한다. 뒤집어 쓰면 메인이 망가지므로 방향을 지킨다 */
body:not(:has(.mfixed)) .gfloat{bottom:calc(18px + env(safe-area-inset-bottom))}
body:not(:has(.mfixed)) .gf.kakao,
body:not(:has(.mfixed)) .gf.share{display:flex}
}
/* 상단 유틸 — 로그인만 살짝 도드라지게 */
.uhead .unav .lg{
border:1px solid var(--line);border-radius:999px;padding:5px 13px;
font-weight:600;color:var(--ink);
}
.uhead .unav .lg:hover{border-color:var(--brand);color:var(--brand)}
/* 맞춤견적 — 조건 패널을 본문 왼쪽에 세운다 (메인에서 걷어낸 그 패널이다) */
.qwrap .side.classic{
flex:0 0 288px;width:288px;border-right:1px solid var(--line);
border-radius:0;box-shadow:none;background:var(--paper);
position:sticky;top:0;align-self:flex-start;max-height:100vh;
}
@media (max-width:900px){
.qwrap{display:block !important}
.qwrap .side.classic{
flex:none;width:100%;border-right:0;border-bottom:1px solid var(--line);
position:static;max-height:none;
}
}
/* 맞춤견적 — 출발일 칸 (조건 순서를 상단 검색바와 맞췄다) */
.qdate input{
width:100%;border:1px solid var(--line);border-radius:var(--r-s);padding:10px 12px;
font-family:inherit;font-size:14px;color:var(--ink);outline:0;background:var(--paper);
transition:border-color .15s;
}
.qdate input:focus{border-color:var(--brand)}
.qdate .hint{display:block;font-size:11.5px;color:var(--ink-3);margin-top:6px;letter-spacing:-.02em}
/* ═══════════════════════════════════════════════════════════
2026-08-18 (재) — 메인 카드 구조를 프로모션 카드와 맞춘다
① 골프장과 호텔을 같은 크기로 (신대표 「비중이 같았으면」 · AI 2곳 공통 지적)
② 포함사항 한 줄 — 데이터가 있는 것만 (조식 A47 · 이동 A50 · 항공 A49)
③ 금액 기준을 명시 — 2인 1실 · 1인 기준
═══════════════════════════════════════════════════════════ */
.p3page .vcourse,
.p3page .vcard:hover .vcourse{
font-size:16px;font-weight:800;letter-spacing:-.045em;line-height:1.3;margin-bottom:2px;
}
.p3page .vname,
.p3page .vcard:hover .vname{
font-size:16px;font-weight:800;letter-spacing:-.045em;line-height:1.3;margin-bottom:6px;
}
.p3page .vcourse b{font-size:10.5px;padding:2px 7px;vertical-align:2px;margin-left:3px}
/* 포함사항 줄 */
.vinc{display:flex;flex-wrap:wrap;gap:4px;margin-bottom:8px}
.vinc span{
font-size:11px;font-weight:600;letter-spacing:-.02em;border-radius:6px;padding:3px 7px;
background:rgba(255,255,255,.18);color:#fff;
}
.vcard:hover .vinc span{background:#e6f6ed;color:#137a4b}
@media (hover:none){ .vinc span{background:#e6f6ed;color:#137a4b} }
/* 금액 기준 */
.p3page .vprice .per{font-size:11px}
/* ═══════════════════════════════════════════════════════════
2026-08-18 — 모바일 점검에서 나온 것 일괄 수정
원인 하나: 모바일 규칙을 «.p3page» 스코프로 넣었는데
골프장·공항픽업 페이지에는 그 래퍼가 없어 하나도 안 먹었다.
→ 스코프를 뺀 규칙을 따로 둔다
═══════════════════════════════════════════════════════════ */
@media (max-width:720px){
/* ① 상단 로고·검색 — 우측으로 넘치던 것 (전 페이지 공통) */
.uhead{padding:10px 14px;gap:9px;align-items:center;flex-wrap:nowrap}
.uhead img.logo{flex:0 0 auto;height:26px}
.uhead .ubox{flex:1 1 0;min-width:0;max-width:none;padding:6px 8px}
.uhead .ubox input{min-width:0;width:100%;font-size:16px}
.uhead .ubox button{flex:0 0 auto}
.uhead .unav{display:none}
/* ② 시안 안내띠 — 세 줄로 터지던 것. 한 줄로 눌러 둔다 */
.navjump{
padding:8px 14px;font-size:11.5px;gap:9px;
white-space:nowrap;overflow:hidden;
}
.navjump a{padding:4px 10px;font-size:11px;flex:0 0 auto}
.navjump .sp{display:none}
/* ③ 골프장 안내 — 알짜 넷을 2열로 (세로로 길게 늘어지던 것) */
.pkey{grid-template-columns:1fr 1fr;gap:8px}
.pkey > div{padding:11px 12px}
.pkey b{font-size:14px}
.pkey i{font-size:11px}
/* ④ 프로모션 히어로 — 배너 위에 캡션이 겹쳐 글자가 뭉갰다.
모바일에서는 캡션을 배너 아래로 내린다 */
.pmhero{border-radius:var(--r-m)}
.pmhero .cap{
position:static;background:var(--paper);color:var(--ink);
padding:12px 14px 13px;border:1px solid var(--line);border-top:0;
border-radius:0 0 var(--r-m) var(--r-m);
}
.pmhero .cap b{font-size:14.5px}
.pmhero .cap span{font-size:12px;color:var(--ink-2);opacity:1}
.pmhero .cap .to{
background:var(--brand-soft);border:0;color:var(--brand);font-size:11.5px;padding:5px 11px;
}
.pbase{font-size:12.5px;padding:11px 13px;line-height:1.9}
/* ⑤ 맞춤견적 — 조건 패널이 통째로 사라졌던 것.
메인용 «side.classic 숨김» 규칙이 여기까지 먹었다 */
.qwrap{display:block !important}
.qwrap .side.classic{
display:block !important;
flex:none;width:100%;border-right:0;border-bottom:1px solid var(--line);
position:static;max-height:none;
}
.qwrap .side-body{max-height:none;overflow:visible}
.qmain{padding:18px 14px 30px}
.qstep{gap:6px;font-size:12px}
.qstep i{width:12px}
.qrow{grid-template-columns:1fr}
}
.mbOnly{display:none}
@media (max-width:720px){ .pcOnly{display:none} .mbOnly{display:inline} }
/* ═══════════════════════════════════════════════════════════════
2026-08-19 — 서버가 찍는 button 을 칩으로
시안은 label>input 체크박스였는데 실서버는