/* 몰디브대학 v3. 원칙: 사진·지도 먼저, 박스 없음, 색은 lagoon 하나. DESIGN.md 참조 */
:root{
  --paper:#FAFBFB; --ink:#15201F; --mute:#6B7A7A; --faint:#9AA6A6;
  --lagoon:#14A5A9; --lagoon-ink:#0D7F83; --lagoon-soft:#E4F4F4;
  --sand:#EFEAE0; --sand-2:#F6F3EC; --deep:#0E3440; --deep-2:#143F4E; --coral:#D9694A; --coral-soft:#FBEDE7; --moss:#2E8B62; --moss-soft:#E7F3ED;
  --line:#E6EBEA;
  --s1:4px; --s2:8px; --s3:12px; --s4:16px; --s5:24px; --s6:32px; --s7:48px; --s8:72px;
  --r:14px; --r-sm:10px;
  /* 타입 스케일 12/14/16/18/22/28/36/48 */
  --t12:.75rem; --t14:.875rem; --t16:1rem; --t18:1.125rem; --t22:1.375rem; --t28:1.75rem; --t36:2.25rem; --t48:3rem;
  /* 폭: 사진·지도 1200, 산문 680 */
  --wide:1200px; --prose:680px;
  /* 스티키 바 높이 (header nav 68 + border 1) */
  --hdr:69px; --subnav:52px;
}
*{box-sizing:border-box}
html{-webkit-text-size-adjust:100%; scroll-behavior:smooth}
body{margin:0; background:var(--paper); color:var(--ink);
  font-family:"Pretendard Variable",Pretendard,"Apple SD Gothic Neo","Noto Sans KR","Malgun Gothic",sans-serif;
  font-size:16px; line-height:1.65; -webkit-font-smoothing:antialiased; word-break:keep-all; overflow-wrap:anywhere;}
main{overflow-x:clip}
img{max-width:100%; display:block}
a{color:inherit; text-decoration:none}
/* 본문 속 링크만 밑줄. 컴포넌트(.glist, .btn, 탭바 등)는 각자 처리 */
p a, li a, td a, dd a, .prose a, .note a, .edu a{text-decoration:underline; text-decoration-thickness:1px; text-underline-offset:3px; text-decoration-color:var(--faint)}
p a:hover, li a:hover, td a:hover, .note a:hover, .edu a:hover{text-decoration-color:var(--ink)}
h1,h2,h3{margin:0; line-height:1.25; letter-spacing:-.02em; font-weight:800; text-wrap:balance}
h1{font-size:clamp(var(--t28), 1.2rem + 2.2vw, var(--t36))}
h2{font-size:clamp(var(--t22), 1rem + 1.2vw, var(--t28))}
h3{font-size:var(--t18); font-weight:700}
p{margin:0 0 var(--s4)}
.wide{max-width:var(--wide); margin:0 auto; padding:0 var(--s5)}
.prose{max-width:var(--prose)}
.mute{color:var(--mute)} .small{font-size:var(--t14)} .xs{font-size:var(--t12)}
.num{font-variant-numeric:tabular-nums}
.skip{position:absolute; left:-999px} .skip:focus{left:8px; top:8px; background:#fff; padding:6px 10px; z-index:99}
:focus-visible{outline:2px solid var(--lagoon); outline-offset:2px}
@media (prefers-reduced-motion: reduce){*{transition:none!important; animation:none!important}}

/* ---------- header ---------- */
header.site{position:sticky; top:0; z-index:30; background:rgba(250,251,251,.92); backdrop-filter:saturate(1.2) blur(10px); border-bottom:1px solid var(--line)}
header.site nav{max-width:var(--wide); margin:0 auto; padding:0 var(--s5); height:calc(var(--hdr) - 1px); display:flex; align-items:center; gap:var(--s5)}
.brand{font-weight:800; font-size:var(--t18); letter-spacing:-.03em; display:inline-flex; align-items:center; gap:8px}
.brand svg{width:22px; height:22px}
header.site .links{display:flex; gap:var(--s4); margin-left:auto; align-items:center}
header.site .links a{font-weight:600; font-size:.95rem; color:var(--mute); padding:6px 2px}
header.site .links a:hover, header.site .links a.on{color:var(--ink)}
header.site .links a.primary{color:#fff; background:var(--ink); padding:8px 16px; border-radius:99px; font-size:.9rem; line-height:1.5}
@media(max-width:640px){header.site .links a:not(.primary){display:none}}

/* ---------- hero map (home) ---------- */
.hero-map{position:relative; max-width:var(--wide); margin:var(--s5) auto 0; padding:0 var(--s5)}
.hero-map .frame{position:relative; border-radius:20px; overflow:hidden; background:linear-gradient(160deg,#0E3440 0%,#145C6A 45%,#1C9AA3 100%); aspect-ratio:16/8; min-height:460px}
@media(max-width:800px){.hero-map .frame{aspect-ratio:auto; min-height:0; height:auto}}
.hero-map svg.atolls{position:absolute; inset:0; width:100%; height:100%}
.hero-map svg.atolls .dot{fill:#fff; fill-opacity:.55; transition:fill-opacity .15s, r .15s}
.hero-map svg.atolls a:hover .dot, .hero-map svg.atolls a:focus .dot{fill-opacity:1}
.hero-map svg.atolls .male{fill:#F6C453}
.hero-map svg.atolls .lbl{font-size:11px; fill:#fff; fill-opacity:.7; font-weight:500}
.hero-map .panel{position:relative; z-index:2; padding:clamp(28px,4vw,56px); max-width:560px; color:#fff}
.hero-map .panel h1{color:#fff; font-size:clamp(var(--t28), 1.4rem + 2.4vw, var(--t48)); margin-bottom:var(--s3)}
.hero-map .panel .lead{font-size:1.05rem; color:rgba(255,255,255,.82); max-width:440px}
.hero-map .q{margin-top:var(--s5); font-weight:700; color:#fff}
.hero-map .opts{display:flex; flex-wrap:wrap; gap:8px; margin-top:var(--s3)}
.hero-map .opts a{background:rgba(255,255,255,.14); border:1px solid rgba(255,255,255,.35); color:#fff; padding:10px 16px; border-radius:99px; font-weight:600; font-size:.92rem; backdrop-filter:blur(6px)}
.hero-map .opts a:hover{background:#fff; color:var(--deep)}
.hero-map .foot{margin-top:var(--s4); font-size:.82rem; color:rgba(255,255,255,.7)}
.hero-map .tip{position:absolute; z-index:3; pointer-events:none; background:#fff; color:var(--ink); border-radius:10px; padding:8px 12px; font-size:.82rem; line-height:1.4; box-shadow:0 10px 30px -10px rgba(0,0,0,.4); transform:translate(-50%,-120%); white-space:nowrap; opacity:0; transition:opacity .12s}
.hero-map .tip.on{opacity:1}
.hero-map .tip b{display:block; font-size:.9rem}
@media(max-width:800px){.hero-map svg.atolls{position:relative; height:260px; display:block} .hero-map .panel{max-width:none}}

/* ---------- sections ---------- */
section.row{max-width:var(--wide); margin:var(--s8) auto 0; padding:0 var(--s5)}
.rowhead{display:flex; align-items:flex-end; justify-content:space-between; gap:var(--s4); margin-bottom:var(--s4)}
.rowhead p{margin:4px 0 0; color:var(--mute)}
.rowhead a.more{font-weight:600; color:var(--mute); white-space:nowrap; padding-bottom:2px}
.rowhead a.more:hover{color:var(--ink)}
/* 홈 교재실: 제목 열 + 목록 열. 사설 블록(.edit)과 같은 2열 리듬 */
.row.guides{display:grid; grid-template-columns:1fr 1fr; gap:var(--s6); align-items:start}
.row.guides .rowhead{display:block; margin:0}
.row.guides .rowhead a.more{display:inline-block; margin-top:var(--s4); color:var(--ink); border-bottom:1.5px solid var(--ink); padding-bottom:1px}
.row.guides .glist{margin-top:6px}
@media(max-width:800px){
  .row.guides{grid-template-columns:1fr; gap:var(--s4)}
  .row.guides .rowhead{display:flex; margin-bottom:0}
  .row.guides .rowhead a.more{margin-top:0; color:var(--mute); border-bottom:0}
  .row.guides .glist{margin-top:0}
}

/* ---------- tiles (photo = card) ---------- */
.tiles{display:grid; grid-template-columns:repeat(4,1fr); gap:var(--s5) var(--s4)}
@media(max-width:1000px){.tiles{grid-template-columns:repeat(3,1fr)}}
@media(max-width:700px){.tiles{grid-template-columns:repeat(2,1fr); gap:var(--s5) var(--s3)}}
.scroller{display:flex; gap:var(--s4); overflow-x:auto; scroll-snap-type:x mandatory; padding-bottom:var(--s2); margin:0 calc(-1 * var(--s5)); padding-left:var(--s5); padding-right:var(--s5); -webkit-overflow-scrolling:touch; scrollbar-width:none}
.scroller::-webkit-scrollbar{display:none}
.scroller .tile{flex:0 0 min(300px, 72vw); scroll-snap-align:start}
/* 넓은 화면: 캐러셀은 1200 틀이 아니라 화면 오른쪽 끝까지 흘러 나간다 (잘린 타일 = 더 있다는 신호) */
@media(min-width:1200px){.scroller{margin-right:calc((var(--wide) - 100vw) / 2 - var(--s5)); padding-right:calc((100vw - var(--wide)) / 2 + var(--s5))}}
.tile{display:block; color:var(--ink)}
.tile .pic{position:relative; aspect-ratio:4/3; border-radius:var(--r); overflow:hidden; background:var(--sand-2)}
.tile .pic img{width:100%; height:100%; object-fit:cover; transition:transform .5s}
.tile:hover .pic img{transform:scale(1.03)}
.tile .pic .illo{position:absolute; inset:0; width:100%; height:100%; border-radius:0}
.tile .pic .illo-name{position:absolute; left:14px; right:14px; bottom:12px; color:#fff; font-weight:800; font-size:1.05rem; letter-spacing:-.02em; text-shadow:0 1px 8px rgba(0,0,0,.35)}
.tile .pic .tag{position:absolute; top:10px; left:10px; background:rgba(21,32,31,.78); color:#fff; font-size:.72rem; font-weight:700; padding:3px 9px; border-radius:99px; backdrop-filter:blur(4px)}
.tile .pic .tag.coral{background:rgba(217,105,74,.92)}
.tile .txt{padding:10px 2px 0}
.tile .name{font-weight:700; font-size:1rem; letter-spacing:-.01em}
.tile .meta{color:var(--mute); font-size:.82rem; margin-top:1px}
.tile .price{margin-top:6px; font-weight:800; font-size:1rem; letter-spacing:-.01em}
.tile .price small{font-weight:500; color:var(--mute); font-size:.8rem; margin-left:4px}
.tile .one{color:var(--mute); font-size:.82rem; margin-top:4px; line-height:1.45}
@media(max-width:700px){.tile .price small{display:block; margin-left:0}}

/* ---------- editorial block ---------- */
.edit{max-width:var(--wide); margin:var(--s8) auto 0; padding:0 var(--s5); display:grid; grid-template-columns:1fr 1fr; gap:var(--s6)}
@media(max-width:800px){.edit{grid-template-columns:1fr}}
.edit .art{border-radius:20px; overflow:hidden; background:var(--deep); min-height:320px; position:relative}
.edit .art .illo{position:absolute; inset:0; width:100%; height:100%; border-radius:0}
.edit .copy h2{margin-bottom:var(--s3)}
.edit .copy ul{list-style:none; padding:0; margin:var(--s4) 0 0}
.edit .copy li{padding:14px 0; border-top:1px solid var(--line); display:grid; grid-template-columns:auto 1fr; gap:var(--s4); align-items:baseline}
.edit .copy li:last-child{border-bottom:1px solid var(--line)}
.edit .copy li b{font-size:1.05rem; letter-spacing:-.01em}
.edit .copy li span{color:var(--mute); font-size:.92rem}
.edit .copy li a{font-weight:700; text-decoration:none; border-bottom:1.5px solid var(--ink)}

/* ---------- guide list (text rows, not cards) ---------- */
.glist{list-style:none; margin:0; padding:0; border-top:1px solid var(--line)}
.glist li a{display:grid; grid-template-columns:1fr auto; gap:var(--s4); padding:18px 0; border-bottom:1px solid var(--line); align-items:center; text-decoration:none; color:var(--ink)}
.glist b{font-size:var(--t18); font-weight:700; letter-spacing:-.01em}
.glist span span{display:block; color:var(--mute); font-size:.92rem; margin-top:2px}
.glist .arr{color:var(--faint); font-size:1.2rem; transition:transform .15s}
.glist li a:hover b{text-decoration:underline; text-decoration-thickness:1.5px; text-underline-offset:4px}
.glist li a:hover .arr{color:var(--ink); transform:translateX(2px)}

/* ---------- buttons ---------- */
.btn{display:inline-flex; align-items:center; justify-content:center; gap:8px; background:var(--ink); color:#fff; border-radius:99px; padding:13px 22px; font-weight:700; font-size:.95rem; border:1.5px solid var(--ink); cursor:pointer; font-family:inherit; text-decoration:none; line-height:1.4}
.btn:hover{background:#000}
.btn.lagoon{background:var(--lagoon); border-color:var(--lagoon)} .btn.lagoon:hover{background:var(--lagoon-ink); border-color:var(--lagoon-ink)}
.btn.ghost{background:transparent; color:var(--ink)} .btn.ghost:hover{background:var(--sand-2)}
.btn.light{background:#fff; color:var(--ink); border-color:#fff}
.btn.sm{padding:9px 16px; font-size:.86rem}
.btn.lg{padding:16px 28px; font-size:1.02rem}

/* ---------- resort page ---------- */
.rhero{position:relative; max-width:var(--wide); margin:var(--s4) auto 0; padding:0 var(--s5)}
.rhero .frame{position:relative; border-radius:20px; overflow:hidden; aspect-ratio:16/7; min-height:380px; background:var(--deep)}
@media(max-width:700px){.rhero .frame{aspect-ratio:4/5; min-height:0}}
.rhero .frame img{position:absolute; inset:0; width:100%; height:100%; object-fit:cover}
.rhero .frame .ocean{position:absolute; inset:0; background:radial-gradient(120% 90% at 20% 10%, #1FA9AE 0%, #146F7B 40%, #0E3440 100%)}
.rhero .frame .ocean svg{position:absolute; right:-4%; top:-6%; height:112%; width:auto; opacity:.9}
.rhero .frame::after{content:""; position:absolute; inset:0; background:linear-gradient(180deg, rgba(14,52,64,0) 40%, rgba(14,52,64,.78) 100%)}
.rhero .over{position:absolute; left:0; right:0; bottom:0; padding:clamp(20px,3.5vw,40px); color:#fff; z-index:2; display:flex; justify-content:space-between; align-items:flex-end; gap:var(--s5); flex-wrap:wrap}
.rhero .over .place{font-size:.9rem; color:rgba(255,255,255,.8); font-weight:600}
.rhero .over h1{color:#fff; margin:4px 0 2px}
.rhero .over .en{color:rgba(255,255,255,.7); font-size:.9rem}
.rhero .over .price{text-align:right}
.rhero .over .price small{display:block; font-size:.82rem; color:rgba(255,255,255,.8)}
.rhero .over .price b{display:block; font-size:clamp(var(--t22),1.2rem + 1.6vw,var(--t36)); letter-spacing:-.03em; line-height:1.1; font-variant-numeric:tabular-nums}
.rhero .over .price span{font-size:.85rem; color:rgba(255,255,255,.8)}
@media(max-width:700px){.rhero .over .price{text-align:left}}
.rhero .credit{position:absolute; right:calc(var(--s5) + 12px); top:12px; z-index:2; font-size:.7rem; color:rgba(255,255,255,.75); background:rgba(0,0,0,.25); padding:3px 8px; border-radius:99px}
.rhero .credit a{color:inherit}
.subnav{position:sticky; top:var(--hdr); z-index:20; background:rgba(250,251,251,.94); backdrop-filter:blur(10px); border-bottom:1px solid var(--line); margin-top:var(--s4)}
.subnav .in{max-width:var(--wide); margin:0 auto; padding:0 var(--s5); display:flex; gap:var(--s5); overflow-x:auto; scrollbar-width:none; height:var(--subnav)}
.subnav .in::-webkit-scrollbar{display:none}
.subnav a{display:flex; align-items:center; font-weight:600; font-size:.92rem; color:var(--mute); white-space:nowrap; border-bottom:2px solid transparent; padding-top:2px}
.subnav a:hover{color:var(--ink)}
.rbody{max-width:var(--wide); margin:0 auto; padding:var(--s6) var(--s5) 0; display:grid; grid-template-columns:300px minmax(0,1fr); gap:var(--s7)}
.rbody > *{min-width:0}
.rail{position:sticky; top:calc(var(--hdr) + var(--subnav) + var(--s5)); align-self:start}
.rail .facts{margin:0}
.rail .facts div{display:flex; justify-content:space-between; gap:var(--s3); padding:11px 0; border-top:1px solid var(--line); font-size:.92rem}
.rail .facts div:last-child{border-bottom:1px solid var(--line)}
.rail .facts dt{color:var(--mute)} .rail .facts dd{margin:0; text-align:right; font-weight:600}
.rail .map{margin:var(--s4) 0 0; border-radius:var(--r); background:var(--sand-2); padding:10px}
.rail .map .cap{font-size:.8rem; color:var(--mute); text-align:center; margin-top:4px}
.atollmap{width:100%; height:auto; display:block}
.atollmap .dot{fill:var(--line)} .atollmap .route{stroke:var(--lagoon); stroke-width:2; stroke-dasharray:4 3} .atollmap.boat .route{stroke-dasharray:none}
.atollmap .male{fill:var(--mute)} .atollmap .here{fill:var(--lagoon)} .atollmap .lbl{font-size:11px; fill:var(--mute); font-family:inherit} .atollmap .lbl.here{fill:var(--lagoon-ink); font-weight:700}
.rail .src{font-size:.78rem; color:var(--mute); margin-top:var(--s3)}
/* 본문 열: 텍스트 블록은 전부 산문 폭(680)으로 통일, 사진 갤러리만 열 전체 */
.rmain > *{max-width:var(--prose)}
.rmain > #photos{max-width:none}
.rmain > section{margin-bottom:var(--s7); scroll-margin-top:calc(var(--hdr) + var(--subnav) + var(--s4))}
.rmain h2{margin-bottom:var(--s3)}
.rmain .oneliner{font-size:var(--t22); font-weight:600; letter-spacing:-.02em; line-height:1.4; margin:0 0 var(--s5)}
.verdict{display:grid; grid-template-columns:1fr 1fr; gap:var(--s4)}
@media(max-width:640px){.verdict{grid-template-columns:1fr}}
.verdict > div{padding:var(--s4) 0; border-top:2px solid var(--ink)}
.verdict b{display:block; margin-bottom:6px; font-size:.95rem}
.verdict ul{margin:0; padding-left:18px; color:var(--mute); font-size:.92rem} .verdict li{margin:4px 0}
.verdict .no{border-top-color:var(--coral)} .verdict .no b{color:var(--coral)}
ul.pros, ul.cons{list-style:none; margin:0; padding:0}
ul.pros li, ul.cons li{position:relative; padding:10px 0 10px 26px; border-bottom:1px solid var(--line); font-size:.95rem}
ul.pros li::before{content:""; position:absolute; left:4px; top:18px; width:8px; height:8px; border-radius:50%; background:var(--moss)}
ul.cons li::before{content:""; position:absolute; left:4px; top:18px; width:8px; height:8px; border-radius:50%; background:var(--coral)}
blockquote{margin:var(--s4) 0 0; padding:0 0 0 var(--s4); border-left:3px solid var(--sand); color:var(--mute); font-size:.95rem}
.gallery{display:grid; grid-template-columns:repeat(3,1fr); gap:var(--s3)}
@media(max-width:640px){.gallery{grid-template-columns:1fr 1fr}}
.gallery figure{margin:0; border-radius:var(--r-sm); overflow:hidden; background:var(--sand-2); position:relative}
.gallery img{aspect-ratio:4/3; width:100%; height:100%; object-fit:cover}
.gallery figcaption{position:absolute; right:8px; bottom:6px; font-size:.65rem; color:#fff; background:rgba(0,0,0,.35); padding:2px 6px; border-radius:99px}
.note{background:var(--sand-2); border-radius:var(--r); padding:var(--s4) var(--s5); font-size:.95rem}
.note b{display:block; margin-bottom:4px}
.deepcard{background:var(--deep); color:#fff; border-radius:20px; padding:clamp(20px,3vw,32px)}
.deepcard h2{color:#fff}
.deepcard p, .deepcard li{color:rgba(255,255,255,.85)}
.deepcard ul{padding-left:18px; margin:var(--s3) 0}
.deepcard a{color:#fff; text-decoration:underline; text-decoration-color:rgba(255,255,255,.4)}
.deepcard details{margin-top:var(--s4); background:rgba(255,255,255,.06); border-radius:12px; padding:12px 16px}
.deepcard summary{cursor:pointer; font-weight:700; color:#fff}
.deepcard ol{padding-left:18px; margin:var(--s3) 0 0} .deepcard ol li{margin:8px 0; font-size:.92rem}
.calc{display:grid; grid-template-columns:repeat(auto-fit,minmax(140px,1fr)); gap:var(--s3)}
.calc label{font-size:.8rem; color:var(--mute); font-weight:600; display:flex; flex-direction:column; gap:6px}
.calc select,.calc input{background:var(--sand-2); color:var(--ink); border:0; border-radius:10px; padding:11px 12px; font-size:.95rem; font-family:inherit; width:100%}
.calc-out{grid-column:1/-1; font-size:.92rem; color:var(--mute); line-height:1.8}
.calc-out b{font-size:var(--t22); color:var(--ink); letter-spacing:-.02em; font-variant-numeric:tabular-nums}
.cmp{width:100%; border-collapse:collapse; font-size:.92rem}
.cmp th{text-align:left; font-weight:700; padding:10px 12px 10px 0; border-bottom:2px solid var(--ink)}
.cmp th a{text-decoration:underline; text-decoration-thickness:1.5px; text-underline-offset:4px}
.cmp td{padding:10px 12px 10px 0; border-bottom:1px solid var(--line); vertical-align:top}
.cmp td:first-child{color:var(--mute)}
.cmp th, .cmp td{white-space:nowrap}
.tblwrap{overflow-x:auto}
.tblwrap .cmp{min-width:460px}
.faq details{border-bottom:1px solid var(--line); padding:14px 0}
.faq summary{cursor:pointer; font-weight:700; list-style:none; position:relative; padding-right:28px}
.faq summary::-webkit-details-marker{display:none}
.faq summary::after{content:""; position:absolute; right:6px; top:50%; width:8px; height:8px; border-right:2px solid var(--mute); border-bottom:2px solid var(--mute); transform:translateY(-70%) rotate(45deg)}
.faq details[open] summary::after{transform:translateY(-30%) rotate(225deg)}
.faq p{margin:10px 0 0; color:var(--mute); font-size:.95rem}
.prevnext{display:flex; justify-content:space-between; gap:var(--s4); padding-top:var(--s4); border-top:1px solid var(--line); font-weight:600}
.prevnext a{color:var(--mute)} .prevnext a:hover{color:var(--ink)}
.stickybar{position:fixed; left:0; right:0; bottom:0; z-index:35; background:rgba(250,251,251,.96); backdrop-filter:blur(10px); border-top:1px solid var(--line); display:flex; align-items:center; gap:var(--s3); padding:10px var(--s4)}
.stickybar .sp{font-weight:800; letter-spacing:-.01em; margin-right:auto; font-variant-numeric:tabular-nums}
@media(min-width:900px){.stickybar{display:none}}
/* 모바일: 한 줄 평·판정을 먼저, 팩트 표·지도는 그 다음 */
@media(max-width:900px){
  .rbody{display:flex; flex-direction:column; gap:0}
  .rmain{display:contents}
  .rmain > *{max-width:none; order:3}
  .rmain > .oneliner{order:1}
  .rmain > #fit{order:1}
  .rail{position:static; order:2; margin-bottom:var(--s7)}
  .rail .map .atollmap{max-height:220px}
}

/* ---------- list / filters ---------- */
.filters{display:flex; flex-direction:column; gap:var(--s3); margin:var(--s5) 0 var(--s6)}
.filters input{width:100%; max-width:420px; background:var(--sand-2); color:var(--ink); border:0; border-radius:99px; padding:11px 16px; font-size:.95rem; font-family:inherit}
.filters input::placeholder{color:var(--mute)}
.filters .chips, .filters .sort{display:flex; flex-wrap:wrap; gap:8px; align-items:center}
.filters .chip{background:var(--sand-2); border:0; color:var(--ink); border-radius:99px; padding:9px 14px; font-size:.86rem; font-weight:600; cursor:pointer; font-family:inherit; white-space:nowrap; line-height:1.3}
.filters .chip:hover{background:var(--sand)}
.filters .chip.on{background:var(--ink); color:#fff}
.filters .cnt{color:var(--mute); font-size:.86rem; margin-left:auto; white-space:nowrap}
@media(max-width:640px){
  .filters input{max-width:none}
  .filters .chips{flex-wrap:nowrap; overflow-x:auto; margin:0 calc(-1 * var(--s5)); padding:2px var(--s5); scrollbar-width:none; -webkit-overflow-scrolling:touch}
  .filters .chips::-webkit-scrollbar{display:none}
  .filters .cnt{flex-basis:100%; margin-left:0}
}
.grouphead{margin:var(--s7) 0 var(--s4); display:flex; align-items:baseline; gap:10px; scroll-margin-top:calc(var(--hdr) + var(--s4))}
.grouphead .n{color:var(--mute); font-weight:500}

/* ---------- article (산문 680, 좌측 정렬) ---------- */
.article{max-width:var(--wide); margin:var(--s6) auto 0; padding:0 var(--s5)}
.article > *{max-width:var(--prose); min-width:0}
.article .crumbs{font-size:.85rem; color:var(--mute); margin-bottom:var(--s3)}
.article .lede{font-size:1.15rem; color:var(--mute); line-height:1.6; margin:var(--s3) 0 var(--s5)}
.article .dateline{font-size:.82rem; color:var(--faint); margin:var(--s2) 0 var(--s5)}
.article h1 + .summary, .article h1 + p{margin-top:var(--s5)}
.article h2{margin:var(--s7) 0 var(--s3); font-size:var(--t22)}
.article h2 .lnk{font-size:var(--t14); font-weight:600; color:var(--mute); margin-left:10px; letter-spacing:0; text-decoration:underline; text-underline-offset:3px; text-decoration-color:var(--faint)}
.article h2 .lnk:hover{color:var(--ink)}
.article h3{margin:var(--s5) 0 var(--s2)}
.article .summary{background:var(--sand-2); border-radius:var(--r); padding:var(--s4) var(--s5); font-size:1.02rem}
.article table{width:100%; border-collapse:collapse; font-size:.92rem; margin:var(--s4) 0}
.article th{text-align:left; padding:10px 12px 10px 0; border-bottom:2px solid var(--ink); font-weight:700; white-space:nowrap}
.article td{padding:10px 12px 10px 0; border-bottom:1px solid var(--line); vertical-align:top}
.article .tbl{overflow-x:auto}
/* 데이터 표: 짧은 값(소요·요금·티어)은 안 끊고, 긴 이름·상세만 줄바꿈. 모바일에서 가로 스크롤 없이 들어간다 */
.article .tbl td:last-child, .article .tbl table:has(th:nth-child(4)) td:nth-child(2), .article .tbl table:has(th:nth-child(4)) td:nth-child(3){white-space:nowrap}
@media(max-width:640px){.article table{font-size:.86rem} .article th, .article td{padding:9px 10px 9px 0}}
.article ul, .article ol{padding-left:22px; margin:0 0 var(--s4)} .article li{margin:8px 0}
.article .edu{background:var(--sand-2); border-radius:var(--r); padding:var(--s4) var(--s5); margin:var(--s5) 0}
.article .edu > b{display:block; margin-bottom:8px}
.ifelse{display:grid; grid-template-columns:1fr 1fr; gap:var(--s3); margin-top:var(--s3)}
@media(max-width:600px){.ifelse{grid-template-columns:1fr}}
.ifelse div{background:#fff; border-radius:var(--r-sm); padding:12px 14px; font-size:.92rem}
.ifelse b{display:block; margin-bottom:4px}
.ladder{display:grid; grid-template-columns:repeat(auto-fit,minmax(150px,1fr)); gap:var(--s3); margin:var(--s4) 0}
.ladder div{background:var(--sand-2); border-radius:var(--r-sm); padding:12px 14px; font-size:.88rem}
.ladder b{display:block; margin-bottom:2px} .ladder .lv{display:none}
.article .faq{margin-top:var(--s7)}
.article .faq h2, .article .related h2{margin-top:0}
.cta{display:flex; gap:var(--s3); flex-wrap:wrap; margin:var(--s7) 0 0}
.related{margin-top:var(--s7)}

/* ---------- footer ---------- */
footer.site{margin-top:var(--s8); background:var(--deep); color:rgba(255,255,255,.75)}
footer.site .in{max-width:var(--wide); margin:0 auto; padding:var(--s7) var(--s5); display:grid; grid-template-columns:2fr 1fr 1fr; gap:var(--s6); font-size:.9rem}
@media(max-width:800px){footer.site .in{grid-template-columns:1fr}}
footer.site b{color:#fff; display:block; margin-bottom:8px; font-size:1.05rem}
footer.site a{color:#fff; display:block; padding:4px 0}
footer.site p{margin:0 0 10px}
/* 고정 바(스티키 가격바·탭바)에 가려지는 만큼 푸터 아래 여백 */
@media(max-width:899px){body:has(.stickybar) footer.site .in{padding-bottom:calc(var(--s7) + 60px)}}
@media(max-width:640px){
  footer.site .in{padding-bottom:calc(var(--s7) + 64px + env(safe-area-inset-bottom))}
  body:has(.stickybar) footer.site .in{padding-bottom:calc(var(--s7) + 124px + env(safe-area-inset-bottom))}
}

/* ---------- mobile tab bar ---------- */
.tabbar{display:none}
@media(max-width:640px){
  .tabbar{display:grid; grid-template-columns:repeat(4,1fr); position:fixed; left:0; right:0; bottom:0; z-index:40; background:rgba(250,251,251,.96); backdrop-filter:blur(10px); border-top:1px solid var(--line); padding:6px 0 calc(6px + env(safe-area-inset-bottom))}
  .tabbar a{display:flex; flex-direction:column; align-items:center; gap:2px; font-size:.68rem; color:var(--mute); padding:4px 0}
  .tabbar a.on{color:var(--ink); font-weight:700}
  .tabbar svg{width:22px; height:22px}
  .stickybar{bottom:calc(58px + env(safe-area-inset-bottom))}
}
/* photo-less tile: atoll map on deep sea */
.tile .pic.nopic{background:linear-gradient(160deg,#0E3440 0%,#145C6A 55%,#1C9AA3 100%)}
.tile .pic.nopic .atollmap{position:absolute; inset:0; width:100%; height:100%; padding:14px 26% 40px}
.tile .pic.nopic .atollmap .dot{fill:rgba(255,255,255,.28)} .tile .pic.nopic .atollmap .route{stroke:rgba(255,255,255,.7)} .tile .pic.nopic .atollmap .male{fill:#F6C453}
.tile .pic.nopic .atollmap .here{fill:#fff} .tile .pic.nopic .atollmap .lbl{fill:rgba(255,255,255,.6)} .tile .pic.nopic .atollmap .lbl.here{fill:#fff}
.tile .pic .illo-name small{display:block; font-size:.78rem; font-weight:500; opacity:.8; margin-top:2px}
.hero-map svg.atolls .lbl.male{fill:#F6C453; fill-opacity:.95}
.hero-map svg.atolls .lbl{paint-order:stroke; stroke:rgba(14,52,64,.85); stroke-width:3px; stroke-linejoin:round}
.tile .pic.nopic .atollmap{padding:10px 18% 36px}
/* photo-less resort hero: atoll map sized for the frame */
.rhero .frame .ocean svg{position:absolute; right:3%; top:50%; transform:translateY(-50%); height:84%; width:auto; opacity:.8}
.rhero .frame .ocean .atollmap .dot{fill:rgba(255,255,255,.3); r:2.2} .rhero .frame .ocean .atollmap .route{stroke:rgba(255,255,255,.75); stroke-width:1.2}
.rhero .frame .ocean .atollmap .male{fill:#F6C453; r:2.6} .rhero .frame .ocean .atollmap .here{fill:#fff; r:4.5}
.rhero .frame .ocean .atollmap .lbl{font-size:5.5px; fill:rgba(255,255,255,.7)} .rhero .frame .ocean .atollmap .lbl.here{fill:#fff}
/* mobile hero: show the right half of the 1200x600 map at readable size */
@media(max-width:800px){.hero-map svg.atolls{width:214%; margin-left:-104%; height:280px} .hero-map .frame{padding-top:0}}

/* ---------- generated art ---------- */
.hero{position:relative; max-width:var(--wide); margin:var(--s5) auto 0; padding:0 var(--s5)}
.hero .frame{position:relative; border-radius:20px; overflow:hidden; background:var(--deep); aspect-ratio:16/8; min-height:440px; display:flex; align-items:center}
.hero .bg{position:absolute; inset:0; width:100%; height:100%; object-fit:cover}
.hero .frame::after{content:""; position:absolute; inset:0; background:linear-gradient(100deg, rgba(9,36,45,.92) 0%, rgba(9,36,45,.78) 38%, rgba(9,36,45,.18) 70%, rgba(9,36,45,.05) 100%)}
.hero .panel{position:relative; z-index:2; padding:clamp(28px,4vw,56px); max-width:580px; color:#fff}
.hero .panel h1{color:#fff; font-size:clamp(var(--t28), 1.4rem + 2.4vw, var(--t48)); margin-bottom:var(--s3); text-wrap:balance}
.hero .panel .lead{font-size:1.05rem; color:rgba(255,255,255,.84); max-width:440px}
.hero .q{margin-top:var(--s5); font-weight:700; color:#fff}
.hero .opts{display:flex; flex-wrap:wrap; gap:8px; margin-top:var(--s3)}
.hero .opts a{background:rgba(255,255,255,.16); border:1px solid rgba(255,255,255,.38); color:#fff; padding:10px 16px; border-radius:99px; font-weight:600; font-size:.92rem; backdrop-filter:blur(6px)}
.hero .opts a:hover{background:#fff; color:var(--deep); border-color:#fff}
.hero .foot{margin-top:var(--s4); font-size:.82rem; color:rgba(255,255,255,.7)}
@media(max-width:760px){
  .hero .frame{aspect-ratio:auto; min-height:0}
  .hero .frame::after{background:linear-gradient(180deg, rgba(9,36,45,.55) 0%, rgba(9,36,45,.88) 45%, rgba(9,36,45,.95) 100%)}
  .hero .panel{max-width:none; padding-top:clamp(90px,34vw,190px)}
}

/* campus map moved out of the hero into its own band */
.row.campus .mapframe{position:relative; border-radius:20px; overflow:hidden; background:linear-gradient(160deg,#0E3440 0%,#145C6A 45%,#1C9AA3 100%); aspect-ratio:2/1; max-height:520px}
.row.campus svg.atolls{position:absolute; inset:0; width:100%; height:100%}
@media(max-width:760px){.row.campus .mapframe{aspect-ratio:1/1}.row.campus svg.atolls{width:214%; margin-left:-104%}}

/* photo-less tile backed by generated island art */
.tile .pic.artpic img{width:100%; height:100%; object-fit:cover}
.tile .pic.artpic::after{content:""; position:absolute; inset:auto 0 0 0; height:62%; background:linear-gradient(to top, rgba(9,36,45,.82), rgba(9,36,45,0))}
.tile .pic.artpic .illo-name{z-index:2}

/* editorial block art */
.edit .art img{width:100%; height:auto; display:block; border-radius:var(--r)}

/* article hero art: breaks the 680 prose column */
.article .arthero{max-width:none; margin:var(--s5) 0 var(--s6)}
.article .arthero img{width:100%; height:auto; display:block; border-radius:var(--r); aspect-ratio:16/10; object-fit:cover}
.row.campus svg.atolls .dot{fill:#fff; fill-opacity:.55; transition:fill-opacity .15s}
.row.campus svg.atolls a:hover .dot, .row.campus svg.atolls a:focus .dot{fill-opacity:1}
.row.campus svg.atolls .male{fill:#F6C453}
.row.campus svg.atolls .lbl{font-size:11px; fill:#fff; fill-opacity:.72; font-weight:500; paint-order:stroke; stroke:rgba(14,52,64,.85); stroke-width:3px; stroke-linejoin:round}
.row.campus svg.atolls .lbl.male{fill:#F6C453; fill-opacity:.95}
.row.campus .tip{position:absolute; z-index:3; pointer-events:none; background:#fff; color:var(--ink); border-radius:10px; padding:8px 12px; font-size:.82rem; line-height:1.4; box-shadow:0 10px 30px -10px rgba(0,0,0,.4); transform:translate(-50%,-120%); white-space:nowrap; opacity:0; transition:opacity .12s}
.row.campus .tip.on{opacity:1}
.row.campus .tip b{display:block; font-size:.9rem}
.rhero .frame img.artbg{filter:saturate(.96)}
.article .midart{max-width:none; margin:var(--s6) 0}
.article .midart img{width:100%; height:auto; display:block; border-radius:var(--r); aspect-ratio:16/9; object-fit:cover}
.listbanner{margin:var(--s4) 0 var(--s5)}
.listbanner img{width:100%; height:auto; display:block; border-radius:var(--r); aspect-ratio:3/1; object-fit:cover}
@media(max-width:700px){.listbanner img{aspect-ratio:2/1}}
/* 404: shorter hero so the links stay above the fold */
body.e404 .article .arthero img{aspect-ratio:32/9}

/* 표: body의 overflow-wrap:anywhere가 좁은 열에서 한글을 글자 단위로 쪼갠다.
   셀에서는 정상 줄바꿈으로 되돌리고, 안 들어가면 표를 가로 스크롤시킨다. */
.article .tbl th, .article .tbl td, .cmp th, .cmp td{overflow-wrap:normal; word-break:keep-all}
@media(max-width:700px){.article .tbl table{min-width:540px}}

/* 객실 등급 */
.villas{list-style:none; margin:var(--s4) 0 0; padding:0; max-width:680px}
.villas li{padding:12px 0; border-top:1px solid var(--line); display:grid; grid-template-columns:150px 1fr; gap:var(--s4)}
.villas li:last-child{border-bottom:1px solid var(--line)}
.villas b{font-size:.98rem} .villas span{color:var(--mute); font-size:.92rem}
@media(max-width:640px){.villas li{grid-template-columns:1fr; gap:2px}}

/* 도착 동선 */
.timeline{list-style:none; margin:var(--s4) 0 0; padding:0 0 0 var(--s4); max-width:680px; position:relative}
.timeline::before{content:""; position:absolute; left:4px; top:10px; bottom:10px; width:2px; background:var(--sand-2)}
.timeline li{position:relative; padding:10px 0 10px var(--s4)}
.timeline li::before{content:""; position:absolute; left:-5px; top:17px; width:11px; height:11px; border-radius:50%; background:var(--lagoon); outline:3px solid var(--paper)}
.timeline b{display:block; font-size:.98rem} .timeline span{color:var(--mute); font-size:.92rem}

/* 홈: 월별 시즌 스트립 */
.months{list-style:none; display:grid; grid-template-columns:repeat(12,1fr); gap:var(--s2); margin:var(--s4) 0 0; padding:0}
.months li{background:var(--sand); border-radius:var(--r-sm); padding:12px 10px; display:flex; flex-direction:column; gap:3px}
.months li.peak{background:var(--lagoon-soft)}
.months b{font-size:1rem; letter-spacing:-.02em}
.months .st{color:var(--lagoon-ink); font-size:.74rem; letter-spacing:-1px}
.months .wx{color:var(--mute); font-size:.76rem; line-height:1.35}
.months .pb{margin-top:auto; font-size:.74rem; font-weight:600; color:var(--ink)}
@media(max-width:1000px){.months{grid-template-columns:repeat(6,1fr)}}
@media(max-width:560px){.months{grid-template-columns:repeat(3,1fr)} .months .wx{display:none}}

/* 홈: 이동수단 3종 */
.waygrid{display:grid; grid-template-columns:repeat(3,1fr); gap:var(--s5); margin-top:var(--s4)}
@media(max-width:800px){.waygrid{grid-template-columns:1fr}}
.way img{width:100%; height:auto; aspect-ratio:2/1; object-fit:cover; border-radius:var(--r); display:block}
.way .wtxt{padding-top:var(--s3)}
.way b{display:block; font-size:1.1rem; letter-spacing:-.02em}
.way span{display:block; color:var(--mute); font-size:.92rem; margin-top:3px}
.way .wn{color:var(--lagoon-ink); font-weight:600; font-size:.88rem; margin-top:6px}
.way:hover b{text-decoration:underline; text-decoration-thickness:1.5px; text-underline-offset:4px}

/* 홈: 숫자 밴드 */
.row.facts{background:var(--deep); color:#fff; max-width:none; padding-block:var(--s7); margin-top:var(--s8)}
.factgrid{max-width:var(--wide); margin:0 auto; padding:0 var(--s5); display:grid; grid-template-columns:repeat(4,1fr); gap:var(--s6)}
@media(max-width:800px){.factgrid{grid-template-columns:repeat(2,1fr); gap:var(--s5)}}
.factgrid b{display:block; font-size:clamp(var(--t28),2.4vw,var(--t36)); letter-spacing:-.03em; color:#fff}
.factgrid span{display:block; color:rgba(255,255,255,.72); font-size:.9rem; margin-top:6px; line-height:1.5}

/* 홈: FAQ */
.row.homefaq .faq{max-width:760px; margin-top:var(--s4)}
.assump{font-size:.8rem; color:var(--mute); margin-top:var(--s6); max-width:680px; line-height:1.6}
.pinned{background:var(--lagoon-soft); color:var(--lagoon-ink); border-radius:var(--r); padding:14px 18px; font-size:.95rem; margin:0 0 var(--s5)}
.pinned a{color:inherit}
.pick.empty h3{margin:0 0 6px}
.srcnote{font-size:.82rem; color:var(--mute); margin:6px 0 0}
#rest ul{list-style:none; padding:0; columns:2; column-gap:var(--s5)}
#rest li{margin:5px 0; break-inside:avoid; font-size:.9rem}
@media(max-width:640px){#rest ul{columns:1}}
.deepcard .bookrow{margin:var(--s4) 0 var(--s3)}
footer.site .biz{line-height:1.7}


.illo{width:100%; height:auto; display:block; border-radius:12px;}
:root{--illo-sky:#DDF1F4; --illo-sea:#9BD3DB; --illo-lagoon:#5FC4CF; --illo-deep:#1E7F8C; --illo-sand:#F3E6C8; --illo-card:#FFFFFF;
  --illo-line:#1F3A40; --illo-roof:#C9A26B; --illo-palm:#2E8B57; --illo-sun:#F6C453; --illo-coral:#E8846B; --illo-fish:#F4A63A; --illo-gold:#D9B77A; --illo-ink:#1F3A40;}
@media (prefers-color-scheme: dark){:root{--illo-sky:#12343A; --illo-sea:#0E5A63; --illo-lagoon:#2C9EA8; --illo-deep:#083B42; --illo-sand:#8A7A55; --illo-card:#132229; --illo-line:#CFE6E9; --illo-roof:#8A6D3B; --illo-ink:#E7EFEE; --illo-gold:#B08A4F;}}