@charset "utf-8";
/* 사이트 소개 */

.bk-about { color: #0f172a; }
.bk-about * { box-sizing: border-box; }
.bk-about h1, .bk-about h2, .bk-about h3, .bk-about p { margin: 0; }
.bk-about a { text-decoration: none; }

.bk-ab-eyebrow { display: inline-block; font-size: 12px; font-weight: 800; letter-spacing: .14em; color: #1d4ed8; }

/* ---------- 이미지 영역 ---------- */
.bk-ab-pic { position: relative; display: block; width: 100%; aspect-ratio: 16 / 10; border-radius: 18px; overflow: hidden; background: #e2e8f0; }
.bk-ab-pic img { display: block; width: 100%; height: 100%; object-fit: cover; }
.bk-ab-pic.is-art { display: flex; align-items: center; justify-content: center; color: rgba(255,255,255,.92); font-size: 54px; }
.bk-ab-pic.is-art:before, .bk-ab-pic.is-art:after { content: ""; position: absolute; border-radius: 50%; }
.bk-ab-pic.is-art:before { width: 70%; aspect-ratio: 1; right: -18%; top: -30%; background: rgba(255,255,255,.14); }
.bk-ab-pic.is-art:after { width: 46%; aspect-ratio: 1; left: -12%; bottom: -26%; background: rgba(255,255,255,.1); }
.bk-ab-pic.is-art .fa { position: relative; z-index: 1; filter: drop-shadow(0 6px 14px rgba(15,23,42,.25)); }
.art-hero   { background: linear-gradient(135deg, #1e3a8a, #1d4ed8 55%, #38bdf8); }
.art-share  { background: linear-gradient(135deg, #7c3aed, #ec4899); }
.art-collab { background: linear-gradient(135deg, #0ea5e9, #1d4ed8); }
.art-info   { background: linear-gradient(135deg, #059669, #22c55e); }
.art-event  { background: linear-gradient(135deg, #f97316, #ef4444); }
.art-about  { background: linear-gradient(135deg, #0f172a, #1d4ed8); }

/* ---------- 히어로 ---------- */
.bk-ab-hero { display: grid; grid-template-columns: minmax(0, 1.05fr) minmax(0, 1fr); gap: 48px; align-items: center; margin: 0 0 28px;     border-radius: 28px;  }
.bk-ab-hero-txt h1 { margin: 14px 0 16px; font-size: 40px; font-weight: 800; line-height: 1.3; letter-spacing: -0.045em; word-break: keep-all; }
.bk-ab-hero-txt h1 em { font-style: normal; color: #1d4ed8; }
.bk-ab-hero-txt p { font-size: 16px; line-height: 1.8; color: #475569; word-break: keep-all; }
.bk-ab-cta { display: flex; gap: 10px; flex-wrap: wrap; margin-top: 28px; }
.bk-ab-cta.is-center { justify-content: center; }
.bk-ab-btn { display: inline-flex; align-items: center; gap: 8px; height: 50px; padding: 0 26px; border: 1px solid #cbd5e1; border-radius: 999px; background: #fff; color: #0f172a; font-size: 15px; font-weight: 700; transition: transform .15s, box-shadow .15s, background .15s; }
.bk-ab-btn:hover { transform: translateY(-2px); box-shadow: 0 8px 20px rgba(15,23,42,.1); }
.bk-ab-btn.is-fill { background: #1d4ed8; border-color: #1d4ed8; color: #fff !important; }
.bk-ab-btn.is-fill:hover { background: #1e40af; }
.bk-ab-btn.is-white { background: #fff; border-color: #fff; color: #1d4ed8 !important; }
.bk-ab-btn.is-ghost { background: transparent; border-color: rgba(255,255,255,.5); color: #fff; }
.bk-ab-btn.is-ghost:hover { background: rgba(255,255,255,.12); }

.bk-ab-hero-visual { position: relative; }
.bk-ab-pic.is-hero { aspect-ratio: 4 / 3; border-radius: 26px; box-shadow: 0 24px 50px rgba(29,78,216,.28); }
.bk-ab-pic.is-hero.is-art { font-size: 96px; }
.bk-ab-chip { position: absolute; display: inline-flex; align-items: center; gap: 6px; padding: 9px 14px; border-radius: 999px; background: #fff; color: #0f172a; font-size: 13px; font-weight: 700; box-shadow: 0 10px 26px rgba(15,23,42,.16); }
.bk-ab-chip .fa { color: #1d4ed8; }
.bk-ab-chip.c1 { left: -18px; top: 12%; }
.bk-ab-chip.c2 { right: -14px; top: 40%; }
.bk-ab-chip.c3 { left: 8%; bottom: -16px; }

/* ---------- 섹션 공통 ---------- */
.bk-ab-sec { margin: 0 0 28px; margin-top:60px;   border-radius: 28px; }
.bk-ab-head { margin: 0 0 30px; text-align: center; }
.bk-ab-head span { display: block; font-size: 12px; font-weight: 800; letter-spacing: .14em; color: #1d4ed8; }
.bk-ab-head h2 { margin-top: 10px; font-size: 28px; font-weight: 800; letter-spacing: -0.04em; }

/* ---------- 카드 ---------- */
.bk-ab-cards { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 18px; }
.bk-ab-card { display: flex; flex-direction: column; padding: 14px 14px 22px; border: 1px solid #e2e8f0; border-radius: 22px; background: #fff; transition: transform .2s, box-shadow .2s, border-color .2s; }
.bk-ab-card:hover { transform: translateY(-4px); border-color: #bfdbfe; box-shadow: 0 16px 34px rgba(29,78,216,.1); }
.bk-ab-card .bk-ab-pic { border-radius: 14px; }
.bk-ab-card .bk-ab-pic.is-art { font-size: 40px; }
.bk-ab-card h3 { margin: 18px 6px 8px; font-size: 18px; font-weight: 800; letter-spacing: -0.03em; }
.bk-ab-card p { flex: 1; margin: 0 6px 16px; font-size: 14px; line-height: 1.75; color: #64748b; word-break: keep-all; }
.bk-ab-card > a { margin: 0 6px; font-size: 13px; font-weight: 700; color: #1d4ed8; }
.bk-ab-card > a:hover { text-decoration: underline; }

/* ---------- 소개 본문 ---------- */
.bk-ab-story { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1.1fr); gap: 48px; align-items: center; }
.bk-ab-pic.is-story { aspect-ratio: 5 / 4; border-radius: 22px; }
.bk-ab-pic.is-story.is-art { font-size: 80px; }
.bk-ab-story-txt h2 { margin: 10px 0 18px; font-size: 30px; font-weight: 800; letter-spacing: -0.04em; }
.bk-ab-story-txt p { margin: 0 0 14px; font-size: 16px; line-height: 1.9; color: #334155; word-break: keep-all; }
.bk-ab-story-txt p:first-of-type { font-size: 18px; font-weight: 700; color: #0f172a; }

/* ---------- 마무리 ---------- */
.bk-ab-end { position: relative; overflow: hidden; margin: 0; padding: 64px 32px; border-radius: 28px; background: linear-gradient(120deg, #1e3a8a, #1d4ed8 60%, #0ea5e9); color: #fff; text-align: center; }
.bk-ab-end:before { content: ""; position: absolute; right: -80px; top: -120px; width: 360px; height: 360px; border-radius: 50%; background: rgba(255,255,255,.1); }
.bk-ab-end:after { content: ""; position: absolute; left: -60px; bottom: -140px; width: 300px; height: 300px; border-radius: 50%; background: rgba(255,255,255,.08); }
.bk-ab-end > * { position: relative; z-index: 1; }
.bk-ab-end h2 { font-size: 30px; font-weight: 800; line-height: 1.4; letter-spacing: -0.04em; word-break: keep-all; }
.bk-ab-end p { margin-top: 14px; font-size: 16px; opacity: .85; }

/* ---------- 반응형 ---------- */
@media (max-width: 1100px) {
    .bk-ab-cards { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}
@media (max-width: 900px) {
    .bk-ab-hero { grid-template-columns: minmax(0, 1fr); gap: 36px; padding: 36px 28px 44px; }
    .bk-ab-hero-txt h1 { font-size: 32px; }
    .bk-ab-chip.c1 { left: 6px; } .bk-ab-chip.c2 { right: 6px; }
    .bk-ab-story { grid-template-columns: minmax(0, 1fr); gap: 28px; }
    .bk-ab-sec { padding: 36px 28px; }
}
@media (max-width: 640px) {
    .bk-ab-hero { padding: 28px 20px 36px; border-radius: 22px; }
    .bk-ab-hero-txt h1 { font-size: 26px; margin-bottom:20px !important; }
    .bk-ab-hero-txt p { font-size: 14px; line-height:1.5;}
    .bk-ab-btn { height: 46px; padding: 0 20px; font-size: 14px; }
    .bk-ab-sec { padding: 28px 18px; border-radius: 22px; }
    .bk-ab-head h2, .bk-ab-story-txt h2 { font-size: 22px; }
    .bk-ab-cards { grid-template-columns: minmax(0, 1fr); }
    .bk-ab-end { padding: 44px 20px; border-radius: 22px; }
    .bk-ab-end h2 { font-size: 22px; }
    .bk-ab-story-txt p{line-height:1.5;font-size:15px}
    .bk-ab-story-txt p:first-of-type{margin-bottom:20px !important;}
}
@media (prefers-reduced-motion: reduce) {
    .bk-ab-btn, .bk-ab-card { transition: none; }
    .bk-ab-btn:hover, .bk-ab-card:hover { transform: none; }
}

/* ---------- 관리자: 이미지 업로드 컨트롤 ---------- */
.bk-ab-slot { position: relative; }
.bk-ab-admin { position: absolute; left: 10px; right: 10px; bottom: 10px; z-index: 5; display: flex; align-items: center; gap: 6px; flex-wrap: wrap; }
.bk-ab-admin form { margin: 0; }
.bk-ab-up, .bk-ab-del { display: inline-flex; align-items: center; gap: 6px; height: 34px; padding: 0 12px; border: 0; border-radius: 999px; background: rgba(15,23,42,.82); color: #fff; font-size: 12px; font-weight: 700; cursor: pointer; -webkit-backdrop-filter: blur(4px); backdrop-filter: blur(4px); }
.bk-ab-up:hover { background: #1d4ed8; }
.bk-ab-del { background: rgba(185,28,28,.85); }
.bk-ab-del:hover { background: #b91c1c; }
.bk-ab-up input[type=file] { position: absolute; width: 1px; height: 1px; opacity: 0; overflow: hidden; }
.bk-ab-hint { padding: 5px 10px; border-radius: 999px; background: rgba(255,255,255,.9); color: #475569; font-size: 11px; font-weight: 600; }
.bk-ab-hero-visual .bk-ab-admin { bottom: 14px; left: 14px; right: 14px; }
@media (max-width: 640px) { .bk-ab-hint { display: none; } }