/* YOGI — 편집형 여행 큐레이션. 강조색은 페이지가 --accent 로 주입(일본=주홍, 한국=틸). */
*{box-sizing:border-box;margin:0;padding:0}
:root{
  --paper:#faf6f0; --paper2:#f2ebe1; --ink:#1c1712; --ink2:#5c5348; --line:#e6ddd0;
  --card:#fffdf9; --radius:18px;
  --accent:#e0384d; --accent-soft:#fff1f2;
  --font-body:"Gothic A1",system-ui,sans-serif; --font-serif:"Nanum Myeongjo",serif;
  --shadow-sm:0 6px 20px rgba(28,23,18,.07);
  --shadow-lg:0 30px 80px rgba(28,23,18,.16);
  --shadow-hover:0 40px 90px rgba(28,23,18,.22);
}
html{scroll-behavior:smooth;-webkit-text-size-adjust:100%}
body{
  font-family:var(--font-body); color:var(--ink); line-height:1.6;
  background:
    radial-gradient(1100px 620px at 85% -8%, color-mix(in srgb, var(--accent) 12%, transparent), transparent 60%),
    radial-gradient(900px 560px at -10% 12%, rgba(120,150,170,.14), transparent 62%),
    var(--paper);
  -webkit-font-smoothing:antialiased;
}
.wrap{max-width:1120px;margin:0 auto;padding:0 22px}
a{color:inherit;text-decoration:none}
img{max-width:100%}

/* header */
.hd{position:sticky;top:0;z-index:40;backdrop-filter:saturate(160%) blur(10px);
  background:color-mix(in srgb, var(--paper) 82%, transparent);border-bottom:1px solid var(--line)}
.hdrow{display:flex;align-items:center;justify-content:space-between;height:64px}
.brand{display:flex;align-items:center;gap:9px;font-weight:900;font-size:22px;letter-spacing:.02em}
.brand-mark{width:20px;height:20px;border-radius:6px;background:var(--accent);
  box-shadow:0 4px 14px color-mix(in srgb, var(--accent) 45%, transparent);
  position:relative;transition:transform .3s ease}
.brand-mark::after{content:"";position:absolute;inset:0;margin:auto;width:6px;height:6px;border-radius:50%;background:#fff;top:5px}
.brand:hover .brand-mark{transform:rotate(-8deg) scale(1.08)}
.langlink{font-weight:700;font-size:14px;color:var(--ink2);padding:9px 15px;border:1px solid var(--line);
  border-radius:999px;background:var(--card);transition:all .25s ease}
.langlink:hover{color:var(--accent);border-color:var(--accent);transform:translateY(-1px);box-shadow:var(--shadow-sm)}

/* hero */
.hero{padding:70px 0 40px;position:relative}
.kicker{font-family:var(--font-serif);font-style:italic;font-size:17px;color:var(--accent);
  display:inline-block;margin-bottom:16px;letter-spacing:.01em}
.hero h1{font-family:var(--font-serif);font-weight:800;font-size:clamp(34px,6vw,62px);line-height:1.12;
  letter-spacing:-.01em;color:var(--ink)}
.accentword{color:var(--accent);position:relative;white-space:nowrap}
.accentword::after{content:"";position:absolute;left:-2%;right:-2%;bottom:.08em;height:.28em;z-index:-1;
  background:color-mix(in srgb, var(--accent) 20%, transparent);border-radius:4px}
.lead{margin-top:22px;max-width:640px;font-size:18px;color:var(--ink2);font-weight:500}
.searchbar{margin-top:30px;max-width:560px}
.searchbar input{width:100%;height:58px;border:1.5px solid var(--line);border-radius:15px;background:var(--card);
  padding:0 20px;font-size:16px;font-family:inherit;color:var(--ink);box-shadow:var(--shadow-sm);transition:all .25s ease}
.searchbar input:focus{outline:none;border-color:var(--accent);box-shadow:0 0 0 4px var(--accent-soft),var(--shadow-sm)}
.schips{margin-top:16px;display:flex;flex-wrap:wrap;gap:9px}
.schip{border:1px solid var(--line);background:var(--card);color:var(--ink2);font-family:inherit;font-weight:600;
  font-size:14px;padding:8px 15px;border-radius:999px;cursor:pointer;transition:all .2s ease}
.schip:hover{color:var(--accent);border-color:var(--accent);transform:translateY(-1px)}
.statline{margin-top:26px;font-size:15px;color:var(--ink2)}
.statline b{color:var(--ink);font-weight:900}

/* regions */
.regions{padding:26px 0}
.eyebrow{font-family:var(--font-serif);font-style:italic;font-size:15px;color:var(--accent);display:block;margin-bottom:14px}
.regionrow{display:flex;flex-wrap:wrap;gap:10px}
.region{display:inline-flex;align-items:center;gap:8px;border:1px solid var(--line);background:var(--card);
  color:var(--ink);font-family:inherit;font-weight:700;font-size:15px;padding:10px 16px;border-radius:12px;
  cursor:pointer;transition:all .22s ease;box-shadow:var(--shadow-sm)}
.region b{font-size:12px;color:#fff;background:var(--accent);border-radius:999px;min-width:20px;height:20px;
  display:inline-flex;align-items:center;justify-content:center;padding:0 5px}
.region:hover{transform:translateY(-2px);box-shadow:var(--shadow-lg)}
.region.on{border-color:var(--accent);background:var(--accent-soft)}

/* grid */
.grid-sec{padding:38px 0 70px}
.grid-sec h2{font-family:var(--font-serif);font-weight:800;font-size:clamp(26px,4vw,38px);margin-top:4px;letter-spacing:-.01em}
.secdesc{color:var(--ink2);font-size:16px;margin:12px 0 30px;max-width:600px;font-weight:500}
.grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(280px,1fr));gap:24px}
.card{display:flex;flex-direction:column;background:var(--card);border:1px solid var(--line);border-radius:var(--radius);
  overflow:hidden;box-shadow:var(--shadow-sm);transition:transform .3s cubic-bezier(.2,.7,.2,1),box-shadow .3s ease}
.card:hover{transform:translateY(-6px);box-shadow:var(--shadow-hover)}
.card-ph{position:relative;height:168px;display:flex;align-items:center;justify-content:center;
  background:
    radial-gradient(120% 120% at 20% 10%, color-mix(in srgb, var(--tone) 78%, #fff) 0%, var(--tone) 55%, color-mix(in srgb, var(--tone) 70%, #000) 100%);}
.card-emoji{font-size:58px;filter:drop-shadow(0 8px 18px rgba(0,0,0,.28));transition:transform .35s ease}
.card:hover .card-emoji{transform:scale(1.12) rotate(-4deg)}
.card-area{position:absolute;left:14px;top:14px;background:rgba(0,0,0,.42);color:#fff;font-weight:700;font-size:13px;
  padding:5px 11px;border-radius:999px;backdrop-filter:blur(4px)}
.card-type{position:absolute;right:14px;top:14px;background:rgba(255,255,255,.92);color:var(--ink);font-weight:800;
  font-size:12px;padding:5px 11px;border-radius:999px}
.card-body{padding:18px 18px 20px;display:flex;flex-direction:column;flex:1}
.card-body h3{font-size:19px;font-weight:800;letter-spacing:-.01em}
.card-body p{margin-top:8px;color:var(--ink2);font-size:14.5px;font-weight:500;flex:1}
.chips{display:flex;flex-wrap:wrap;gap:7px;margin-top:14px}
.chip{font-size:12.5px;font-weight:700;color:var(--accent);background:var(--accent-soft);
  border:1px solid color-mix(in srgb, var(--accent) 20%, transparent);padding:4px 10px;border-radius:999px}
.card-more{margin-top:16px;font-weight:800;font-size:14px;color:var(--accent);display:inline-flex;gap:6px}
.card-more b{transition:transform .25s ease}
.card:hover .card-more b{transform:translateX(4px)}
.noresult{text-align:center;color:var(--ink2);padding:40px;font-weight:600}

/* detail */
.detail{padding:34px 0 70px}
.crumb{font-size:14px;color:var(--ink2);margin-bottom:22px;font-weight:600}
.crumb a:hover{color:var(--accent)}
.crumb span{opacity:.5;margin:0 6px}
.crumb b{color:var(--ink)}
.dhero{height:230px;border-radius:22px;display:flex;align-items:center;justify-content:center;position:relative;
  box-shadow:var(--shadow-lg);
  background:radial-gradient(130% 130% at 25% 12%, color-mix(in srgb, var(--tone) 80%, #fff), var(--tone) 52%, color-mix(in srgb, var(--tone) 65%, #000));}
.dhero-emoji{font-size:88px;filter:drop-shadow(0 12px 26px rgba(0,0,0,.3))}
.dhero .card-type{right:18px;top:18px}
.darea{display:inline-block;margin-top:22px;font-weight:800;color:var(--accent);font-size:15px}
.dtitle{font-family:var(--font-serif);font-weight:800;font-size:clamp(28px,5vw,44px);margin-top:8px;line-height:1.18}
.dchips{margin-top:16px}
.dsummary{margin-top:18px;font-size:18px;color:var(--ink2);font-weight:500;max-width:680px}
.dblock{margin-top:34px;padding-top:28px;border-top:1px solid var(--line)}
.dblock h2{font-family:var(--font-serif);font-weight:800;font-size:22px;margin-bottom:12px}
.dblock p{font-size:16.5px;color:var(--ink2);font-weight:500;max-width:700px}
.mustlist{list-style:none;display:flex;flex-direction:column;gap:12px}
.mustlist li{position:relative;padding-left:30px;font-size:16.5px;color:var(--ink);font-weight:600}
.mustlist li::before{content:"";position:absolute;left:0;top:.35em;width:16px;height:16px;border-radius:5px;
  background:var(--accent);box-shadow:0 4px 12px color-mix(in srgb, var(--accent) 45%, transparent)}
.dactions{margin-top:40px;display:flex;flex-wrap:wrap;gap:12px}
.btn{display:inline-flex;align-items:center;gap:7px;font-weight:800;font-size:15px;padding:14px 24px;border-radius:13px;
  cursor:pointer;transition:all .25s ease;border:1.5px solid transparent}
.btn.accent{background:var(--accent);color:#fff;box-shadow:0 16px 40px color-mix(in srgb, var(--accent) 40%, transparent)}
.btn.accent:hover{transform:translateY(-2px);box-shadow:0 24px 55px color-mix(in srgb, var(--accent) 50%, transparent)}
.btn.ghost{background:var(--card);border-color:var(--line);color:var(--ink)}
.btn.ghost:hover{border-color:var(--accent);color:var(--accent)}

/* footer */
.ft{border-top:1px solid var(--line);background:color-mix(in srgb, var(--paper2) 60%, var(--paper));padding:48px 0;margin-top:20px}
.ftbrand{font-size:20px;justify-content:flex-start;margin-bottom:12px}
.ftline{font-weight:700;color:var(--ink);margin-bottom:6px}
.ftsrc{font-size:13.5px;color:var(--ink2);margin-bottom:16px;max-width:560px}
.ftcopy{font-size:13px;color:var(--ink2)}
.ftcopy a:hover{color:var(--accent)}

/* entrance */
@keyframes rise{from{opacity:0;transform:translateY(18px)}to{opacity:1;transform:none}}
.hero>.wrap>*{animation:rise .6s cubic-bezier(.2,.7,.2,1) both}
.hero .kicker{animation-delay:.02s}.hero h1{animation-delay:.08s}.hero .lead{animation-delay:.16s}
.hero .searchbar{animation-delay:.24s}.hero .schips{animation-delay:.3s}.hero .statline{animation-delay:.36s}
.card{animation:rise .5s cubic-bezier(.2,.7,.2,1) both}
.grid .card:nth-child(1){animation-delay:.04s}.grid .card:nth-child(2){animation-delay:.1s}
.grid .card:nth-child(3){animation-delay:.16s}.grid .card:nth-child(4){animation-delay:.22s}
@media (prefers-reduced-motion:reduce){*{animation:none!important;transition:none!important}}

@media(max-width:640px){
  .hero{padding:48px 0 30px}
  .grid{grid-template-columns:1fr;gap:18px}
  .dhero{height:180px}.dhero-emoji{font-size:64px}
}

/* ===== 인터랙션 (2026-09-19 추가) ===== */
/* 스크롤 진행바 */
.scrollbar{position:fixed;top:0;left:0;height:3px;width:0;z-index:60;
  background:linear-gradient(90deg,var(--accent),color-mix(in srgb,var(--accent) 40%,#fff));
  box-shadow:0 2px 12px color-mix(in srgb,var(--accent) 45%,transparent);transition:width .1s linear}

/* 히어로 오로라 (움직이는 분위기) */
.hero{overflow:hidden}
.aurora{position:absolute;inset:-20% -10% auto -10%;height:120%;z-index:0;pointer-events:none;filter:blur(46px);opacity:.55}
.aurora::before,.aurora::after{content:"";position:absolute;border-radius:50%}
.aurora::before{width:440px;height:440px;left:8%;top:-8%;
  background:radial-gradient(circle,color-mix(in srgb,var(--accent) 55%,transparent),transparent 68%);
  animation:drift1 15s ease-in-out infinite}
.aurora::after{width:380px;height:380px;right:6%;top:14%;
  background:radial-gradient(circle,rgba(120,160,180,.5),transparent 68%);
  animation:drift2 18s ease-in-out infinite}
.hero .wrap{position:relative;z-index:1}
@keyframes drift1{0%,100%{transform:translate(0,0) scale(1)}50%{transform:translate(40px,30px) scale(1.12)}}
@keyframes drift2{0%,100%{transform:translate(0,0) scale(1)}50%{transform:translate(-50px,20px) scale(1.15)}}

/* 스탯 밴드 + 카운트업 */
.statband{margin-top:34px;display:flex;gap:14px;flex-wrap:wrap}
.stat{background:var(--card);border:1px solid var(--line);border-radius:15px;padding:16px 22px;min-width:112px;
  box-shadow:var(--shadow-sm);transition:transform .3s ease,box-shadow .3s ease}
.stat:hover{transform:translateY(-3px);box-shadow:var(--shadow-lg)}
.stat b{display:block;font-family:var(--font-serif);font-weight:800;font-size:32px;color:var(--accent);line-height:1}
.stat span{font-size:13.5px;color:var(--ink2);font-weight:600;margin-top:6px;display:block}

/* 스크롤 등장 */
.js .reveal{opacity:0;transform:translateY(22px);transition:opacity .6s ease,transform .6s cubic-bezier(.2,.7,.2,1)}
.js .reveal.in{opacity:1;transform:none}
@media (prefers-reduced-motion:reduce){.js .reveal{opacity:1;transform:none}}

/* 카드 3D 틸트 */
.tilt{transform-style:preserve-3d;will-change:transform}
.tilt-media{transform:translateZ(0)}
.card.tilt:hover{box-shadow:var(--shadow-hover)}

/* SVG 씬 자리표시자 + 실이미지 슬롯 */
.scene{position:absolute;inset:0;width:100%;height:100%}
.ph-img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;z-index:1}
.card-ph .card-emoji,.dhero .dhero-emoji{position:relative;z-index:2}
.card-ph .card-area,.card-ph .card-type,.dhero .card-type{z-index:3}

/* 맨 위로 */
.totop{position:fixed;right:22px;bottom:22px;z-index:55;width:46px;height:46px;border-radius:50%;border:none;
  background:var(--accent);color:#fff;font-size:20px;cursor:pointer;opacity:0;transform:translateY(14px) scale(.8);
  pointer-events:none;transition:all .3s cubic-bezier(.2,.7,.2,1);
  box-shadow:0 14px 34px color-mix(in srgb,var(--accent) 45%,transparent)}
.totop.show{opacity:1;transform:none;pointer-events:auto}
.totop:hover{transform:translateY(-3px) scale(1.06)}

/* 상세 히어로 살짝 패럴랙스 */
.detail .dhero{will-change:transform}

/* ===== 한글 가독성 (2026-09-19) — 일본어와 같은 Noto 계열로 통일 + 음절 보호 ===== */
html[lang="ko"] h1, html[lang="ko"] h2, html[lang="ko"] h3,
html[lang="ko"] .lead, html[lang="ko"] .dsummary, html[lang="ko"] .dblock p{
  word-break:keep-all;        /* 한글 단어 중간에서 줄 안 끊김 */
  letter-spacing:normal;      /* 음절 블록 찌그러짐 방지 */
}
html[lang="ko"] .hero h1{line-height:1.2}
html[lang="ko"] .dtitle{line-height:1.28}