/* ===================================================================
 * 스터디케이션PH — 밝은 정보 매거진 스타일
 * 청록(바다) + 코랄(선셋). 카에사(green/orange/navy)와 의도적으로 구분.
 * 읽기 우선: 넉넉한 여백, 큰 본문, 사진이 주인공.
 * =================================================================== */
:root{
  --ink:#16232e; --ink-2:#3d4d5c; --muted:#6b7a89; --line:#e5ebf0; --line-2:#f0f4f7;
  --bg:#ffffff; --soft:#f7fafc; --sand:#fff8f0;
  --sea:#0e7c86; --sea-dark:#0a5f68; --sea-soft:#e7f5f7;
  --coral:#ff6b52; --coral-soft:#fff0ec;
  --wrap:1140px; --narrow:720px;
  --r:14px; --r-sm:10px;
  --sh:0 1px 2px rgba(22,35,46,.05), 0 6px 20px rgba(22,35,46,.06);
  --sh-h:0 4px 10px rgba(22,35,46,.07), 0 18px 40px rgba(22,35,46,.10);
}
*{box-sizing:border-box}
html{-webkit-text-size-adjust:100%}
body{
  margin:0; background:var(--bg); color:var(--ink);
  font-family:Pretendard,-apple-system,BlinkMacSystemFont,"Apple SD Gothic Neo","Malgun Gothic",sans-serif;
  font-size:17px; line-height:1.75; letter-spacing:-.01em;
  -webkit-font-smoothing:antialiased;
}
img{max-width:100%; height:auto; display:block}
a{color:inherit; text-decoration:none}
h1,h2,h3,h4{line-height:1.35; letter-spacing:-.025em; margin:0}
.wrap{max-width:var(--wrap); margin:0 auto; padding:0 20px}
.narrow{max-width:var(--narrow); margin:0 auto; padding:0 20px}
.skip{position:absolute; left:-9999px}
.skip:focus{left:12px; top:12px; z-index:99; background:#fff; padding:10px 16px; border-radius:8px; box-shadow:var(--sh)}

/* ---------- header ---------- */
.site-header{
  position:sticky; top:0; z-index:50; background:rgba(255,255,255,.94);
  backdrop-filter:saturate(180%) blur(12px); border-bottom:1px solid var(--line);
}
.hd{display:flex; align-items:center; gap:18px; height:64px}
.brand{display:flex; align-items:baseline; gap:8px; font-weight:800; font-size:20px; letter-spacing:-.03em; white-space:nowrap}
.brand .b-ph{color:var(--coral)}
.brand .b-tag{font-size:12px; font-weight:500; color:var(--muted); letter-spacing:-.01em}
.hd-nav{display:flex; align-items:center; gap:2px; margin-left:auto; flex-wrap:wrap}
.hd-nav a{
  padding:8px 12px; border-radius:8px; font-size:14.5px; font-weight:600; color:var(--ink-2);
  transition:background .15s,color .15s; white-space:nowrap;
}
.hd-nav a:hover{background:var(--sea-soft); color:var(--sea-dark)}
.hd-nav a.on{color:var(--sea-dark); background:var(--sea-soft)}
.hamb{
  display:none; margin-left:auto; width:40px; height:40px; border:1px solid var(--line);
  background:#fff; border-radius:10px; cursor:pointer; padding:0; flex-direction:column;
  align-items:center; justify-content:center; gap:4px;
}
.hamb span{display:block; width:17px; height:2px; background:var(--ink); border-radius:2px}
.lang{position:relative; margin-left:6px}
.lang-btn{
  border:1px solid var(--line); background:#fff; border-radius:8px; padding:7px 11px;
  font:inherit; font-size:13.5px; font-weight:600; color:var(--ink-2); cursor:pointer;
}
.lang-menu{
  display:none; position:absolute; right:0; top:calc(100% + 6px); background:#fff;
  border:1px solid var(--line); border-radius:12px; box-shadow:var(--sh-h); padding:6px;
  min-width:150px; max-height:60vh; overflow:auto;
}
.lang-menu.open{display:block}
.lang-menu a{display:flex; justify-content:space-between; gap:10px; padding:8px 11px; border-radius:8px; font-size:14px}
.lang-menu a:hover{background:var(--soft)}
.lang-menu a.active{color:var(--sea-dark); font-weight:700; background:var(--sea-soft)}
.lang-menu .off{color:var(--muted); cursor:default; opacity:.55}
.lang-menu .off:hover{background:none}
.lang-abbr{color:var(--muted); font-size:12px}

/* ---------- hero ---------- */
.hero{background:linear-gradient(168deg,var(--sea-soft) 0%,#fff 62%); padding:64px 0 52px; border-bottom:1px solid var(--line-2)}
.hero .eyebrow{margin:0 0 14px; color:var(--sea-dark); font-weight:700; font-size:13.5px; letter-spacing:.04em; text-transform:uppercase}
.hero h1{font-size:clamp(30px,5.2vw,46px); font-weight:800; margin-bottom:18px; max-width:16em}
.hero .lead{margin:0 0 28px; font-size:17.5px; color:var(--ink-2); max-width:44em}
.btn{
  display:inline-flex; align-items:center; gap:7px; padding:12px 22px; border-radius:999px;
  font-weight:700; font-size:15px; transition:transform .12s,box-shadow .15s,background .15s;
}
.btn:hover{transform:translateY(-1px)}
.btn-primary{background:var(--sea); color:#fff; box-shadow:0 6px 16px rgba(14,124,134,.24)}
.btn-primary:hover{background:var(--sea-dark)}
.btn-ghost{background:#fff; color:var(--ink); border:1px solid var(--line); box-shadow:var(--sh)}
.hero-cta{display:flex; gap:10px; flex-wrap:wrap}

/* ---------- section heads ---------- */
.sec{padding:56px 0}
.sec-soft{background:var(--soft)}
.sec-head{margin-bottom:28px}
.sec-head h2{font-size:clamp(22px,3.2vw,28px); font-weight:800}
.sec-head p{margin:8px 0 0; color:var(--muted); font-size:16px}
.sec-head .kicker{display:block; color:var(--coral); font-weight:700; font-size:13px; letter-spacing:.05em; text-transform:uppercase; margin-bottom:8px}

/* ---------- category cards ---------- */
.cat-grid{display:grid; grid-template-columns:repeat(auto-fill,minmax(250px,1fr)); gap:14px}
.cat-card{
  display:block; padding:20px; background:#fff; border:1px solid var(--line);
  border-radius:var(--r); transition:transform .15s,box-shadow .15s,border-color .15s;
}
.cat-card:hover{transform:translateY(-2px); box-shadow:var(--sh-h); border-color:transparent}
.cat-card h3{font-size:17px; font-weight:700; margin-bottom:6px; display:flex; align-items:center; gap:9px}
.cat-card p{margin:0; color:var(--muted); font-size:14.5px; line-height:1.65}
.cat-card .n{margin-left:auto; font-size:12.5px; font-weight:600; color:var(--muted); background:var(--soft); padding:3px 9px; border-radius:999px}
.cat-dot{width:9px; height:9px; border-radius:50%; flex:none}

/* 카테고리별 은은한 색 구분 */
.c-study .cat-dot{background:#0e7c86} .c-study.pill{background:#e7f5f7; color:#0a5f68}
.c-destinations .cat-dot{background:#2563eb} .c-destinations.pill{background:#e8effd; color:#1d4ed8}
.c-food .cat-dot{background:#ff6b52} .c-food.pill{background:#fff0ec; color:#d94a33}
.c-prepare .cat-dot{background:#7c3aed} .c-prepare.pill{background:#f2ecfe; color:#6d28d9}
.c-life .cat-dot{background:#d97706} .c-life.pill{background:#fef3e2; color:#b45309}
.c-transport .cat-dot{background:#475569} .c-transport.pill{background:#eef1f5; color:#334155}
.c-safety .cat-dot{background:#059669} .c-safety.pill{background:#e6f7f1; color:#047857}
.pill{display:inline-block; padding:4px 11px; border-radius:999px; font-size:12.5px; font-weight:700; letter-spacing:-.01em}

/* ---------- post cards ---------- */
.post-grid{display:grid; grid-template-columns:repeat(auto-fill,minmax(300px,1fr)); gap:22px}
.post-card{
  display:flex; flex-direction:column; background:#fff; border:1px solid var(--line);
  border-radius:var(--r); overflow:hidden; transition:transform .15s,box-shadow .15s,border-color .15s;
}
.post-card:hover{transform:translateY(-3px); box-shadow:var(--sh-h); border-color:transparent}
.pc-cover{aspect-ratio:16/10; background:var(--soft); overflow:hidden}
.pc-cover img{width:100%; height:100%; object-fit:cover; transition:transform .35s}
.post-card:hover .pc-cover img{transform:scale(1.04)}
.pc-in{padding:16px 18px 18px; display:flex; flex-direction:column; gap:8px; flex:1}
.pc-in h3{font-size:17.5px; font-weight:700; line-height:1.42}
.pc-in p{margin:0; color:var(--muted); font-size:14.5px; line-height:1.6; flex:1}
.pc-meta{display:flex; align-items:center; gap:8px; font-size:12.5px; color:var(--muted)}
.pc-meta time{white-space:nowrap}

/* ---------- article ---------- */
.post{padding:40px 0 60px}
.post-back{display:inline-flex; align-items:center; gap:6px; color:var(--muted); font-size:14px; font-weight:600; margin-bottom:20px}
.post-back:hover{color:var(--sea-dark)}
.post-head{margin-bottom:26px}
.post-head h1{font-size:clamp(26px,4.4vw,38px); font-weight:800; margin:12px 0 14px}
.post-meta{display:flex; align-items:center; gap:10px; flex-wrap:wrap; color:var(--muted); font-size:14px}
.post-hero{margin:0 0 30px}
.post-hero img{width:100%; border-radius:var(--r)}
.post-hero figcaption,.post-body figcaption{
  margin-top:9px; font-size:13px; color:var(--muted); text-align:center; line-height:1.5;
}
.post-body{font-size:17.5px; line-height:1.85; color:var(--ink)}
.post-body h2{
  font-size:23px; font-weight:800; margin:44px 0 14px; padding-top:6px;
  border-top:2px solid var(--line-2);
}
.post-body h2:first-child{margin-top:0; border-top:none}
.post-body h3{font-size:19px; font-weight:700; margin:30px 0 10px}
.post-body p{margin:0 0 18px}
.post-body ul,.post-body ol{margin:0 0 20px; padding-left:1.15em}
.post-body li{margin-bottom:9px; padding-left:2px}
.post-body li::marker{color:var(--sea)}
.post-body strong{font-weight:700; color:var(--ink)}
.post-body a{color:var(--sea-dark); text-decoration:underline; text-underline-offset:3px; text-decoration-thickness:1px}
.post-body figure{margin:30px 0}
.post-body figure img{width:100%; border-radius:var(--r)}
.post-body blockquote{
  margin:26px 0; padding:14px 20px; background:var(--sand); border-left:3px solid var(--coral);
  border-radius:0 var(--r-sm) var(--r-sm) 0; color:var(--ink-2);
}
.post-tags{display:flex; gap:7px; flex-wrap:wrap; margin:34px 0 0}
.tag{background:var(--soft); color:var(--muted); font-size:12.5px; padding:5px 11px; border-radius:999px}
.post-note{
  margin-top:30px; padding:16px 18px; background:var(--soft); border-radius:var(--r-sm);
  font-size:13.5px; color:var(--muted); line-height:1.65;
}
.related{border-top:1px solid var(--line); margin-top:48px; padding-top:34px}
.related h2{font-size:20px; font-weight:800; margin-bottom:18px}

/* ---------- ad slots (승인 후 활성화) ---------- */
.ad-slot{margin:32px 0; min-height:1px; text-align:center}
.ad-slot:empty{display:none}

/* ---------- cookie bar ---------- */
.cookie-bar{
  position:fixed; left:14px; right:14px; bottom:14px; z-index:80; display:none;
  background:var(--ink); color:#fff; border-radius:var(--r); padding:14px 18px;
  box-shadow:0 10px 40px rgba(0,0,0,.25); align-items:center; gap:14px; flex-wrap:wrap;
  max-width:760px; margin:0 auto; font-size:14px;
}
.cookie-bar.show{display:flex}
.cookie-bar a{color:#8fe3ec; text-decoration:underline; white-space:nowrap}
.cookie-bar button{
  margin-left:auto; background:#fff; color:var(--ink); border:0; border-radius:999px;
  padding:9px 20px; font:inherit; font-weight:700; cursor:pointer; white-space:nowrap;
}

/* ---------- static pages ---------- */
.page{padding:44px 0 64px}
.page h1{font-size:clamp(26px,4vw,34px); font-weight:800; margin-bottom:10px}
.page .lead{color:var(--muted); font-size:16.5px; margin:0 0 32px}
.page h2{font-size:20px; font-weight:700; margin:34px 0 10px}
.page p{margin:0 0 16px; color:var(--ink-2)}
.page .box{background:var(--soft); border-radius:var(--r); padding:20px 22px; margin:22px 0}
.page .box a{color:var(--sea-dark); font-weight:700; text-decoration:underline; text-underline-offset:3px}

/* ---------- footer ---------- */
footer{background:var(--soft); border-top:1px solid var(--line); padding:46px 0 30px; margin-top:60px}
.foot-grid{display:grid; grid-template-columns:1.6fr 1fr 1fr; gap:34px}
.foot-brand p{margin:12px 0 0; color:var(--muted); font-size:14px; line-height:1.7; max-width:34em}
footer h4{font-size:13px; font-weight:700; color:var(--ink); margin-bottom:12px; letter-spacing:.02em}
.foot-list{list-style:none; margin:0; padding:0; display:flex; flex-direction:column; gap:9px}
.foot-list a{color:var(--muted); font-size:14px}
.foot-list a:hover{color:var(--sea-dark)}
.foot-bottom{border-top:1px solid var(--line); margin-top:34px; padding-top:20px; color:var(--muted); font-size:12.8px; line-height:1.7}
.foot-bottom .disc{margin:0 0 8px}

/* ---------- landing (root) ---------- */
.landing{min-height:100vh; display:flex; align-items:center; justify-content:center; text-align:center;
  background:linear-gradient(168deg,var(--sea-soft) 0%,#fff 60%); padding:40px 20px}
.landing h1{font-size:clamp(30px,6vw,46px); font-weight:800; margin-bottom:10px}
.landing .lead{color:var(--ink-2); font-size:17px; margin:0 0 32px}
.landing .choose{color:var(--muted); font-size:13.5px; font-weight:700; letter-spacing:.05em; text-transform:uppercase; margin-bottom:16px}
.lang-grid{display:flex; flex-wrap:wrap; gap:10px; justify-content:center; max-width:640px}
.lang-grid a{background:#fff; border:1px solid var(--line); border-radius:999px; padding:11px 22px;
  font-weight:700; font-size:15px; box-shadow:var(--sh); transition:transform .12s,box-shadow .15s}
.lang-grid a:hover{transform:translateY(-2px); box-shadow:var(--sh-h); color:var(--sea-dark)}
.lang-grid span{background:var(--soft); border:1px solid var(--line-2); border-radius:999px;
  padding:11px 22px; font-size:15px; color:var(--muted); opacity:.65}

/* ---------- responsive ---------- */
@media (max-width:860px){
  body{font-size:16.5px}
  .hamb{display:flex}
  .hd-nav{
    display:none; position:absolute; left:0; right:0; top:64px; background:#fff;
    border-bottom:1px solid var(--line); flex-direction:column; align-items:stretch;
    padding:8px 14px 14px; gap:2px; box-shadow:var(--sh);
  }
  .hd-nav.open{display:flex}
  .hd-nav a{padding:11px 12px}
  .lang{margin:6px 0 0}
  .lang-btn{width:100%; text-align:left}
  .lang-menu{right:auto; left:0; width:100%}
  .hero{padding:44px 0 38px}
  .sec{padding:42px 0}
  .foot-grid{grid-template-columns:1fr; gap:26px}
  .post-body{font-size:17px}
  .post-body h2{font-size:21px; margin-top:36px}
}
@media (max-width:520px){
  .brand .b-tag{display:none}
  .post-grid{grid-template-columns:1fr; gap:18px}
  .cat-grid{grid-template-columns:1fr}
}
@media print{ .site-header,footer,.cookie-bar,.ad-slot,.post-back{display:none} }