@charset "utf-8";
/* ============================================================
   남도문화관광재단 — demo main page
   ============================================================ */

:root{
  --teal:#0292a2;
  --blue:#108eb7;
  --mint:#009d9d;
  --navy:#113f57;
  --ink:#191919;
  --gray:#666;
  --line:#e3e6e8;
  --bg-sns:#e9f5f9;
  --layout:1340px;
}

*{box-sizing:border-box;}
html,body{margin:0;padding:0;}
body{
  font-family:"Pretendard","Pretendard Variable",-apple-system,BlinkMacSystemFont,system-ui,"Apple SD Gothic Neo","Malgun Gothic",sans-serif;
  color:var(--ink);
  font-size:16px;
  line-height:1.5;
  letter-spacing:-.02em;
  background:#fff;
  overflow-x:hidden;
  word-break:keep-all;
}
h1,h2,h3,h4,p,ul,ol,li,figure,dl,dd{margin:0;padding:0;}
ul,ol{list-style:none;}
a{color:inherit;text-decoration:none;}
img{max-width:100%;vertical-align:top;}
button{font:inherit;color:inherit;background:none;border:0;cursor:pointer;padding:0;letter-spacing:inherit;}
input{font:inherit;letter-spacing:inherit;}
svg{display:block;}
strong,b,em{font-style:normal;}

.blind{position:absolute !important;width:1px;height:1px;margin:-1px;padding:0;overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap;border:0;}
.ib{display:inline-block;}
.layout{width:100%;max-width:var(--layout);margin:0 auto;padding:0 20px;}

.skip-nav a{position:absolute;left:0;top:-100px;z-index:999;background:var(--teal);color:#fff;padding:10px 20px;}
.skip-nav a:focus{top:0;}

/* ---------- reveal ---------- */
.reveal{opacity:0;transform:translateY(38px);transition:opacity .8s ease,transform .8s cubic-bezier(.22,.7,.3,1);}
.reveal.on{opacity:1;transform:none;}

/* ============================================================
   HEADER
   ============================================================ */
#head_layout{position:sticky;top:0;left:0;width:100%;background:#fff;z-index:120;border-bottom:1px solid transparent;}
#head_layout.scrolled{box-shadow:0 2px 16px rgba(0,0,0,.08);}
.head-inner{max-width:1400px;margin:0 auto;height:94px;padding:0 30px;display:flex;align-items:center;gap:30px;}

.logo{font-size:0;flex:0 0 auto;}
.logo a{display:flex;align-items:center;gap:9px;position:relative;padding-bottom:7px;}
.logo-mark{display:block;}
.logo-text{font-size:24px;font-weight:800;letter-spacing:-.045em;color:#1c2b33;line-height:1;}
.logo-bar{position:absolute;left:43px;right:0;bottom:0;height:4px;border-radius:2px;
  background:linear-gradient(90deg,#e94b4b 0%,#f0a500 22%,#8bc34a 44%,#0292a2 64%,#3f51b5 82%,#7b3fb5 100%);}

#gnb{flex:1 1 auto;}
.gnb-list{display:flex;justify-content:center;gap:42px;}
.gnb-link{display:block;font-size:18px;font-weight:700;color:#20303a;padding:34px 2px;position:relative;white-space:nowrap;}
.gnb-link::after{content:"";position:absolute;left:0;right:0;bottom:26px;height:3px;background:var(--teal);transform:scaleX(0);transition:transform .3s;}
.gnb-item.on .gnb-link::after,.gnb-link:hover::after,.gnb-link:focus::after{transform:scaleX(1);}
.gnb-item.on .gnb-link,.gnb-link:hover{color:var(--teal);}

.head-util{display:flex;align-items:center;gap:16px;flex:0 0 auto;}
.util-link{font-size:15px;color:#5a6a72;white-space:nowrap;}
.util-link:hover{color:var(--teal);text-decoration:underline;}
.util-btn{width:34px;height:34px;display:flex;align-items:center;justify-content:center;color:#20303a;}
.btn-allmenu{flex-direction:column;gap:5px;}
.btn-allmenu span{display:block;width:24px;height:2px;background:#20303a;border-radius:2px;transition:.25s;}

/* mega */
.mega{position:absolute;left:0;top:100%;width:100%;background:#fff;border-top:1px solid var(--line);
  box-shadow:0 18px 30px rgba(0,0,0,.08);overflow:hidden;max-height:0;transition:max-height .35s ease;}
.mega.open{max-height:460px;}
.mega-inner{max-width:1400px;margin:0 auto;padding:0 30px;}
.mega-panel{display:none;padding:38px 0 44px;}
.mega-panel.on{display:flex;gap:60px;}
.mega-head{flex:0 0 300px;}
.mega-head strong{display:block;font-size:26px;font-weight:800;color:var(--teal);margin-bottom:12px;}
.mega-head p{font-size:15px;color:#6b7a82;line-height:1.55;}
.mega-list{flex:1 1 auto;display:grid;grid-template-columns:repeat(4,1fr);gap:12px 24px;align-content:start;}
.mega-list a{display:block;font-size:16px;color:#333;padding:7px 0 7px 12px;border-left:2px solid transparent;}
.mega-list a:hover{color:var(--teal);font-weight:700;border-left-color:var(--teal);}

/* 모바일 전체메뉴 */
.mo-menu{position:fixed;top:0;right:0;width:min(340px,86vw);height:100%;background:#fff;z-index:200;transform:translateX(105%);
  transition:transform .35s cubic-bezier(.22,.7,.3,1);overflow-y:auto;box-shadow:-6px 0 24px rgba(0,0,0,.14);visibility:hidden;}
.mo-menu.open{transform:none;visibility:visible;}
.mo-menu-head{display:flex;align-items:center;justify-content:space-between;padding:20px;background:var(--teal);color:#fff;}
.mo-logo{font-size:18px;font-weight:800;}
.mo-menu-body{padding:10px 0 60px;}
.mo-dep1{border-bottom:1px solid var(--line);}
.mo-dep1 > button{display:flex;align-items:center;justify-content:space-between;width:100%;padding:16px 20px;font-size:17px;font-weight:700;text-align:left;}
.mo-dep1 > button i{width:12px;height:12px;border-right:2px solid #999;border-bottom:2px solid #999;transform:rotate(45deg) translate(-3px,-3px);transition:.25s;}
.mo-dep1.open > button{color:var(--teal);}
.mo-dep1.open > button i{transform:rotate(-135deg) translate(-3px,-3px);border-color:var(--teal);}
.mo-dep2{display:none;padding:6px 0 14px;background:#f7fafb;}
.mo-dep1.open .mo-dep2{display:block;}
.mo-dep2 a{display:block;padding:9px 30px;font-size:15px;color:#555;}
.dim{position:fixed;inset:0;background:rgba(0,0,0,.45);opacity:0;visibility:hidden;transition:.3s;z-index:150;}
.dim.on{opacity:1;visibility:visible;}

/* ============================================================
   SECTION 1 : 비주얼 + 검색 + 관광지 롤링
   ============================================================ */
.visual{position:relative;height:810px;overflow:hidden;background:#12303f;}
.visual-media{position:absolute;inset:0;}
.visual-media img{width:100%;height:100%;object-fit:cover;animation:kenburns 18s ease-in-out infinite alternate;}
.visual-media.paused img{animation-play-state:paused;}
.visual-media.closed img{animation:none;filter:blur(2px) brightness(.72);transform:none;}
@keyframes kenburns{0%{transform:scale(1) translate(0,0);}100%{transform:scale(1.12) translate(-1.5%,-1%);}}
.visual::after{content:"";position:absolute;inset:0;background:linear-gradient(180deg,rgba(0,0,0,.28) 0%,rgba(0,0,0,0) 32%,rgba(0,0,0,.18) 100%);pointer-events:none;}

.visual-ctrl{position:absolute;left:50px;top:24px;display:flex;background:var(--blue);border-radius:6px;z-index:3;}
.vc-btn{display:flex;align-items:center;gap:8px;color:#fff;font-size:16px;font-weight:700;padding:16px 22px;}
.vc-btn + .vc-btn{position:relative;}
.vc-btn + .vc-btn::before{content:"";position:absolute;left:0;top:14px;bottom:14px;width:1px;background:rgba(255,255,255,.35);}

.quick-menu{position:absolute;left:0;right:0;bottom:0;z-index:4;}
.qm-inner{position:relative;max-width:1340px;margin:0 auto;height:78px;background:var(--navy);display:flex;align-items:center;padding:0 40px;}
.qm-tit{font-size:24px;font-weight:800;color:#fff;letter-spacing:-.02em;margin-right:30px;white-space:nowrap;}
.qm-list{display:flex;align-items:center;flex:1 1 auto;padding-right:168px;}
.qm-list li{flex:1 1 auto;text-align:center;position:relative;}
.qm-list li + li::before{content:"";position:absolute;left:0;top:50%;transform:translateY(-50%);width:1px;height:18px;background:rgba(255,255,255,.22);}
.qm-list a{display:inline-flex;align-items:center;gap:9px;color:#fff;font-size:17px;font-weight:600;padding:8px 6px;white-space:nowrap;}
.qm-list a:hover{color:#8fe3ea;}
.qm-list svg{width:23px;height:23px;flex:0 0 23px;}
.qm-deco{position:absolute;right:-6px;top:-38px;width:120px;pointer-events:none;animation:planeFloat 4.5s ease-in-out infinite;}
@keyframes planeFloat{0%,100%{transform:translate(0,0) rotate(0deg);}50%{transform:translate(-8px,-8px) rotate(-4deg);}}
.qm-cloud{position:absolute;background:#fff;border-radius:50px;pointer-events:none;}
.qm-cloud::before,.qm-cloud::after{content:"";position:absolute;background:#fff;border-radius:50%;}
.qm-cloud1{right:34px;top:8px;width:78px;height:26px;}
.qm-cloud1::before{width:34px;height:34px;left:10px;top:-14px;}
.qm-cloud1::after{width:24px;height:24px;left:42px;top:-9px;}
.qm-cloud2{right:120px;bottom:-14px;width:96px;height:30px;}
.qm-cloud2::before{width:40px;height:40px;left:14px;top:-18px;}
.qm-cloud2::after{width:28px;height:28px;left:54px;top:-12px;}

/* 검색 */
.search-box{padding:118px 0 92px;text-align:center;background:#fff;}
.search-tit{display:block;font-size:46px;font-weight:800;letter-spacing:-.045em;line-height:1.25;color:#141d22;}
.search-form{position:relative;max-width:566px;margin:58px auto 0;display:flex;border:2px solid #191919;background:#fff;}
.search-form input{flex:1 1 auto;height:58px;border:0;outline:none;padding:0 22px;font-size:17px;}
.search-form input::placeholder{color:#9a9a9a;}
.search-form button{width:62px;background:#191919;color:#fff;display:flex;align-items:center;justify-content:center;}
.search-form button:hover{background:var(--teal);}
.search-tag{display:flex;flex-wrap:wrap;justify-content:center;gap:12px;margin-top:32px;}
.search-tag a{display:block;background:#f6f6f6;border-radius:30px;padding:12px 24px;font-size:16px;color:#545454;}
.search-tag a:hover{background:var(--teal);color:#fff;}

/* 관광지 롤링 */
.place-roll{overflow:hidden;padding-bottom:10px;}
.roll-track{display:flex;width:max-content;animation:rollmove 60s linear infinite;}
.roll-track:hover{animation-play-state:paused;}
@keyframes rollmove{0%{transform:translateX(0);}100%{transform:translateX(-50%);}}
.roll-list{display:flex;gap:20px;padding-right:20px;}
.place-card{flex:0 0 366px;width:366px;}
.place-card a{position:relative;display:block;border-radius:4px;overflow:hidden;}
.pc-img{display:block;width:100%;height:375px;overflow:hidden;background:#dfe6e9;}
.pc-img img{width:100%;height:100%;object-fit:cover;transition:transform .6s;}
.place-card a:hover .pc-img img{transform:scale(1.07);}
.pc-area,.pc-name{position:absolute;display:inline-flex;align-items:center;gap:5px;background:rgba(32,40,48,.72);color:#fff;font-size:15px;font-weight:600;border-radius:4px;padding:7px 12px;}
.pc-area{left:14px;top:14px;}
.pc-name{right:14px;bottom:14px;max-width:85%;}
.pc-hot{position:absolute;left:78px;top:14px;width:34px;height:34px;border-radius:4px;background:rgba(32,40,48,.72);color:#fff;display:flex;align-items:center;justify-content:center;}
.pc-hot svg{width:19px;height:19px;}
.ico-pin{width:13px;height:16px;flex:0 0 13px;background:currentColor;
  -webkit-mask:url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'><path d='M12 22s7-6.6 7-11.4A7 7 0 1 0 5 10.6C5 15.4 12 22 12 22Zm0-8.6a2.8 2.8 0 1 1 0-5.6 2.8 2.8 0 0 1 0 5.6Z'/></svg>") no-repeat center/contain;
  mask:url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'><path d='M12 22s7-6.6 7-11.4A7 7 0 1 0 5 10.6C5 15.4 12 22 12 22Zm0-8.6a2.8 2.8 0 1 1 0-5.6 2.8 2.8 0 0 1 0 5.6Z'/></svg>") no-repeat center/contain;}

/* ============================================================
   SECTION 2 : 재단 SNS
   ============================================================ */
.section2{background:var(--bg-sns);padding:116px 0 112px;}
.sns-box{text-align:center;}
.box-tit{display:block;font-size:36px;font-weight:800;letter-spacing:-.04em;color:#141d22;}
.sns-tab{display:flex;flex-wrap:wrap;justify-content:center;gap:10px;margin-top:30px;}
.sns-btn{display:inline-flex;align-items:center;gap:9px;background:#fff;border:1px solid #d7e6ee;border-radius:40px;padding:11px 22px;font-size:16px;font-weight:600;color:#33454e;}
.sns-btn.on,.sns-btn:hover{border-color:var(--blue);color:var(--blue);box-shadow:0 4px 12px rgba(16,142,183,.14);}
.sns-ico{width:26px;height:26px;border-radius:50%;display:flex;align-items:center;justify-content:center;color:#fff;flex:0 0 26px;}
.sns-ico svg{width:17px;height:17px;}
.sns-ico.ig{background:linear-gradient(45deg,#f9ce34,#ee2a7b,#6228d7);}
.sns-ico.bl{background:#03c75a;}
.sns-ico.yt{background:#ff0000;}
.sns-ico.fb{background:#1877f2;}
.sns-ico.x{background:#111;}

.sns-content{display:grid;grid-template-columns:1fr 1fr 622px;gap:20px;margin-top:42px;align-items:start;}
.sns-grid{grid-column:1/3;display:grid;grid-template-columns:repeat(2,1fr);gap:20px;}
.sns-card{position:relative;display:block;background:#fff;border-radius:2px;overflow:hidden;box-shadow:0 2px 10px rgba(10,60,80,.06);}
.sc-img{display:block;height:335px;overflow:hidden;}
.sc-img img{width:100%;height:100%;object-fit:cover;transition:transform .6s;}
.sns-card:hover .sc-img img{transform:scale(1.06);}
.sc-badge{position:absolute;right:12px;top:12px;width:32px;height:32px;border-radius:50%;color:#fff;display:flex;align-items:center;justify-content:center;
  background:linear-gradient(45deg,#f9ce34,#ee2a7b,#6228d7);}
.sc-badge svg{width:19px;height:19px;}
.sns-yt{background:var(--blue);border-radius:2px;padding:44px 40px;height:100%;min-height:690px;display:flex;flex-direction:column;justify-content:center;gap:34px;}
.yt-tit{display:block;font-size:28px;font-weight:800;color:#fff;letter-spacing:-.03em;}
.yt-link{position:relative;display:block;border-radius:4px;overflow:hidden;background:#000;}
.yt-img{display:block;aspect-ratio:16/9;}
.yt-img img{width:100%;height:100%;object-fit:cover;}
.yt-play{position:absolute;left:50%;top:50%;transform:translate(-50%,-50%);width:76px;}
.yt-play svg{width:76px;height:54px;}
.yt-link:hover .yt-play{transform:translate(-50%,-50%) scale(1.08);}

/* ============================================================
   SECTION 3 : MOBILITY
   ============================================================ */
.section3{padding:120px 0 128px;background:#fff;}
.mobil-box{max-width:1180px;margin:0 auto;}
.mobil-tit{display:block;font-size:52px;font-weight:800;letter-spacing:-.05em;line-height:1.26;color:#141d22;}
.mobil-tit b{display:block;font-weight:800;}
.mobil-tit i{display:inline-block;vertical-align:middle;}
.deco-ico{width:52px;height:52px;border-radius:50%;background:var(--bg-sns);color:var(--blue);display:inline-flex;align-items:center;justify-content:center;margin:0 10px;vertical-align:middle;}
.deco-ico svg{width:30px;height:30px;}
.deco-people{background:#fff3d6;color:#e08a00;}
.deco-bus{background:#e2f7f0;color:var(--mint);}

.mobil-pager{display:flex;flex-wrap:wrap;gap:8px;margin-top:38px;}
.mobil-pager button{position:relative;border:1px solid #dfe5e8;border-radius:30px;padding:10px 20px;font-size:15px;font-weight:600;color:#5d6d75;background:#fff;overflow:hidden;}
.mobil-pager button:hover{border-color:var(--teal);color:var(--teal);}
.mobil-pager button.on{background:var(--teal);border-color:var(--teal);color:#fff;}

.mobil-viewport{position:relative;margin-top:44px;border-top:2px solid #191919;padding:48px 0 96px;min-height:auto;}
.mobil-list{position:relative;min-height:212px;}
.mobil-slide{position:absolute;left:0;top:0;width:min(640px,72%);opacity:0;visibility:hidden;transition:opacity .5s ease;}
.mobil-slide.on{opacity:1;visibility:visible;position:relative;}
.mobil-slide strong{display:block;font-size:34px;font-weight:800;color:var(--teal);margin-bottom:24px;letter-spacing:-.04em;}
.mobil-slide p{font-size:18px;color:#4a575e;line-height:1.75;margin-bottom:10px;}
.mobil-slide p b{font-weight:800;color:#191919;}
.mobil-nav{position:absolute;right:0;top:48px;display:flex;gap:8px;}
.mobil-nav button{width:52px;height:52px;border:1px solid #dfe5e8;border-radius:50%;display:flex;align-items:center;justify-content:center;color:#3c4b53;}
.mobil-nav button:hover{background:var(--teal);border-color:var(--teal);color:#fff;}
.mobil-more{position:absolute;right:0;bottom:16px;width:64px;height:64px;border-radius:50%;background:var(--teal);color:#fff;display:flex;align-items:center;justify-content:center;}
.mobil-more:hover{background:var(--navy);}

/* ============================================================
   SECTION 4 : 날씨
   ============================================================ */
.section4{background:#0d2b4a;}
.weather-box{position:relative;background:url("./img/weather-bg.jpg") no-repeat center center/cover;padding:112px 0 108px;color:#fff;}
.weather-box::before{content:"";position:absolute;inset:0;background:linear-gradient(180deg,rgba(6,28,52,.44),rgba(6,28,52,.62));}
.weather-box .layout{position:relative;z-index:2;}
.weather-box .box-header{display:block;}
.weather-box .subtit{display:block;font-size:20px;font-weight:600;color:#d9ecff;}
.weather-tit{display:flex;align-items:center;gap:8px;font-size:52px;font-weight:800;letter-spacing:-.05em;margin-top:10px;}
.sun-ico{width:54px;height:54px;display:block;}
.sun-ico svg{width:54px;height:54px;}
.weather-box .desc{margin-top:22px;font-size:19px;line-height:1.7;color:#eaf4ff;}
.weather-box .desc span{display:block;}
.weather-box .desc b{font-weight:800;color:#ffe083;}

.recommend-wrap{margin-top:52px;background:rgba(255,255,255,.14);backdrop-filter:blur(10px);-webkit-backdrop-filter:blur(10px);
  border:1px solid rgba(255,255,255,.28);border-radius:16px;padding:38px 40px 30px;}
.wrap-tit{display:flex;align-items:center;gap:6px;font-size:24px;font-weight:700;letter-spacing:-.03em;}
.wt-ico,.rv-ico{width:28px;height:28px;display:inline-flex;}
.wt-ico svg,.rv-ico svg{width:28px;height:28px;}
.rec-viewport{overflow:hidden;margin-top:26px;}
.rec-list{display:flex;transition:transform .6s cubic-bezier(.22,.7,.3,1);}
.rec-slide{flex:0 0 100%;display:flex;flex-wrap:wrap;gap:12px;}
.rec-item{display:inline-flex;align-items:center;background:rgba(255,255,255,.9);color:#12323f;border-radius:40px;padding:13px 26px;font-size:17px;font-weight:700;}
.rec-item:hover{background:#fff;color:var(--teal);}
.rec-pager{display:flex;justify-content:center;gap:8px;margin-top:26px;}
.rec-pager button{width:10px;height:10px;border-radius:50%;background:rgba(255,255,255,.4);}
.rec-pager button.on{width:28px;border-radius:6px;background:#fff;}

.review-wrap{position:relative;margin-top:44px;}
.review-wrap .wrap-tit{margin-bottom:20px;}
.review-card{background:rgba(255,255,255,.95);color:#22333b;border-radius:14px;padding:30px 34px;max-width:900px;}
.rv-head{display:flex;align-items:center;gap:12px;flex-wrap:wrap;font-size:15px;color:#6b7a82;}
.rv-avatar{width:38px;height:38px;border-radius:50%;background:var(--teal);color:#fff;display:flex;align-items:center;justify-content:center;font-weight:800;}
.rv-name{font-weight:700;color:#22333b;}
.rv-star{color:#ffb300;letter-spacing:2px;}
.rv-tit{display:block;font-size:22px;font-weight:800;margin:16px 0 10px;letter-spacing:-.03em;}
.rv-txt{font-size:17px;line-height:1.7;color:#4a575e;}
.more-wrap{position:absolute;right:0;top:0;}
.more-link{width:58px;height:58px;border-radius:50%;background:#fff;color:var(--teal);display:flex;align-items:center;justify-content:center;}
.more-link:hover{background:var(--teal);color:#fff;}

/* ============================================================
   SECTION 5 : 통합예약
   ============================================================ */
.section5{padding:110px 0;background:#fff;}
.reserve-box .box-header,.board-box .box-header{display:flex;align-items:center;flex-wrap:wrap;gap:16px 28px;position:relative;}
.tab-wrap{display:flex;flex-wrap:wrap;gap:8px;}
.tab-btn{border:1px solid #dfe5e8;border-radius:30px;padding:10px 22px;font-size:15px;font-weight:600;color:#5d6d75;background:#fff;}
.tab-btn:hover{border-color:var(--teal);color:var(--teal);}
.tab-btn.on{background:var(--navy);border-color:var(--navy);color:#fff;}
.reserve-body{display:flex;align-items:center;gap:18px;margin-top:40px;}
.rs-viewport{flex:1 1 auto;overflow:hidden;}
.rs-list{display:flex;gap:20px;transition:transform .6s cubic-bezier(.22,.7,.3,1);}
.rs-item{flex:0 0 calc((100% - 60px)/4);}
.rs-item a{display:block;}
.rs-img{display:block;height:209px;border-radius:6px;overflow:hidden;background:#eef2f4;}
.rs-img img{width:100%;height:100%;object-fit:cover;transition:transform .6s;}
.rs-item a:hover .rs-img img{transform:scale(1.06);}
.rs-tit{display:block;font-size:18px;font-weight:700;margin-top:16px;color:#22333b;}
.rs-item a:hover .rs-tit{color:var(--teal);}
.rs-prev,.rs-next{flex:0 0 52px;width:52px;height:52px;border:1px solid #dfe5e8;border-radius:50%;display:flex;align-items:center;justify-content:center;color:#3c4b53;background:#fff;}
.rs-prev:hover,.rs-next:hover{background:var(--teal);border-color:var(--teal);color:#fff;}

/* ============================================================
   SECTION 6 : 재단소식
   ============================================================ */
.section6{padding:0 0 118px;background:#fff;}
.board-more{position:absolute;right:0;top:50%;transform:translateY(-50%);width:54px;height:54px;border-radius:50%;background:var(--teal);color:#fff;display:flex;align-items:center;justify-content:center;}
.board-more:hover{background:var(--navy);}
.board-list{display:grid;grid-template-columns:1fr 1fr;gap:0 60px;margin-top:34px;border-top:2px solid #191919;}
.board-item{border-bottom:1px solid var(--line);}
.board-item a{display:block;padding:26px 6px;}
.cate-list{display:flex;gap:8px;flex-wrap:wrap;}
.cate-item{display:inline-block;font-size:13px;font-weight:700;border-radius:20px;padding:4px 12px;background:#eef3f5;color:#5d6d75;}
.cate-item.cate-1{background:rgba(2,146,162,.1);color:var(--teal);}
.cate-item.cate-2{background:rgba(16,142,183,.1);color:var(--blue);}
.cate-item.cate-3{background:rgba(0,157,157,.12);color:var(--mint);}
.board-item .tit{display:block;font-size:19px;font-weight:600;line-height:1.5;margin:14px 0 12px;color:#22333b;
  display:-webkit-box;-webkit-line-clamp:1;-webkit-box-orient:vertical;overflow:hidden;}
.board-item a:hover .tit{color:var(--teal);text-decoration:underline;}
.board-item .date{display:inline-flex;align-items:center;gap:7px;font-size:15px;color:#8b9aa2;}
.ico-cal{width:16px;height:16px;flex:0 0 16px;background:currentColor;
  -webkit-mask:url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'><path d='M7 2v2H5a2 2 0 0 0-2 2v13a2 2 0 0 0 2 2h14a2 2 0 0 0 2-2V6a2 2 0 0 0-2-2h-2V2h-2v2H9V2H7Zm12 8v9H5v-9h14Z'/></svg>") no-repeat center/contain;
  mask:url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'><path d='M7 2v2H5a2 2 0 0 0-2 2v13a2 2 0 0 0 2 2h14a2 2 0 0 0 2-2V6a2 2 0 0 0-2-2h-2V2h-2v2H9V2H7Zm12 8v9H5v-9h14Z'/></svg>") no-repeat center/contain;}

/* ============================================================
   SECTION 7 : 바로가기
   ============================================================ */
.quick-box{background:var(--mint) url("./img/quick-pattern.png") repeat-x center bottom/auto 300px;padding:96px 0 104px;}
.quick-box .box-tit{color:#fff;font-size:30px;font-weight:600;line-height:1.5;letter-spacing:-.035em;text-align:center;}
.quick-box .box-tit b{font-weight:800;}
.quick-box .link-list{display:grid;grid-template-columns:repeat(3,1fr);gap:20px;max-width:1000px;margin:44px auto 0;}
.quick-box .link-list a{display:flex;align-items:center;justify-content:space-between;gap:12px;background:rgba(255,255,255,.96);border-radius:8px;padding:26px 28px;}
.quick-box .link-list a:hover{background:#fff;transform:translateY(-4px);box-shadow:0 12px 24px rgba(0,60,60,.18);}
.quick-box .link-list a{transition:.3s;}
.quick-box .tit{font-size:21px;font-weight:800;color:#0b5a5a;letter-spacing:-.035em;line-height:1.35;}
.quick-box .arw{width:34px;height:34px;flex:0 0 34px;border-radius:50%;background:var(--mint);color:#fff;display:flex;align-items:center;justify-content:center;}
.quick-box .arw svg{width:20px;height:20px;}

/* ============================================================
   FOOTER
   ============================================================ */
#foot_layout{background:#fff;padding:48px 0 60px;border-top:1px solid var(--line);}
.footer-family{display:grid;grid-template-columns:repeat(3,1fr);gap:20px;}
.family-item{position:relative;}
.open-btn{display:flex;align-items:center;justify-content:space-between;width:100%;border:1px solid #d9dfe2;padding:16px 20px;font-size:16px;color:#3c4b53;background:#fff;}
.open-btn i{width:16px;height:16px;position:relative;flex:0 0 16px;}
.open-btn i::before,.open-btn i::after{content:"";position:absolute;background:#77878f;left:50%;top:50%;transform:translate(-50%,-50%);}
.open-btn i::before{width:16px;height:1.5px;}
.open-btn i::after{width:1.5px;height:16px;transition:.25s;}
.family-item.open .open-btn i::after{height:0;}
.family-list{display:none;position:absolute;left:0;right:0;bottom:100%;background:#fff;border:1px solid #d9dfe2;border-bottom:0;max-height:180px;overflow:auto;}
.family-item.open .family-list{display:block;}
.family-list a{display:block;padding:11px 20px;font-size:15px;color:#5d6d75;}
.family-list a:hover{background:#f3f7f8;color:var(--teal);}

.footer-util{display:flex;align-items:center;justify-content:space-between;gap:20px;flex-wrap:wrap;margin-top:34px;}
.policy{display:flex;flex-wrap:wrap;gap:26px;}
.policy a{font-size:15px;color:#5d6d75;}
.policy a.strong{color:var(--teal);font-weight:700;text-decoration:underline;}
.policy a:hover{text-decoration:underline;}
.foot-sns{display:flex;gap:8px;}
.foot-sns a{width:30px;height:30px;border-radius:50%;background:#eef2f4;color:#5d6d75;display:flex;align-items:center;justify-content:center;}
.foot-sns a:hover{background:var(--teal);color:#fff;}

.footer-info{display:flex;align-items:flex-end;justify-content:space-between;gap:30px;flex-wrap:wrap;margin-top:22px;}
.info-txt p{font-size:15px;color:#6b7a82;line-height:1.85;}
.info-txt b{color:#3c4b53;font-weight:700;}
.info-txt .bar{color:#cfd7db;margin:0 8px;}
.info-txt .copy{margin-top:10px;color:#8b9aa2;}
.info-txt .disclaimer{margin-top:4px;font-size:12px;color:#b4bfc4;}
.info-logo{display:flex;align-items:center;gap:20px;}
.wa-mark svg{width:80px;height:52px;}
.foot-logo{display:flex;align-items:center;gap:8px;}
.foot-logo em{font-size:19px;font-weight:800;color:#1c2b33;letter-spacing:-.045em;}

.to-top{position:fixed;right:28px;bottom:28px;width:52px;height:52px;border-radius:50%;background:var(--navy);color:#fff;
  display:flex;align-items:center;justify-content:center;z-index:110;opacity:0;visibility:hidden;transition:.3s;box-shadow:0 6px 16px rgba(0,0,0,.2);}
.to-top.on{opacity:1;visibility:visible;}
.to-top:hover{background:var(--teal);}

/* ============================================================
   RESPONSIVE
   ============================================================ */
@media (max-width:1280px){
  .head-inner{gap:18px;padding:0 20px;}
  .gnb-list{gap:26px;}
  .gnb-link{font-size:17px;}
  .sns-content{grid-template-columns:1fr 1fr 44%;}
  .sns-yt{min-height:0;padding:34px 26px;}
  .mobil-tit{font-size:44px;}
  .weather-tit{font-size:44px;}
}
@media (max-width:1024px){
  #gnb,.head-util .util-link{display:none;}
  .head-inner{height:76px;justify-content:space-between;}
  .head-util{margin-left:auto;}
  .mega{display:none;}
  .visual{height:560px;}
  .visual-ctrl{left:20px;top:16px;}
  .vc-btn{font-size:14px;padding:12px 16px;}
  .vc-btn span{display:none;}
  .qm-inner{padding:0 20px;height:70px;}
  .qm-tit{font-size:19px;margin-right:18px;}
  .qm-list{overflow-x:auto;}
  .qm-list li{flex:0 0 auto;}
  .qm-list a{font-size:15px;padding:8px 16px;}
  .qm-deco,.qm-cloud{display:none;}
  .search-box{padding:76px 0 64px;}
  .search-tit{font-size:34px;}
  .section2{padding:80px 0;}
  .sns-content{grid-template-columns:1fr;}
  .sns-grid{grid-column:auto;}
  .sc-img{height:280px;}
  .section3{padding:80px 0;}
  .mobil-tit{font-size:36px;}
  .deco-ico{width:44px;height:44px;}
  .deco-ico svg{width:25px;height:25px;}
  .mobil-slide{width:100%;}
  .mobil-nav{position:static;margin-bottom:24px;}
  .mobil-more{position:static;margin-top:26px;}
  .mobil-viewport{padding-top:28px;}
  .weather-box{padding:80px 0;}
  .weather-tit{font-size:36px;}
  .rs-item{flex:0 0 calc((100% - 40px)/3);}
  .section5{padding:80px 0;}
  .section6{padding-bottom:80px;}
  .board-list{grid-template-columns:1fr;gap:0;}
  .quick-box{padding:70px 0;}
  .quick-box .box-tit{font-size:25px;}
  .quick-box .link-list{grid-template-columns:1fr;}
  .more-wrap{position:static;margin-top:20px;}
}
@media (max-width:768px){
  .visual{height:420px;}
  .qm-inner{max-width:none;}
  .search-box{padding:52px 0 44px;}
  .search-tit{font-size:27px;}
  .search-form{margin-top:32px;}
  .search-form input{height:52px;font-size:16px;}
  .search-tag{gap:8px;margin-top:22px;}
  .search-tag a{padding:9px 16px;font-size:14px;}
  .place-card{flex:0 0 250px;width:250px;}
  .pc-img{height:260px;}
  .box-tit{font-size:27px;}
  .sns-btn{font-size:14px;padding:9px 15px;}
  .sc-img{height:210px;}
  .yt-tit{font-size:22px;}
  .mobil-tit{font-size:28px;line-height:1.35;}
  .deco-ico{width:38px;height:38px;margin:0 6px;}
  .deco-ico svg{width:22px;height:22px;}
  .mobil-slide strong{font-size:26px;}
  .mobil-slide p{font-size:16px;}
  .mobil-pager button{font-size:14px;padding:8px 14px;}
  .weather-tit{font-size:28px;}
  .sun-ico,.sun-ico svg{width:40px;height:40px;}
  .weather-box .desc{font-size:17px;}
  .recommend-wrap{padding:26px 20px 22px;}
  .wrap-tit{font-size:20px;}
  .rec-item{font-size:15px;padding:11px 18px;}
  .review-card{padding:22px 20px;}
  .rv-tit{font-size:19px;}
  .rv-txt{font-size:16px;}
  .rs-item{flex:0 0 calc((100% - 20px)/2);}
  .rs-img{height:150px;}
  .rs-prev,.rs-next{flex:0 0 42px;width:42px;height:42px;}
  .board-item .tit{font-size:17px;}
  .quick-box .box-tit{font-size:21px;}
  .footer-family{grid-template-columns:1fr;}
  .footer-info{align-items:flex-start;}
  .info-logo{order:-1;}
}
@media (max-width:480px){
  .logo-text{font-size:19px;}
  .logo-bar{left:38px;height:3px;}
  .visual{height:340px;}
  .qm-tit{font-size:17px;}
  .search-tit{font-size:23px;}
  .place-card{flex:0 0 210px;width:210px;}
  .pc-img{height:220px;}
  .pc-area,.pc-name{font-size:13px;padding:5px 9px;}
  .pc-hot{left:66px;width:28px;height:28px;}
  .rs-item{flex:0 0 100%;}
  .rs-img{height:190px;}
  .mobil-tit{font-size:24px;}
  .info-txt p{font-size:13.5px;}
  .info-txt .bar{margin:0 5px;}
  .to-top{right:14px;bottom:14px;width:44px;height:44px;}
}

/* ---------- 모바일 미세 조정 ---------- */
@media (max-width:768px){
  .mobil-viewport{padding-bottom:16px;}
  .wrap-tit{display:block;}
  .wrap-tit .wt-ico,.wrap-tit .rv-ico{vertical-align:-6px;margin:0 2px;display:inline-flex;}
  .reserve-body{flex-wrap:wrap;justify-content:center;}
  .rs-viewport{flex:0 0 100%;order:-1;}
  .reserve-body{margin-top:28px;}
}
@media (max-width:480px){
  .search-tit{font-size:26px;}
}