/* 2차 공통: 큰 히어로·강한 타이포·등장 효과·신뢰 푸터 / 시안 B */
.slide.on{display:flex;align-items:center;min-height:min(88vh,760px)}
.slide .wrap{width:100%}
.slide h1,.slide h2.big{font-size:clamp(2.2rem,7.4vw,4.4rem);line-height:1.12}
.slide p{font-size:1.2rem}
.rv{opacity:0;transform:translateY(24px);transition:opacity .7s ease,transform .7s ease}
.rv.in{opacity:1;transform:none}
@media(prefers-reduced-motion:reduce){.rv{opacity:1;transform:none;transition:none}}
.foot-tools{display:flex;gap:12px;flex-wrap:wrap;align-items:center;margin-top:18px}
.foot-tools select{min-height:42px;padding:0 12px;border:1px solid var(--line);border-radius:10px;background:var(--surface);color:var(--fg);font:inherit}
.policy{display:flex;gap:16px;flex-wrap:wrap;margin-top:14px}
.policy a{display:inline!important}
.totop{position:fixed;right:16px;bottom:16px;width:46px;height:46px;border-radius:50%;border:1px solid var(--line);background:var(--surface);color:var(--fg);box-shadow:var(--shadow);cursor:pointer;font-size:1.1rem;display:none;z-index:15}
.totop.show{display:block}
.draft-switch{position:fixed;left:12px;bottom:12px;z-index:16;background:#111;color:#fff;border-radius:999px;padding:6px 8px;font-size:.8rem;display:flex;gap:4px;box-shadow:0 2px 10px rgba(0,0,0,.3)}
.draft-switch a{color:#fff;text-decoration:none;padding:5px 12px;border-radius:999px}
.draft-switch a[aria-current=page]{background:#fff;color:#111;font-weight:700}

/* 시안 B */
.bhero{position:relative;min-height:max(540px,calc(100svh - 100px));display:flex;align-items:center;color:#fff;background:var(--sg,linear-gradient(135deg,#0c1b3d,#1f4fa3));overflow:hidden}
.bhero::after{content:"";position:absolute;right:-10%;bottom:-30%;width:70vmin;height:70vmin;border-radius:50%;background:rgba(255,255,255,.07)}
.bhero .wrap{position:relative;z-index:1;width:100%}
.bhero .kicker{display:inline-block;font-weight:700;letter-spacing:.12em;font-size:.82rem;margin-bottom:18px;opacity:.85}
.bhero h1,.bhero h2{font-size:clamp(2.4rem,9vw,5.6rem);line-height:1.08;letter-spacing:-.04em;font-weight:800;margin:0 0 20px;max-width:900px}
.bhero p{font-size:1.2rem;max-width:560px;margin:0 0 32px;opacity:.92}
.bslide{display:none;width:100%}.bslide.on{display:block;animation:fade .6s}
.bhero .bctl{position:absolute;z-index:2;left:0;right:0;bottom:28px;display:flex;align-items:center;gap:14px}
.bcount{font-variant-numeric:tabular-nums;font-weight:700;letter-spacing:.08em}
.iconlinks{background:var(--surface);border-bottom:1px solid var(--line)}
.iconlinks .wrap{display:grid;grid-template-columns:repeat(3,1fr)}
.il{display:flex;flex-direction:column;align-items:center;gap:8px;padding:22px 8px;text-decoration:none;font-weight:700;font-size:.95rem;border-left:1px solid var(--line)}
.il:first-child{border-left:0}.il:hover{background:var(--surface2)}
.il .qi{width:46px;height:46px;border-radius:50%}
.bigcards{display:grid;gap:18px;grid-template-columns:1fr}
@media(min-width:640px){.bigcards{grid-template-columns:1fr 1fr}}
@media(min-width:1000px){.bigcards{grid-template-columns:repeat(4,1fr)}}
.bigcard{display:flex;flex-direction:column;background:var(--surface);border:1px solid var(--line);border-radius:var(--r);overflow:hidden;text-decoration:none;box-shadow:var(--shadow)}
.bigcard:hover{border-color:var(--c)}
.bigcard .tile{aspect-ratio:4/3;display:flex;align-items:flex-end;padding:18px;color:#fff;font-size:1.5rem;font-weight:800;letter-spacing:-.03em;line-height:1.15;background:linear-gradient(145deg,var(--c),color-mix(in srgb,var(--c) 55%,#000))}
.bigcard .bd{padding:16px 18px 20px;display:flex;flex-direction:column;gap:6px}
.bigcard h3{margin:0;font-size:1.05rem}.bigcard p{margin:0;color:var(--mute);font-size:.92rem}.bigcard small{color:var(--mute)}
.intro{text-align:center;padding:84px 0 24px}
.intro h2{font-size:clamp(1.6rem,4.6vw,2.6rem);line-height:1.3;letter-spacing:-.03em;max-width:760px;margin:0 auto 22px}
.intro .btn{border-color:var(--fg);color:var(--fg);background:transparent}
.news{display:grid;gap:14px;grid-template-columns:1fr}
@media(min-width:900px){.news{grid-template-columns:1fr 1fr}}
.nrow{display:flex;gap:14px;background:var(--surface);border:1px solid var(--line);border-radius:var(--r);overflow:hidden;text-decoration:none;min-height:116px}
.nrow:hover{border-color:var(--brand)}
.nrow .th{flex:none;width:34%;max-width:200px;background:linear-gradient(135deg,var(--surface2),var(--line)) center/cover no-repeat}
.nrow .tx{padding:12px 14px 12px 0;display:flex;flex-direction:column;gap:4px;min-width:0}
.nrow h3{margin:0;font-size:1rem;line-height:1.4;display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical;overflow:hidden}
.nrow p{margin:0;color:var(--mute);font-size:.88rem;display:-webkit-box;-webkit-line-clamp:1;-webkit-box-orient:vertical;overflow:hidden}
.nrow small{color:var(--mute);font-size:.78rem}
.nrow time{color:var(--mute);font-size:.8rem;margin-top:auto}

/* 블로그 큰 카드: 이미지 확대 */
.bigcard .tile{position:relative;overflow:hidden;padding:0;aspect-ratio:4/3}
.bigcard .tile .cover{position:absolute;inset:0;display:flex;align-items:flex-end;padding:18px;color:#fff;font-size:1.5rem;font-weight:800;letter-spacing:-.03em;line-height:1.15}
.bigcard .tile img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;background:#fff;transition:transform .6s cubic-bezier(.2,.7,.2,1)}
.bigcard:hover .tile img,.bigcard:focus-visible .tile img{transform:scale(1.1)}
.bigcard:focus-visible{outline:3px solid var(--focus);outline-offset:3px}
@media(prefers-reduced-motion:reduce){.bigcard .tile img{transition:none}}

/* 시안 A 블로그 카드: 위에 이미지 */
.bcard{padding:0;overflow:hidden;gap:0}
.bcard .tilelink{display:block}
.bcard .tile{position:relative;overflow:hidden;aspect-ratio:16/9;background:linear-gradient(145deg,var(--c),color-mix(in srgb,var(--c) 55%,#000))}
.bcard .tile .cover{position:absolute;inset:0;display:flex;align-items:flex-end;padding:16px;color:#fff;font-size:1.3rem;font-weight:800}
.bcard .tile img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;background:#fff;transition:transform .6s cubic-bezier(.2,.7,.2,1)}
.bcard:hover .tile img,.bcard .tilelink:focus-visible .tile img{transform:scale(1.1)}
.bcard .bcbody{padding:20px;display:flex;flex-direction:column;gap:10px;flex:1}
.bcard .bcbody .btn{margin-top:auto;align-self:flex-start}
@media(prefers-reduced-motion:reduce){.bcard .tile img{transition:none}}
@media(max-width:700px){.draft-switch{left:auto;right:8px;top:8px;bottom:auto;font-size:.74rem;padding:3px 4px}.draft-switch a{padding:4px 9px}}
.slide h1,.slide h2.big,.bhero h1,.bhero h2,.intro h2{word-break:keep-all;overflow-wrap:anywhere}

/* 블로그 카드 전체 클로즈업 */
.bigcard,.bcard{position:relative;transition:opacity .7s ease,transform .35s cubic-bezier(.2,.7,.2,1),box-shadow .35s,border-color .2s}
.bigcard .tile img,.bcard .tile img{transition:none}
.bigcard.rv.in:hover,.bigcard.rv.in:focus-visible,.bcard.rv.in:hover,.bcard.rv.in:focus-within{transform:scale(1.05);box-shadow:0 20px 44px rgba(16,24,40,.28);z-index:3;border-color:var(--c)}
.bigcard:hover .tile img,.bigcard:focus-visible .tile img,.bcard:hover .tile img,.bcard .tilelink:focus-visible .tile img{transform:none}
@media(prefers-reduced-motion:reduce){
  .bigcard.rv.in:hover,.bigcard.rv.in:focus-visible,.bcard.rv.in:hover,.bcard.rv.in:focus-within{transform:none;box-shadow:0 0 0 3px var(--c)}
}

/* 글 썸네일: 자르지 않기 */
.thumbx{position:relative;overflow:hidden;background:var(--surface2)}
.thumbx .bgimg{position:absolute;inset:-12%;width:124%;height:124%;object-fit:cover;filter:blur(16px) saturate(1.1);opacity:.85}
.thumbx .fgimg{position:relative;display:block;width:100%;height:100%;object-fit:contain}
.thumbx .noimg{position:absolute;inset:0;display:flex;align-items:center;padding:14px;font-weight:800;font-size:1.1rem;line-height:1.3;color:#fff;background:linear-gradient(135deg,#1b5fd1,#143a8c);word-break:keep-all;overflow:hidden}
.nrow .th{background:none}

/* 최신 글 이동 줄 */
.mq-box{margin:0 0 22px;position:relative}
.mq-pause{margin:0 0 10px}
.mq{overflow:hidden;padding:6px 0 14px;-webkit-mask-image:linear-gradient(90deg,transparent,#000 4%,#000 96%,transparent);mask-image:linear-gradient(90deg,transparent,#000 4%,#000 96%,transparent)}
.mq-track{display:flex;width:max-content;animation:mq-l 110s linear infinite;will-change:transform}
.mq.ltr .mq-track{animation-name:mq-r}
.mq-half{display:flex;gap:16px;padding-right:16px}
.mq .card{width:280px;flex:none}
@keyframes mq-l{from{transform:translateX(0)}to{transform:translateX(-50%)}}
@keyframes mq-r{from{transform:translateX(-50%)}to{transform:translateX(0)}}
.mq:hover .mq-track,.mq:focus-within .mq-track,.mq-paused .mq-track{animation-play-state:paused}
@media(max-width:560px){.mq .card{width:230px}.mq-half{gap:12px;padding-right:12px}}
@media(prefers-reduced-motion:reduce){
  .mq{overflow-x:auto;-webkit-mask-image:none;mask-image:none}
  .mq-track{animation:none}
  .mq-half[aria-hidden]{display:none}
  .mq-pause{display:none}
}
@media(max-width:420px){.slide h1,.slide h2.big{font-size:1.95rem}}

/* 필터 두 줄: 블로그(크고 색 있는 알약) vs 주제(작은 윤곽선 해시태그) */
.tools{gap:0}
.chiprow{display:flex;align-items:center;gap:12px}
.rowlabel{flex:none;min-width:44px;font-size:.78rem;font-weight:800;color:var(--mute);letter-spacing:.02em}
.chiprow .chips{flex:1;min-width:0;padding-bottom:4px}
.blogrow{margin-top:16px}
.topicrow{margin-top:22px;padding-top:16px;border-top:1px dashed var(--line)}
.bchip{--tint:color-mix(in srgb,var(--c) 14%,#fff);--ink:color-mix(in srgb,var(--c) 42%,#000);--fill:color-mix(in srgb,var(--c) 66%,#000);
  flex:none;display:inline-flex;align-items:center;gap:9px;min-height:46px;padding:0 20px 0 16px;border-radius:999px;border:2px solid var(--tint);background:var(--tint);color:var(--ink);font:inherit;font-size:1rem;font-weight:800;cursor:pointer}
.bchip i{width:11px;height:11px;border-radius:50%;background:var(--c);flex:none}
.bchip:hover{border-color:var(--c)}
.bchip[aria-pressed=true]{background:var(--fill);border-color:var(--fill);color:#fff}
.bchip[aria-pressed=true] i{background:#fff}
.bchip.all{--c:#475062;--tint:#e8eaee;--ink:#2a303b;--fill:#2f3541}
.bchip:focus-visible,.tchip:focus-visible{outline:3px solid var(--focus);outline-offset:2px}
.tchip{flex:none;min-height:30px;padding:0 11px;border-radius:6px;border:1px solid var(--line);background:transparent;color:var(--mute);font:inherit;font-size:.82rem;font-weight:500;cursor:pointer}
.tchip:hover{border-color:var(--mute);color:var(--fg)}
.tchip[aria-pressed=true]{background:var(--surface2);border-color:var(--fg);color:var(--fg);font-weight:700}
@media(prefers-color-scheme:dark){
  .bchip{--tint:color-mix(in srgb,var(--c) 24%,#15181d);--ink:color-mix(in srgb,var(--c) 40%,#fff);--fill:color-mix(in srgb,var(--c) 62%,#000)}
  .bchip.all{--tint:#2a2f38;--ink:#e6e8ec;--fill:#4a5262}
}
@media(max-width:560px){.rowlabel{min-width:34px}.bchip{min-height:44px;font-size:.95rem;padding:0 16px 0 13px}}
@media(min-width:700px){.chiprow .chips{flex-wrap:wrap;overflow:visible;row-gap:8px}}

/* 히어로 글자는 항상 보이게: 등장 효과 없이 표시, 흰 글씨 + 약한 그림자 */
.slide.on,.bslide.on{animation:none;opacity:1}
.slide,.slide h1,.slide h2,.slide p,.slide .kicker{color:#fff;opacity:1}
.slide h1,.slide h2.big,.slide p{text-shadow:0 1px 3px rgba(0,0,0,.28)}
.slide .kicker{background:rgba(0,0,0,.22)}
/* 퀵메뉴 라벨은 줄바꿈 없이 한 줄 */
.q{width:auto;min-width:92px;padding:6px 12px}
.q span:last-child{white-space:nowrap}
/* 히어로 제목: 글씨를 한두 단계 줄이고 오른쪽 여백을 확보해 줄 끝 글자가 잘리지 않게 */
.slide h1,.slide h2.big{font-size:clamp(1.75rem,4vw,3.6rem);line-height:1.22;max-width:min(820px,100%);padding-right:12px;box-sizing:border-box;word-break:keep-all;overflow-wrap:break-word;text-wrap:balance}
@media(max-width:420px){.slide h1,.slide h2.big{font-size:1.75rem}}
.slide p{padding-right:12px;box-sizing:border-box}
/* 소개·방침·문의 본문 좌우 여백 */
main.page{padding-left:18px;padding-right:18px}