/*
Theme Name: 제도노트
Description: 제도노트 유튜브 채널의 상세 정리 블로그 테마
Version: 1.0
Text Domain: jedonote
*/
:root{
  --blue:#1741b8; --blue-d:#0e2a82; --navy:#0e1f4f; --yellow:#ffd84d; --sky:#a8c0ff; --mist:#eef2ff;
  --bg:#f7f9ff; --card:#fff; --line:#e1e7f7; --ink:#10173a; --sub:#5b6488;
  --r:20px; --shadow:0 1px 2px rgba(14,31,79,.05),0 8px 28px rgba(14,31,79,.07);
  --shadow-h:0 2px 4px rgba(14,31,79,.06),0 18px 44px rgba(23,65,184,.16);
}
*{box-sizing:border-box}
html{scroll-behavior:smooth}
body{margin:0;background:var(--bg);color:var(--ink);font-family:"Pretendard Variable",Pretendard,-apple-system,"Apple SD Gothic Neo",sans-serif;font-size:17px;line-height:1.7;letter-spacing:-.01em;-webkit-font-smoothing:antialiased;word-break:keep-all}
a{color:inherit;text-decoration:none}
img{max-width:100%;height:auto}
.wrap{width:min(1120px,100% - 40px);margin-inline:auto}
.admin-bar .site-header{top:32px}

/* header */
.site-header{position:sticky;top:0;z-index:50;background:rgba(247,249,255,.82);backdrop-filter:saturate(180%) blur(16px);border-bottom:1px solid var(--line)}
.site-header .wrap{display:flex;align-items:center;justify-content:space-between;height:68px}
.brand{display:flex;align-items:center;gap:10px;font-weight:900;font-size:22px;letter-spacing:-.04em;color:var(--navy)}
.brand .logo{width:38px;height:38px;border-radius:11px;box-shadow:0 2px 8px rgba(23,65,184,.25)}
.brand small{font-weight:700;font-size:12px;background:var(--yellow);color:var(--navy);padding:2px 8px;border-radius:8px;transform:rotate(-4deg)}
.nav{display:flex;align-items:center;gap:6px}
.nav a{padding:8px 14px;border-radius:999px;font-weight:600;font-size:15px;color:var(--sub);transition:.2s}
.nav a:hover,.nav a.on{background:var(--mist);color:var(--blue)}
.nav .yt{background:var(--blue);color:#fff!important;margin-left:6px}
.nav .yt:hover{background:var(--blue-d)}

/* hero */
.hero{position:relative;overflow:hidden;background:var(--blue);color:#fff;border-radius:0 0 40px 40px}
.hero::before{content:"";position:absolute;right:-120px;top:-140px;width:520px;height:520px;border-radius:50%;background:radial-gradient(circle,rgba(255,255,255,.07),transparent 68%)}
.hero .wrap{position:relative;display:grid;grid-template-columns:1.25fr .75fr;gap:40px;align-items:center;padding:72px 0 84px}
.hero .kicker{display:inline-flex;gap:8px;align-items:center;background:rgba(255,255,255,.14);padding:7px 14px;border-radius:999px;font-weight:700;font-size:14px}
.hero h1{font-size:clamp(34px,5.2vw,62px);line-height:1.18;letter-spacing:-.05em;font-weight:900;margin:20px 0 18px}
.hero h1 mark{background:linear-gradient(transparent 58%,var(--yellow) 58% 94%,transparent 94%);color:#fff;padding:0 4px}
.hero p{font-size:19px;color:#d6e0ff;max-width:520px;margin:0 0 30px}
.btns{display:flex;gap:12px;flex-wrap:wrap}
.btn{display:inline-flex;align-items:center;gap:8px;padding:14px 24px;border-radius:999px;font-weight:800;font-size:16px;transition:.2s}
.btn.y{background:var(--yellow);color:var(--navy)}
.btn.y:hover{transform:translateY(-2px);box-shadow:0 10px 24px rgba(0,0,0,.2)}
.btn.g{background:rgba(255,255,255,.14);color:#fff}
.btn.g:hover{background:rgba(255,255,255,.24)}
.pad{position:relative;justify-self:center;width:min(300px,100%);aspect-ratio:.86;background:#fff;border-radius:28px;color:var(--navy);padding:30px 28px;transform:rotate(4deg);box-shadow:14px 14px 0 var(--navy),-30px 26px 0 -2px var(--sky)}
.pad::before{content:"";position:absolute;top:-16px;left:34px;right:34px;height:30px;background:repeating-linear-gradient(90deg,var(--navy) 0 12px,transparent 12px 52px);border-radius:8px;-webkit-mask:linear-gradient(#000,#000)}
.pad b{display:block;font-size:44px;line-height:1.1;font-weight:900;letter-spacing:-.06em}
.pad b span{background:linear-gradient(transparent 60%,var(--yellow) 60%)}
.pad ul{list-style:none;margin:26px 0 0;padding:0;display:grid;gap:12px}
.pad li{display:flex;align-items:center;gap:10px;font-size:15px;font-weight:700;color:var(--sub)}
.pad li i{width:22px;height:22px;border-radius:7px;border:2px solid var(--sky);flex:none}
.pad li.d i{background:var(--blue);border-color:var(--blue);position:relative}
.pad li.d i::after{content:"";position:absolute;left:6px;top:2px;width:5px;height:10px;border:solid #fff;border-width:0 2px 2px 0;transform:rotate(45deg)}
.pad li.d{color:var(--navy)}
.pad .tag{position:absolute;right:-22px;top:-30px;background:var(--yellow);color:var(--navy);font-weight:900;font-size:22px;padding:12px 16px;border-radius:16px;transform:rotate(8deg);box-shadow:5px 5px 0 var(--navy)}

/* sections */
.sec{padding:64px 0 8px}
.sec-h{display:flex;align-items:end;justify-content:space-between;gap:16px;margin-bottom:26px;flex-wrap:wrap}
.sec-h h2{margin:0;font-size:30px;font-weight:900;letter-spacing:-.04em}
.sec-h h2 em{font-style:normal;color:var(--blue)}
.chips{display:flex;gap:8px;flex-wrap:wrap}
.chip{padding:8px 16px;border-radius:999px;background:#fff;border:1px solid var(--line);font-weight:700;font-size:14px;color:var(--sub);transition:.2s}
.chip:hover,.chip.on{background:var(--navy);border-color:var(--navy);color:#fff}

/* featured */
.feat{display:grid;grid-template-columns:1.1fr 1fr;background:var(--card);border-radius:28px;overflow:hidden;box-shadow:var(--shadow);transition:.25s;border:1px solid var(--line)}
.feat:hover{box-shadow:var(--shadow-h);transform:translateY(-3px)}
.feat .body{padding:40px;display:flex;flex-direction:column;justify-content:center;gap:14px}
.feat h3{margin:0;font-size:clamp(26px,3vw,36px);line-height:1.28;letter-spacing:-.045em;font-weight:900}
.feat p{margin:0;color:var(--sub)}

/* cards */
.grid{display:grid;grid-template-columns:repeat(3,1fr);gap:24px}
.card{display:flex;flex-direction:column;background:var(--card);border:1px solid var(--line);border-radius:var(--r);overflow:hidden;box-shadow:var(--shadow);transition:.25s}
.card:hover{transform:translateY(-5px);box-shadow:var(--shadow-h)}
.card .body{padding:22px 24px 26px;display:flex;flex-direction:column;gap:10px;flex:1}
.card h3{margin:0;font-size:21px;line-height:1.38;letter-spacing:-.04em;font-weight:800}
.card p{margin:0;color:var(--sub);font-size:15px;line-height:1.6;display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical;overflow:hidden}
.meta{display:flex;align-items:center;gap:10px;font-size:13px;color:var(--sub);font-weight:600;margin-top:auto;padding-top:6px}
.cat{display:inline-block;align-self:flex-start;font-size:13px;font-weight:800;color:var(--blue);background:var(--mist);padding:4px 11px;border-radius:8px}
.yt-b{margin-left:auto;display:inline-flex;align-items:center;gap:5px;color:#e5221b;font-weight:800}
.yt-b::before{content:"";width:0;height:0;border-left:8px solid #e5221b;border-top:5px solid transparent;border-bottom:5px solid transparent}

/* thumb */
.thumb{position:relative;aspect-ratio:16/9;overflow:hidden;background:var(--blue);display:block}
.thumb img{width:100%;height:100%;object-fit:cover;display:block;transition:.5s}
.card:hover .thumb img,.feat:hover .thumb img{transform:scale(1.05)}
.thumb.ph{display:flex;align-items:flex-end;padding:22px;color:#fff}
.thumb.ph::before{content:"";position:absolute;right:-40px;top:-50px;width:200px;height:200px;border-radius:50%;background:rgba(255,255,255,.12)}
.thumb.ph::after{content:"✦";position:absolute;right:22px;bottom:16px;color:var(--yellow);font-size:30px}
.thumb.ph b{position:relative;font-size:23px;line-height:1.28;font-weight:900;letter-spacing:-.045em;max-width:82%}
.thumb.c1{background:linear-gradient(135deg,#1741b8,#2f5be0)}
.thumb.c2{background:linear-gradient(135deg,#0e1f4f,#1741b8)}
.thumb.c3{background:linear-gradient(135deg,#2b4fd0,#6f94ff)}
.thumb.c4{background:linear-gradient(135deg,#143a9c,#0e1f4f)}
.feat .thumb{aspect-ratio:auto;min-height:340px}

/* article */
.art-h{background:var(--blue);color:#fff;border-radius:0 0 40px 40px;padding:56px 0 64px}
.art-h .wrap{width:min(820px,100% - 40px)}
.art-h .cat{background:var(--yellow);color:var(--navy)}
.art-h h1{font-size:clamp(30px,4.4vw,48px);line-height:1.28;letter-spacing:-.05em;font-weight:900;margin:18px 0 18px}
.art-h .meta{color:#c9d6ff;padding:0}
.art{width:min(820px,100% - 40px);margin:-34px auto 0;position:relative;background:var(--card);border:1px solid var(--line);border-radius:28px;box-shadow:var(--shadow);padding:48px clamp(22px,5vw,64px)}
.video{position:relative;aspect-ratio:16/9;border-radius:18px;overflow:hidden;margin:0 0 36px;background:#000}
.video iframe{position:absolute;inset:0;width:100%;height:100%;border:0}
.content>*:first-child{margin-top:0}
.content h2{font-size:28px;line-height:1.35;letter-spacing:-.045em;font-weight:900;margin:2.2em 0 .7em;padding-left:16px;border-left:6px solid var(--yellow)}
.content h3{font-size:22px;font-weight:800;letter-spacing:-.04em;margin:1.8em 0 .5em;color:var(--blue-d)}
.content p{margin:1em 0}
.content a{color:var(--blue);font-weight:700;border-bottom:2px solid var(--sky)}
.content strong{font-weight:800;background:linear-gradient(transparent 62%,rgba(255,216,77,.7) 62%)}
.content ul,.content ol{padding-left:1.3em}.content li{margin:.45em 0}.content li::marker{color:var(--blue);font-weight:800}
.content blockquote{margin:1.6em 0;padding:20px 24px;background:var(--mist);border-radius:16px;border-left:6px solid var(--blue);color:var(--navy)}
.content blockquote p{margin:.3em 0}
.content img{border-radius:16px}
.content table{width:100%;border-collapse:separate;border-spacing:0;margin:1.6em 0;font-size:16px;border:1px solid var(--line);border-radius:14px;overflow:hidden}
.content th{background:var(--navy);color:#fff;text-align:left;padding:12px 16px;font-weight:700}
.content td{padding:12px 16px;border-top:1px solid var(--line)}
.content tr:nth-child(even) td{background:#fafbff}
.content hr{border:0;height:2px;background:var(--line);margin:2.4em 0}
/* 글 안에서 쓰는 박스: <div class="jn-summary"> 등 */
.jn-summary{background:var(--navy);color:#fff;border-radius:20px;padding:26px 30px;margin:1.6em 0}
.jn-summary h4{margin:0 0 12px;font-size:18px;color:var(--yellow);font-weight:900}
.jn-summary ul{margin:0;padding-left:1.2em}.jn-summary li::marker{color:var(--yellow)}
.jn-callout{background:#fff8d9;border:1px solid #f3dd7a;border-radius:16px;padding:18px 22px;margin:1.6em 0}
.jn-callout::before{content:"꼭 확인하세요";display:block;font-weight:900;font-size:14px;color:#8a6a00;margin-bottom:4px}
.jn-steps{counter-reset:s;list-style:none;padding:0!important}
.jn-steps li{counter-increment:s;position:relative;background:var(--mist);border-radius:16px;padding:16px 20px 16px 64px;margin:10px 0}
.jn-steps li::before{content:counter(s);position:absolute;left:18px;top:50%;transform:translateY(-50%);width:32px;height:32px;border-radius:10px;background:var(--blue);color:#fff;font-weight:900;display:grid;place-items:center}
.yt-cta{display:flex;align-items:center;justify-content:space-between;gap:16px;flex-wrap:wrap;margin-top:44px;padding:24px 28px;border-radius:20px;background:var(--mist)}
.yt-cta b{font-size:19px;letter-spacing:-.03em}
.yt-cta .btn{background:#e5221b;color:#fff}

/* footer */
.site-footer{margin-top:96px;background:var(--navy);color:#b8c4ee;padding:48px 0 40px;border-radius:40px 40px 0 0}
.site-footer .wrap{display:flex;justify-content:space-between;gap:24px;flex-wrap:wrap;align-items:center}
.site-footer .brand{color:#fff}
.site-footer small{font-size:14px}
.pager{display:flex;gap:8px;justify-content:center;margin-top:44px}
.pager a,.pager span{min-width:42px;height:42px;display:grid;place-items:center;border-radius:12px;background:#fff;border:1px solid var(--line);font-weight:800;padding:0 12px}
.pager .current{background:var(--blue);color:#fff;border-color:var(--blue)}
.empty{text-align:center;padding:80px 0;color:var(--sub)}
.page-t{padding:56px 0 8px}.page-t h1{font-size:40px;letter-spacing:-.05em;font-weight:900;margin:0}

@media(max-width:900px){
  .hero .wrap{grid-template-columns:1fr;padding:48px 0 60px}.pad{display:none}
  .feat{grid-template-columns:1fr}.feat .thumb{min-height:220px}.feat .body{padding:26px}
  .grid{grid-template-columns:repeat(2,1fr)}
}
@media(max-width:600px){
  body{font-size:16px}.grid{grid-template-columns:1fr}.nav a:not(.yt){display:none}
  .art{padding:28px 20px;margin-top:-24px}.sec{padding-top:44px}
}

/* mobile: 표·긴 글이 카드 밖으로 나가지 않게 */
html,body{overflow-x:hidden}
.art,.content{min-width:0;overflow-wrap:break-word}
.content table{table-layout:fixed}
.content th,.content td{overflow-wrap:anywhere;word-break:keep-all}
@media(max-width:600px){
  .content table{font-size:13.5px;line-height:1.5}
  .content th,.content td{padding:10px 9px}
  .content th:first-child,.content td:first-child{width:23%}.content td:first-child{font-weight:700;color:var(--blue-d)}
  .content h2{font-size:23px}.content h3{font-size:19px}
  .jn-summary{padding:22px 20px}.jn-steps li{padding:14px 14px 14px 56px}
}

/* 홈 탭: 주소 변경 없이 전환 + 부드러운 효과 */
#tabs{position:relative;display:flex;gap:6px;flex-wrap:wrap}
#tabs .pill{position:absolute;left:0;top:0;height:100%;width:0;background:var(--navy);border-radius:999px;transition:transform .45s cubic-bezier(.3,.9,.3,1),width .45s cubic-bezier(.3,.9,.3,1);pointer-events:none}
#tabs .chip{position:relative;z-index:1;background:transparent;border:1px solid var(--line);cursor:pointer;font:inherit;font-weight:700;font-size:14px;transition:color .3s,border-color .3s}
#tabs .chip:hover{background:transparent;color:var(--blue);border-color:var(--sky)}
#tabs .chip.on,#tabs .chip.on:hover{background:transparent;color:#fff;border-color:transparent}
.grid .card{transition:opacity .18s ease,transform .18s ease,box-shadow .25s}
.grid .card.out{opacity:0;transform:translateY(10px) scale(.97)}
.grid .card.in{animation:cardIn .55s cubic-bezier(.2,.8,.2,1) both;animation-delay:calc(var(--i,0)*70ms)}
@keyframes cardIn{from{opacity:0;transform:translateY(18px) scale(.97)}to{opacity:1;transform:none}}
.grid .card[hidden]{display:none}
.empty-tab{text-align:center;color:var(--sub);padding:48px 0;animation:cardIn .5s both}
.nav a{position:relative}
@media (prefers-reduced-motion:reduce){.grid .card.in,.empty-tab{animation:none}#tabs .pill{transition:none}}
#tabs{scroll-margin-top:110px}

/* 카드: 제목 링크가 카드 전체를 덮고, 영상 버튼은 따로 눌림 */
.card,.feat{position:relative}
.stretch{color:inherit}
.stretch::after{content:"";position:absolute;inset:0;z-index:1}
.meta{flex-wrap:wrap}
.yt-b{position:relative;z-index:2;margin-left:auto;display:inline-flex;align-items:center;gap:6px;padding:7px 13px;border-radius:999px;background:#fff0ef;color:#d4151b;font-weight:800;font-size:13px;transition:background .2s,color .2s,transform .2s,box-shadow .2s}
.yt-b::before{display:none}
.yt-b:hover{background:#e5221b;color:#fff;transform:translateY(-1px);box-shadow:0 6px 16px rgba(229,34,27,.3)}
.feat .thumb,.card .thumb{display:block}
.yt-cta>div{display:flex;flex-direction:column;gap:2px}.yt-cta>div span{font-size:14px;color:var(--sub);font-weight:500}