@font-face{font-family:"jf-openhuninn";src:url("/assets/huninn-sub.woff2") format("woff2");font-display:swap}
:root{--coral:#ff6b6b;--peach:#ffb38a;--mint:#2ec4b6;--sky:#4d96ff;--sun:#ffd93d;--ink:#26314a;--soft:#fff8f3;--line:#ffe1d1}
*{box-sizing:border-box}
body{margin:0;background:var(--soft);color:var(--ink);font:17px/1.85 "Noto Sans TC","PingFang TC","Microsoft JhengHei",sans-serif}
a{color:var(--sky)}
.hd{position:sticky;top:0;z-index:20;background:#fff;border-bottom:3px solid var(--line);display:flex;align-items:center;gap:10px;padding:10px 16px}
.logo{white-space:nowrap;flex:none;font-family:"jf-openhuninn",sans-serif;font-size:19px;font-weight:700;color:var(--ink);text-decoration:none;display:flex;align-items:center;gap:8px}
.logo i{font-style:normal;display:inline-grid;place-items:center;width:34px;height:34px;border-radius:50%;background:var(--coral);color:#fff;font-size:17px;transform:rotate(-8deg)}
.nav{margin-left:auto;display:flex;gap:6px;overflow-x:auto}
.nav a{white-space:nowrap;font-size:14px;padding:4px 12px;border-radius:999px;background:var(--soft);color:var(--ink);text-decoration:none;border:2px solid var(--line)}
.hero{position:relative;overflow:hidden;background:linear-gradient(135deg,#ff8787 0%,#ffb38a 45%,#ffe08a 100%);padding:34px 20px 70px;color:#fff}
.hero .in{max-width:760px;margin:0 auto;position:relative;z-index:2}
.cat{display:inline-block;background:#fff;color:var(--coral);font-weight:700;font-size:14px;padding:4px 14px;border-radius:999px;box-shadow:3px 3px 0 var(--ink)}
.hero h1{font-family:"jf-openhuninn",sans-serif;font-size:30px;line-height:1.35;margin:14px 0 12px;text-shadow:2px 2px 0 rgba(38,49,74,.25)}
.chip{display:inline-block;margin:0 6px 6px 0;font-size:13px;padding:3px 11px;border-radius:999px;background:rgba(255,255,255,.28);border:1.5px solid rgba(255,255,255,.7)}
.stamp{position:absolute;right:-18px;top:18px;width:150px;height:150px;border:4px dashed rgba(255,255,255,.75);border-radius:50%;display:grid;place-items:center;text-align:center;font:700 15px/1.3 "jf-openhuninn",sans-serif;color:rgba(255,255,255,.9);transform:rotate(14deg);z-index:1}
.wave{position:absolute;left:0;right:0;bottom:-1px;height:40px;background:var(--soft);clip-path:polygon(0 60%,8% 40%,16% 55%,25% 35%,34% 55%,42% 38%,50% 58%,58% 36%,67% 55%,75% 38%,84% 58%,92% 40%,100% 55%,100% 100%,0 100%)}
.wrap{max-width:760px;margin:-34px auto 0;position:relative;z-index:3;padding:0 14px 90px}
.toc{background:#fff;border-radius:18px;padding:10px 12px;margin-bottom:16px;border:2px solid var(--line);display:flex;gap:6px;overflow-x:auto;white-space:nowrap;scrollbar-width:none}
.toc b{font-family:"jf-openhuninn",sans-serif;font-size:14px;padding:3px 4px;flex:none}
.toc a{flex:none;font-size:13px;text-decoration:none;color:var(--ink);background:var(--soft);padding:3px 10px;border-radius:999px}
.post{background:#fff;border-radius:22px;padding:24px 20px 30px;box-shadow:0 8px 0 var(--line);counter-reset:h2}
.post>p{margin:0 0 14px}
/* 30秒看懂 */
.sum-head{font-family:"jf-openhuninn",sans-serif;font-size:20px;margin:22px 0 10px!important;display:flex;align-items:center;gap:8px}
.sum-head:before{content:"";width:28px;height:28px;border-radius:8px;background:var(--sun) url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Ccircle cx='12' cy='13' r='7' fill='none' stroke='%2326314a' stroke-width='2.4'/%3E%3Cpath d='M12 9v4l2.5 2M9 3h6' stroke='%2326314a' stroke-width='2.4' fill='none' stroke-linecap='round'/%3E%3C/svg%3E") center/18px no-repeat;transform:rotate(-6deg)}
.sum{position:relative;padding:12px 14px 12px 16px!important;border-radius:14px;margin-bottom:8px!important;background:#f1fbfa;border:2px solid #c9efeb}
.sum b{display:block;font-size:16px}
.sum-1{background:#fff0f0;border-color:#ffd0d0}.sum-1 b{color:#e03e3e}
.sum-2{background:#eef5ff;border-color:#cfe0ff}.sum-2 b{color:#2c6fd6}
.sum-3{background:#f1fbfa;border-color:#c9efeb}.sum-3 b{color:#159a8f}
/* 여정 */
.journey{display:grid;grid-template-columns:repeat(4,1fr);margin:16px 0 22px!important;padding:14px 4px 10px;background:var(--soft);border-radius:16px}
.jn{position:relative;text-align:center;font-size:13px;line-height:1.4;padding:0 4px;word-break:keep-all}
.jn i{display:grid;place-items:center;margin:0 auto 6px;width:36px;height:36px;border-radius:50%;background:var(--ink);color:#fff;font-style:normal;font-weight:700;position:relative;z-index:2}
.jn:not(:last-child):after{content:"";position:absolute;top:18px;left:calc(50% + 20px);right:calc(-50% + 20px);border-top:3px dotted var(--coral)}
.jn:last-child i{background:var(--coral)}
/* CTA */
.cta{text-align:center;margin:20px 0!important}
.cta a{display:inline-block;background:var(--coral);color:#fff;font-weight:700;padding:14px 26px;border-radius:16px;text-decoration:none;box-shadow:0 5px 0 #c94b4b;transition:transform .1s}
.cta a:active{transform:translateY(4px);box-shadow:0 1px 0 #c94b4b}
.cta a:after{content:"  →"}
/* H2 */
.post h2{counter-increment:h2;font-family:"jf-openhuninn",sans-serif;font-size:22px;line-height:1.4;margin:42px 0 14px;padding-left:52px;position:relative}
.post h2:before{content:counter(h2,decimal-leading-zero);position:absolute;left:0;top:-2px;width:40px;height:40px;border-radius:12px;background:var(--mint);color:#fff;display:grid;place-items:center;font-size:17px;transform:rotate(-6deg);box-shadow:2px 2px 0 var(--ink)}
.post h2:after{content:"";display:block;height:8px;margin-top:6px;background:repeating-linear-gradient(90deg,var(--sun) 0 14px,transparent 14px 22px);border-radius:4px;width:120px}
.post h2.src-h:before{background:#c8ced8}
/* 단계 타임라인 */
.step{position:relative;margin:0!important;padding:4px 0 22px 58px!important;min-height:58px}
.step .sn{position:absolute;left:0;top:0;width:42px;height:42px;border-radius:50%;background:var(--sky);color:#fff;display:grid;place-items:center;font-size:18px;box-shadow:0 4px 0 #2c5fb0}
.step:before{content:"";position:absolute;left:20px;top:44px;bottom:2px;border-left:3px dashed #b9d2ff}
.step:last-of-type:before{display:none}
.step+p:not(.step){margin-top:6px!important}
/* 박스 */
.tip,.warn{position:relative;border-radius:16px;padding:16px 16px 14px!important;margin:18px 0!important}
.tip{background:#effcf6;border:2px solid #9be3c3}
.warn{background:#fffbe6;border:2px solid var(--ink);box-shadow:4px 4px 0 var(--sun)}
.lbl{display:inline-block;font-size:13px;padding:1px 10px;border-radius:999px;margin-right:8px;color:#fff;background:#12a974}
.warn .lbl{background:var(--ink);color:var(--sun)}
mark{background:linear-gradient(transparent 55%,#ffd1dc 55%);color:inherit;padding:0 2px}
/* 체크리스트 */
.check-head{font-family:"jf-openhuninn",sans-serif;font-size:18px;margin:18px 0 8px!important;display:flex;justify-content:space-between;align-items:center}
.ck-count{font:700 13px "Noto Sans TC",sans-serif;background:var(--ink);color:#fff;padding:2px 10px;border-radius:999px}
.check{cursor:pointer;user-select:none;padding:10px 14px 10px 48px!important;margin:0 0 8px!important;border-radius:12px;background:var(--soft);border:2px dashed var(--line);position:relative;transition:all .15s}
.check:before{content:"";position:absolute;left:14px;top:50%;margin-top:-11px;width:22px;height:22px;border-radius:7px;border:2.5px solid var(--coral);background:#fff}
.check.on{background:#fff0f0;border-style:solid;border-color:#ffc9c9;text-decoration:line-through;color:#9aa3b2}
.check.on:before{background:var(--coral) url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath d='M5 12.5l4.5 4.5L19 7.5' stroke='white' stroke-width='3.2' fill='none' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E") center/16px no-repeat}
/* 이미지·표 */
.fig{margin:20px 0 4px!important;text-align:center}
.fig img{max-width:100%;height:auto;border-radius:16px;border:3px solid #fff;box-shadow:0 0 0 2px var(--line),6px 6px 0 var(--line)}
.cap{font-size:13.5px;color:#7a8396;text-align:center}
table{width:100%;border-collapse:separate;border-spacing:0;margin:16px 0 22px;font-size:15px;border:2px solid var(--ink);border-radius:14px;overflow:hidden}
th{background:var(--ink);color:#fff;padding:9px 8px;font-weight:700}
td{padding:9px 8px;border-top:1.5px solid #e6e8ee;vertical-align:top}
tr:nth-child(2) td:first-child{font-weight:700;color:var(--coral)}
td:first-child{font-weight:700}
/* FAQ */
.q{cursor:pointer;font-weight:700;margin:10px 0 0!important;padding:12px 40px 12px 14px!important;background:#eef5ff;border-radius:12px;position:relative}
.q:after{content:"+";position:absolute;right:14px;top:9px;font-size:22px;color:var(--sky);transition:transform .2s}
.q.open:after{transform:rotate(45deg)}
.a{padding:10px 14px 4px!important;margin:0!important;border-left:3px solid var(--sky);margin-left:14px!important}
.a.hide{display:none}
.src{font-size:13px;line-height:1.6;margin:0 0 4px!important;opacity:.8}
/* 하단 고정 CTA */
.bar{position:fixed;left:0;right:0;bottom:0;z-index:30;padding:10px 14px calc(10px + env(safe-area-inset-bottom));background:rgba(255,255,255,.95);backdrop-filter:blur(6px);border-top:2px solid var(--line);display:flex;justify-content:center;transform:translateY(110%);transition:transform .25s}
.bar.show{transform:none}
.bar a{flex:1;max-width:520px;text-align:center;background:var(--coral);color:#fff;font-weight:700;padding:12px;border-radius:14px;text-decoration:none}
.top{position:fixed;right:14px;bottom:80px;z-index:31;width:44px;height:44px;border-radius:50%;background:var(--ink);color:#fff;border:0;font-size:20px;opacity:0;transition:opacity .2s}
.top.show{opacity:1}
.bc{font-size:13px;margin:0 0 10px;opacity:.95}.bc a{color:#fff;text-decoration:none}
.share{display:flex;flex-wrap:wrap;align-items:center;gap:8px;margin:18px 0 0;padding:14px 16px;background:#fff;border-radius:18px;border:2px solid var(--line)}
.share span{font-family:"jf-openhuninn",sans-serif;font-weight:700;margin-right:4px}
.share a,.share button{font:700 14px "Noto Sans TC",sans-serif;padding:7px 14px;border-radius:999px;border:0;color:#fff;text-decoration:none;cursor:pointer}
.sh-line{background:#06c755}.sh-fb{background:#1877f2}.sh-th{background:#111}.sh-copy{background:var(--ink)}

@media(max-width:560px){.post{padding:20px 15px 26px}table{font-size:13.5px}th,td{padding:7px 5px}th{white-space:nowrap}.hero h1{font-size:25px}.stamp{width:110px;height:110px;font-size:12px;right:-26px}article{padding:20px 15px 26px}.post h2{font-size:20px}}

/* ===== 공유·경로 ===== */
.bc{font-size:13px;margin:0 0 10px;opacity:.95}.bc a{color:#fff;text-decoration:none}
.share{display:flex;flex-wrap:wrap;align-items:center;gap:8px;margin:18px 0 0;padding:14px 16px;background:#fff;border-radius:18px;border:2px solid var(--line)}
.share span{font-family:"jf-openhuninn",sans-serif;font-weight:700;margin-right:4px}
.share a,.share button{font:700 14px "Noto Sans TC",sans-serif;padding:7px 14px;border-radius:999px;border:0;color:#fff;text-decoration:none;cursor:pointer}
.sh-line{background:#06c755}.sh-fb{background:#1877f2}.sh-th{background:#111}.sh-copy{background:var(--ink)}
/* ===== 공용 섹션 ===== */
.panel{background:#fff;border-radius:22px;padding:22px 18px 24px;margin-bottom:18px;box-shadow:0 8px 0 var(--line)}
.sec-t{font-family:"jf-openhuninn",sans-serif;font-size:23px;line-height:1.35;margin:4px 0 14px;display:flex;align-items:center;gap:10px}
.sec-t:before{content:"";flex:none;width:12px;height:26px;border-radius:6px;background:var(--coral);transform:rotate(8deg)}
.panel .sec-t~.sec-t{margin-top:30px}
.hub-note{font-size:14px;color:#7a8396;margin:-6px 0 12px}
.more{text-align:right;margin:14px 0 0;font-weight:700}.more a{text-decoration:none;color:var(--coral)}
.related{margin-top:22px}
/* 카드 */
.cards{display:grid;grid-template-columns:repeat(auto-fill,minmax(210px,1fr));gap:14px}
.card{display:flex;flex-direction:column;background:#fff;border-radius:18px;overflow:hidden;text-decoration:none;color:var(--ink);border:2px solid var(--line);transition:transform .15s,box-shadow .15s}
.card:hover{transform:translateY(-4px) rotate(-.4deg);box-shadow:0 10px 0 var(--line)}
.card-img{display:block;aspect-ratio:16/10;background:var(--soft);overflow:hidden}
.card-img img{width:100%;height:100%;object-fit:cover;display:block}
.card-img .ph{display:grid;place-items:center;height:100%;color:#fff;font:700 48px "jf-openhuninn",sans-serif}
.card-hub{align-self:flex-start;margin:12px 14px 0;font-size:12px;font-weight:700;color:#fff;background:var(--c);padding:2px 10px;border-radius:999px}
.card-t{display:block;font-weight:700;font-size:16px;line-height:1.5;margin:8px 14px 4px}
.card-d{display:block;font-size:13.5px;color:#7a8396;margin:0 14px 14px}
.cards.big{grid-template-columns:repeat(auto-fill,minmax(230px,1fr))}
/* 주제 타일 */
.tiles{display:grid;grid-template-columns:repeat(auto-fill,minmax(150px,1fr));gap:10px}
.tile{display:flex;align-items:center;gap:10px;padding:12px;border-radius:16px;background:var(--soft);text-decoration:none;color:var(--ink);font-weight:700;border:2px solid transparent;transition:all .15s}
.tile:hover{border-color:var(--c);background:#fff}
.tile b{flex:none;display:grid;place-items:center;width:44px;height:44px;border-radius:14px;background:var(--c);color:#fff;font:700 22px "jf-openhuninn",sans-serif;transform:rotate(-6deg);box-shadow:2px 2px 0 var(--ink)}
/* ===== 홈 히어로 ===== */
.home-hero{position:relative;overflow:hidden;min-height:470px;color:#fff;background:#26314a}
.collage{position:absolute;inset:0;display:grid;grid-template-columns:repeat(3,1fr);grid-template-rows:repeat(2,1fr)}
.collage img{width:100%;height:100%;object-fit:cover;display:block;filter:saturate(1.1)}
.home-hero:after{content:"";position:absolute;inset:0;background:linear-gradient(180deg,rgba(38,49,74,.25) 0%,rgba(255,107,107,.55) 55%,rgba(255,140,90,.92) 100%);z-index:1}
.hh-in{position:relative;z-index:2;max-width:760px;margin:0 auto;padding:60px 20px 90px}
.home-hero h1{font-family:"jf-openhuninn",sans-serif;font-size:40px;line-height:1.25;margin:16px 0 12px;text-shadow:3px 3px 0 rgba(38,49,74,.45)}
.hero-sub{font-size:16px;line-height:1.7;max-width:560px;text-shadow:0 1px 6px rgba(0,0,0,.35)}
.quick{display:flex;flex-wrap:wrap;gap:8px;margin-top:18px}
.quick a{display:flex;align-items:center;gap:6px;background:#fff;color:var(--ink);text-decoration:none;font-weight:700;font-size:14px;padding:5px 14px 5px 5px;border-radius:999px;box-shadow:3px 3px 0 var(--ink)}
.quick b{display:grid;place-items:center;width:28px;height:28px;border-radius:50%;background:var(--c);color:#fff;font:700 14px "jf-openhuninn",sans-serif}
.home-hero .wave{z-index:3}
.wrap.home{margin-top:-30px}
/* Top 10 */
.tops{display:grid;gap:8px}
.topq{display:grid;grid-template-columns:40px 1fr auto auto;align-items:center;gap:10px;padding:10px 12px;border-radius:14px;background:var(--soft);text-decoration:none;color:var(--ink)}
a.topq:hover{background:#fff0f0}
.rk{display:grid;place-items:center;width:34px;height:34px;border-radius:10px;background:var(--ink);color:#fff;font-size:16px}
.topq:nth-child(-n+3) .rk{background:var(--coral);transform:rotate(-6deg)}
.tq{display:block;min-width:0}.tq-t{display:block;font-weight:700;font-size:15px;line-height:1.4;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.heat{display:block;height:6px;border-radius:3px;background:#ffe1d1;margin-top:5px}.heat i{display:block;height:100%;border-radius:3px;background:linear-gradient(90deg,var(--sun),var(--coral))}
.tq-h{font-size:11.5px;font-weight:700;color:var(--c);border:1.5px solid var(--c);padding:1px 7px;border-radius:999px;white-space:nowrap}
.go{font-size:12.5px;font-weight:700;color:#fff;background:var(--coral);padding:4px 10px;border-radius:999px;white-space:nowrap}
.soon .go{background:#c8ced8}.soon{opacity:.85}
/* 사진 벽 (원본 비율 그대로 — TourAPI Type3 변경금지 대응: 자르지 않음) */
.filters{display:flex;flex-wrap:wrap;gap:6px;margin:0 0 12px}
.filters button{font:700 13.5px "Noto Sans TC",sans-serif;padding:5px 14px;border-radius:999px;border:2px solid var(--line);background:#fff;color:var(--ink);cursor:pointer}
.filters button.on{background:var(--ink);border-color:var(--ink);color:#fff}
.wall{columns:3 220px;column-gap:12px}
.spot{position:relative;display:block;break-inside:avoid;margin:0 0 12px;border-radius:16px;overflow:hidden;text-decoration:none;color:#fff;box-shadow:0 5px 0 var(--line);transition:transform .2s}
.spot:hover{transform:translateY(-3px) rotate(.4deg)}
.spot img{display:block;width:100%;height:auto}
.spot-cap{position:absolute;left:0;right:0;bottom:0;padding:26px 12px 10px;background:linear-gradient(transparent,rgba(20,24,38,.78));font-weight:700;font-size:15px;line-height:1.35}
.spot-cap em{display:inline-block;font-style:normal;font-size:11.5px;background:var(--coral);padding:1px 8px;border-radius:999px;margin-right:6px;vertical-align:2px}
.spot-cap small{display:block;font-size:11.5px;font-weight:500;opacity:.9;margin-top:2px}
.credit{position:absolute;top:6px;right:8px;font-size:10px;opacity:.85;text-shadow:0 1px 3px rgba(0,0,0,.6)}
.spot.hide{display:none}
/* 신뢰 */
.tr{padding:12px 14px 12px 16px;border-radius:14px;background:var(--soft);margin:0 0 8px}.tr b{display:block;color:var(--coral)}
/* 허브 히어로 */
.hero-hub{background:linear-gradient(135deg,var(--hc) 0%,#ffb38a 130%)}
.hub-ic{display:inline-grid;place-items:center;width:58px;height:58px;border-radius:18px;background:#fff;color:var(--hc);font:700 30px "jf-openhuninn",sans-serif;transform:rotate(-8deg);box-shadow:4px 4px 0 var(--ink)}
.todo{display:flex;flex-wrap:wrap;gap:6px}.todo span{font-size:13.5px;padding:4px 12px;border-radius:999px;background:var(--soft);border:1.5px dashed var(--line);color:#5b6476}
.post.simple h2:before{display:none}.post.simple h2{padding-left:0}
/* 푸터 */
.ft{background:var(--ink);color:#cfd5e3;padding:34px 20px 110px;margin-top:20px}
.ft-in{max-width:760px;margin:0 auto}
.ft-logo{font:700 20px "jf-openhuninn",sans-serif;color:#fff;display:flex;align-items:center;gap:8px;margin:0 0 8px}
.ft-logo i{font-style:normal;display:inline-grid;place-items:center;width:30px;height:30px;border-radius:50%;background:var(--coral);color:#fff;font-size:15px}
.ft-desc{font-size:14px;margin:0 0 14px}
.ft-links{display:flex;flex-wrap:wrap;gap:6px 14px;margin:0 0 10px}.ft-links a{color:#fff;text-decoration:none;font-size:14px}
.ft-links.small a{color:#aab3c5;font-size:13px}
.ft-copy{font-size:12px;color:#8892a6;margin:16px 0 0}
.bar.none{display:none}
@media(max-width:560px){.home-hero{min-height:440px}.home-hero h1{font-size:31px}.hh-in{padding:44px 18px 84px}.collage{grid-template-columns:repeat(2,1fr);grid-template-rows:repeat(3,1fr)}
.wall{columns:2 140px;column-gap:8px}.spot{margin-bottom:8px}.spot-cap{font-size:13px;padding:22px 9px 8px}
.topq{grid-template-columns:34px 1fr auto;gap:8px}.tq-h{display:none}.rk{width:30px;height:30px}
.tiles{grid-template-columns:repeat(2,1fr)}.sec-t{font-size:20px}.panel{padding:18px 14px 20px}}

/* 카드 표지: 허브 색 + 큰 글자 */
.cv{position:relative;display:flex;flex-direction:column;justify-content:flex-end;height:100%;padding:14px 16px;overflow:hidden;color:#fff;background:linear-gradient(135deg,var(--c),#ffb38a 140%)}
.cv i{position:absolute;right:-8px;top:-18px;font:700 120px/1 "jf-openhuninn",sans-serif;font-style:normal;opacity:.22;transform:rotate(-10deg)}
.cv em{position:absolute;left:14px;top:12px;font:700 12px "Noto Sans TC",sans-serif;font-style:normal;letter-spacing:.05em;border:2px dashed rgba(255,255,255,.8);padding:2px 9px;border-radius:999px;transform:rotate(-4deg)}
.cv strong{position:relative;font:700 21px/1.35 "jf-openhuninn",sans-serif;text-shadow:2px 2px 0 rgba(38,49,74,.25)}