/*
Theme Name: Starskin Busan
Description: 부산 서면 스타피부과 - 부산울쎄라 타겟 SEO 랜딩 테마 (블로그카드 홈 + 파워포스트형 글 상세)
Author: 브로
Version: 1.0
Text Domain: starskin
*/

:root{
  --ink:#141d2b;
  --navy:#1b2a3a;
  --navy-2:#26374a;
  --porcelain:#f2f1ec;
  --porcelain-2:#e9e7df;
  --rose:#b85c63;
  --rose-dim:#e6c6c4;
  --sage:#8fa396;
  --silver:#c9cfd6;
  --line: rgba(20,29,43,0.12);
  --serif:'Noto Serif KR', serif;
  --sans:'Pretendard', -apple-system, sans-serif;
  --mono:'IBM Plex Mono', monospace;
}
*{box-sizing:border-box;}
html{scroll-behavior:smooth;}
body{
  margin:0; background:var(--porcelain); color:var(--ink);
  font-family:var(--sans); line-height:1.7; -webkit-font-smoothing:antialiased;
}
a{color:inherit; text-decoration:none;}
img{max-width:100%; display:block;}

/* ---------- NAV ---------- */
.nav{
  position:sticky; top:0; z-index:50;
  display:flex; align-items:center; justify-content:space-between;
  padding:20px 6vw; background:rgba(242,241,236,0.9); backdrop-filter:blur(10px);
  border-bottom:1px solid var(--line);
}
.brand{display:flex; align-items:center; gap:10px; font-family:var(--serif); font-weight:600; font-size:18px; letter-spacing:-0.01em; color:var(--navy);}
.brand .mark{
  width:26px; height:26px; display:grid; place-items:center;
}
.brand .mark svg{display:block;}
.navlinks{display:flex; gap:30px; font-size:13.5px; color:#5b6673;}
.navlinks a{padding:4px 0; border-bottom:1px solid transparent; transition:border-color .2s, color .2s; font-weight:400;}
.navlinks a:hover{border-color:var(--rose); color:var(--navy);}
.nav-cta{
  font-family:var(--sans); font-size:13px; font-weight:500; letter-spacing:.01em;
  background:transparent; color:var(--navy); padding:9px 20px; border-radius:2px;
  border:1px solid var(--navy); transition:background .2s, color .2s;
}
.nav-cta:hover{background:var(--navy); color:var(--porcelain);}
@media (max-width:820px){ .navlinks{display:none;} }

/* ---------- HERO ---------- */
.hero{position:relative; overflow:hidden; background:var(--navy); color:var(--porcelain); padding:min(14vh,120px) 6vw 80px;}
.hero::before{
  content:''; position:absolute; inset:0;
  background-image:
    radial-gradient(circle at 82% 18%, rgba(184,92,99,0.35), transparent 40%),
    repeating-linear-gradient(0deg, rgba(255,255,255,0.035) 0px, rgba(255,255,255,0.035) 1px, transparent 1px, transparent 28px),
    repeating-linear-gradient(90deg, rgba(255,255,255,0.035) 0px, rgba(255,255,255,0.035) 1px, transparent 1px, transparent 28px);
  pointer-events:none;
}
.scanline{
  position:absolute; left:0; right:0; height:2px;
  background:linear-gradient(90deg, transparent, var(--rose), transparent);
  box-shadow:0 0 20px 2px var(--rose); animation:sweep 3.2s ease-in-out 1; opacity:.9;
}
@keyframes sweep{ 0%{top:6%; opacity:0;} 8%{opacity:1;} 92%{opacity:1;} 100%{top:96%; opacity:0;} }
.hero-grid{position:relative; display:grid; grid-template-columns:1.3fr 0.9fr; gap:60px; align-items:end;}
@media (max-width:900px){ .hero-grid{grid-template-columns:1fr;} }
.eyebrow-readout{font-family:var(--mono); font-size:12px; letter-spacing:.08em; color:var(--rose-dim); display:flex; gap:14px; align-items:center; margin-bottom:22px; flex-wrap:wrap;}
.eyebrow-readout span{padding:3px 9px; border:1px solid rgba(255,255,255,.18); border-radius:2px;}
.hero h1{font-family:var(--serif); font-weight:900; font-size:clamp(34px,5.4vw,60px); line-height:1.18; margin:0 0 20px; letter-spacing:-0.01em;}
.hero h1 em{font-style:normal; color:var(--rose-dim); border-bottom:2px solid var(--rose);}
.hero p.lead{font-size:16.5px; color:#cdd3da; max-width:52ch; margin:0 0 34px;}
.hero-ctas{display:flex; gap:12px; flex-wrap:wrap;}
.btn-primary{background:var(--rose); color:#fff; padding:14px 26px; border-radius:2px; font-size:14.5px; font-weight:600; transition:transform .15s, background .2s; display:inline-block;}
.btn-primary:hover{background:#a34e55; transform:translateY(-1px);}
.btn-ghost{border:1px solid rgba(255,255,255,.3); color:var(--porcelain); padding:14px 26px; border-radius:2px; font-size:14.5px; transition:border-color .2s, background .2s; display:inline-block;}
.btn-ghost:hover{border-color:var(--rose-dim); background:rgba(255,255,255,.04);}
.panel{border:1px solid rgba(255,255,255,.16); border-radius:4px; padding:26px; background:rgba(255,255,255,.03); font-family:var(--mono);}
.panel-title{font-size:11px; letter-spacing:.12em; color:var(--rose-dim); margin-bottom:18px; text-transform:uppercase;}
.readout-row{display:flex; justify-content:space-between; align-items:baseline; padding:11px 0; border-bottom:1px dashed rgba(255,255,255,.14); font-size:13px; color:#c7cdd5;}
.readout-row:last-child{border-bottom:none;}
.readout-row b{font-size:20px; color:var(--porcelain); font-weight:500;}
.readout-row .tick{color:var(--sage);}

/* ---------- MAGAZINE MASTHEAD ---------- */
.masthead{background:var(--porcelain); padding:88px 6vw 0; text-align:center; border-bottom:1px solid var(--line);}
.masthead-eyebrow{font-family:var(--mono); font-size:11px; letter-spacing:.18em; color:var(--rose); text-transform:uppercase; margin-bottom:22px;}
.masthead-rule{width:36px; height:1px; background:var(--line); margin:0 auto 22px;}
.masthead h1.mag-title{font-family:var(--serif); font-weight:600; font-size:clamp(28px,4vw,44px); margin:0 auto 20px; letter-spacing:-0.015em; line-height:1.35; max-width:16ch; color:var(--navy);}
.masthead p.mag-sub{font-size:15px; color:#6b7480; max-width:50ch; margin:0 auto 36px; line-height:1.75; font-weight:400;}
.masthead-meta{display:flex; justify-content:center; gap:26px; flex-wrap:wrap; font-family:var(--mono); font-size:11px; letter-spacing:.04em; color:#9aa3af; padding-bottom:32px;}
.masthead-meta span{padding-bottom:2px; color:#c9cfd6;}
.masthead-meta a{color:#6b7480; padding-bottom:3px; border-bottom:1px solid transparent; transition:color .2s, border-color .2s; font-weight:500;}
.masthead-meta a:hover{color:var(--rose); border-color:var(--rose);}

/* ---------- FEATURED POST ---------- */
.featured-post{max-width:1100px; margin:0 auto; padding:72px 6vw 0;}
.featured-grid{display:grid; grid-template-columns:1fr 1fr; gap:60px; align-items:center; border-bottom:1px solid var(--line); padding-bottom:72px;}
@media (max-width:860px){ .featured-grid{grid-template-columns:1fr; gap:28px;} }
.featured-media{aspect-ratio:5/4; overflow:hidden; border-radius:2px; background:var(--porcelain-2);}
.featured-media img{width:100%; height:100%; object-fit:cover;}
.featured-text .kicker{margin-bottom:18px;}
.featured-text h2{font-family:var(--serif); font-size:clamp(21px,2.6vw,27px); font-weight:600; line-height:1.45; margin:0 0 14px; color:var(--navy);}
.featured-text p{font-size:14.5px; color:#6b7480; max-width:48ch; margin:0 0 24px; line-height:1.75;}
.featured-text .mag-meta{font-family:var(--mono); font-size:11px; letter-spacing:.03em; color:#9aa3af; margin-bottom:16px;}
.mag-readmore{display:inline-flex; align-items:center; gap:8px; font-size:13.5px; font-weight:500; color:var(--navy); border-bottom:1px solid var(--line); padding-bottom:3px; transition:border-color .2s, color .2s;}
.mag-readmore:hover{color:var(--rose); border-color:var(--rose);}

/* ---------- MAGAZINE GRID ---------- */
.mag-grid{display:grid; grid-template-columns:repeat(3,1fr); gap:48px 32px;}
@media (max-width:900px){ .mag-grid{grid-template-columns:repeat(2,1fr);} }
@media (max-width:620px){ .mag-grid{grid-template-columns:1fr;} }
.mag-card{display:block;}
.mag-media{aspect-ratio:5/4; overflow:hidden; border-radius:2px; margin-bottom:18px; background:var(--porcelain-2);}
.mag-media img{width:100%; height:100%; object-fit:cover; transition:transform .5s ease;}
.mag-card:hover .mag-media img{transform:scale(1.03);}
.thumb-placeholder{width:100%; height:100%; background:linear-gradient(155deg, var(--navy) 0%, #3a4b5e 100%); position:relative;}
.thumb-placeholder::after{content:''; position:absolute; left:50%; top:50%; transform:translate(-50%,-50%); width:22px; height:22px; background:var(--rose); opacity:.85; clip-path:polygon(50% 0%, 61% 39%, 100% 50%, 61% 61%, 50% 100%, 39% 61%, 0% 50%, 39% 39%);}
.mag-card .mag-cat{font-family:var(--mono); font-size:10px; letter-spacing:.1em; color:var(--rose); text-transform:uppercase; margin-bottom:10px; display:block;}
.mag-card h3{font-family:var(--serif); font-size:16.5px; line-height:1.5; font-weight:600; margin:0 0 8px; color:var(--navy);}
.mag-card p{font-size:13px; color:#6b7480; margin:0 0 12px; line-height:1.65;}
.mag-card .mag-date{font-family:var(--mono); font-size:10.5px; letter-spacing:.03em; color:#b0b6bd;}

/* ---------- SECTIONS ---------- */
.section{padding:100px 6vw; max-width:1100px; margin:0 auto;}
.kicker{font-family:var(--mono); font-size:11px; letter-spacing:.14em; color:var(--rose); display:flex; align-items:center; gap:10px; margin-bottom:16px; text-transform:uppercase;}
.kicker::before{content:''; width:20px; height:1px; background:var(--rose);}
h2.section-title{font-family:var(--serif); font-weight:600; font-size:clamp(22px,2.6vw,29px); margin:0 0 14px; letter-spacing:-0.01em; color:var(--navy);}
.section-sub{color:#6b7480; font-size:14.5px; max-width:58ch; margin-bottom:56px; line-height:1.75;}

/* ---------- BLOG CARD GRID (WP 글 목록 자동 출력) ---------- */
.card-grid{display:grid; grid-template-columns:repeat(3,1fr); gap:2px; background:var(--line);}
@media (max-width:900px){ .card-grid{grid-template-columns:1fr;} }
.card{background:var(--porcelain); padding:30px 26px 34px; position:relative; transition:background .25s;}
.card:hover{background:#fff;}
.card .tagno{font-family:var(--mono); font-size:11px; color:var(--sage); margin-bottom:16px; display:block;}
.card h3{font-family:var(--serif); font-size:18.5px; line-height:1.4; margin:0 0 12px; font-weight:700;}
.card p{font-size:13.5px; color:#5b6673; margin:0 0 18px;}
.card .hashtags{font-family:var(--mono); font-size:11px; color:var(--rose); letter-spacing:.02em;}
.card .arrow{position:absolute; right:24px; bottom:26px; width:26px; height:26px; border-radius:50%; border:1px solid var(--line); display:grid; place-items:center; font-size:13px; color:var(--navy); transition:all .2s;}
.card:hover .arrow{background:var(--rose); border-color:var(--rose); color:#fff; transform:translate(2px,-2px);}
.pagination{display:flex; gap:10px; margin-top:40px; font-family:var(--mono); font-size:13px;}
.pagination a, .pagination span{padding:8px 14px; border:1px solid var(--line); border-radius:2px;}
.pagination .current{background:var(--navy); color:#fff; border-color:var(--navy);}

/* ---------- SINGLE POST (파워포스트형 목차) ---------- */
.pillar{background:var(--porcelain-2); border-top:1px solid var(--line); border-bottom:1px solid var(--line);}
.pillar-inner{max-width:1180px; margin:0 auto; padding:90px 6vw; display:grid; grid-template-columns:230px 1fr; gap:64px;}
@media (max-width:880px){ .pillar-inner{grid-template-columns:1fr;} }
.toc{position:sticky; top:90px; align-self:start; font-size:13.5px;}
.toc-title{font-family:var(--mono); font-size:11px; letter-spacing:.1em; color:var(--rose); text-transform:uppercase; margin-bottom:16px;}
.toc ol{list-style:none; margin:0; padding:0; counter-reset:toc;}
.toc li{counter-increment:toc; padding:9px 0; border-bottom:1px solid var(--line); color:#48505c;}
.toc li a{display:flex; gap:10px;}
.toc li a::before{content:counter(toc,decimal-leading-zero); font-family:var(--mono); color:var(--sage); font-size:11.5px; padding-top:2px;}
.toc li a:hover{color:var(--rose);}
.pillar-article h1.post-title{font-family:var(--serif); font-size:clamp(24px,2.8vw,32px); margin:0 0 20px; font-weight:600; line-height:1.4; color:var(--navy);}
.pillar-article h2{font-family:var(--serif); font-size:21px; margin:44px 0 16px; font-weight:600; color:var(--navy);}
.pillar-article h2:first-of-type{margin-top:0;}
.pillar-article p{font-size:14.5px; color:#4a5361; margin:0 0 16px; max-width:70ch; line-height:1.8;}
.pillar-article ul{max-width:70ch;}
.pillar-lead{font-size:14px; color:#6b7480; background:#fff; border-left:2px solid var(--rose); padding:18px 22px; margin-bottom:40px; max-width:70ch; line-height:1.75;}
.post-meta{font-family:var(--mono); font-size:11px; letter-spacing:.03em; color:#9aa3af; margin-bottom:20px; display:flex; gap:14px;}

/* ---------- PAGE (일반 페이지) ---------- */
.page-content{max-width:800px; margin:0 auto; padding:90px 6vw;}
.page-content h1{font-family:var(--serif); font-size:clamp(28px,3.6vw,40px); margin:0 0 24px;}
.page-content p{font-size:15.5px; color:#374050; margin:0 0 16px;}

/* ---------- FOOTER ---------- */
footer.site-footer{background:var(--navy); color:#9aa3af; padding:56px 6vw 30px; font-size:13px;}
.footer-grid{max-width:1180px; margin:0 auto; display:flex; justify-content:space-between; flex-wrap:wrap; gap:30px; border-bottom:1px solid rgba(255,255,255,.1); padding-bottom:34px;}
.footer-brand{font-family:var(--serif); font-size:18px; color:var(--porcelain); font-weight:700;}
.footer-cols{display:flex; gap:60px; flex-wrap:wrap;}
.footer-cols div h4{font-size:11px; letter-spacing:.08em; color:var(--rose-dim); text-transform:uppercase; margin:0 0 12px; font-family:var(--mono); font-weight:500;}
.footer-cols div p, .footer-cols div a{display:block; margin-bottom:8px; color:#9aa3af;}
.footer-bottom{max-width:1180px; margin:20px auto 0; display:flex; justify-content:space-between; flex-wrap:wrap; gap:10px; font-family:var(--mono); font-size:11px; color:#6b7480;}
.sticky-cta{position:fixed; right:26px; bottom:26px; z-index:60; background:var(--navy); color:var(--porcelain); padding:13px 22px; border-radius:2px; font-size:12.5px; font-weight:500; letter-spacing:.04em; box-shadow:0 6px 20px rgba(20,29,43,0.18); display:flex; align-items:center; gap:8px; transition:background .2s;}
.sticky-cta:hover{background:var(--rose);}