:root {
    --bg: #0A0806;
    --surface: #14110F;
    --accent: #D4AF37;
    --text-main: #F4EBE2;
    --text-dim: #A89F94;
    --border: rgba(212, 175, 55, 0.2);
    --glass: rgba(10, 8, 6, 0.7);
}

* { margin: 0; padding: 0; box-sizing: border-box; -webkit-font-smoothing: antialiased; }

html { scroll-behavior: smooth; }

body {
    background-color: var(--bg);
    color: var(--text-main);
    font-family: "Pretendard Variable", Pretendard, -apple-system, sans-serif;
    overflow-x: hidden;
    line-height: 1.6;
    word-break: keep-all;
    overflow-wrap: break-word; /* keep-all로도 못 끊는 긴 단어의 넘침 방지 */
}

.metadata {
    font-family: monospace;
    font-size: 10px;
    text-transform: uppercase;
    letter-spacing: 0.15em;
    color: var(--accent);
    display: flex;
    align-items: center;
    gap: 8px;
}
.metadata::before {
    content: '';
    width: 4px; height: 4px;
    background: var(--accent);
    border-radius: 50%;
    box-shadow: 0 0 8px var(--accent);
}

.hairline-v {
    width: 1px; height: 40px;
    background: linear-gradient(to bottom, transparent, var(--border), transparent);
}

nav {
    position: fixed;
    top: 24px; left: 50%;
    transform: translateX(-50%);
    width: 90%; max-width: 1200px; height: 64px;
    background: var(--glass);
    backdrop-filter: blur(20px);
    border: 0.5px solid var(--border);
    border-radius: 32px;
    display: flex; align-items: center; justify-content: space-between;
    padding: 0 32px;
    z-index: 1000;
}
.logo { font-weight: 700; font-size: 18px; letter-spacing: -0.02em; color: var(--text-main); }
.nav-links { display: flex; gap: 40px; }
.nav-links a { position: relative; text-decoration: none; color: var(--text-dim); font-size: 13px; font-weight: 500; transition: color .3s ease; }
.nav-links a:hover { color: var(--accent); }
.nav-links a::after {
    content: '';
    position: absolute; left: 0; bottom: -6px;
    width: 100%; height: 1px;
    background: var(--accent);
    box-shadow: 0 0 8px var(--accent);
    transform: scaleX(0); transform-origin: left;
    transition: transform .3s ease;
}
.nav-links a.active { color: var(--accent); }
.nav-links a.active::after { transform: scaleX(1); }
.nav-cta {
    background: var(--text-main); color: var(--bg);
    padding: 8px 20px; border-radius: 20px;
    font-size: 12px; font-weight: 700; text-decoration: none;
    transition: opacity .2s ease;
}
.nav-cta:hover { opacity: .9; }

section.hero {
    position: relative; height: 100vh; width: 100%;
    display: flex; align-items: center; justify-content: center;
    overflow: hidden; padding: 0 5%;
}
.hero-bg { position: absolute; top: 0; left: 0; width: 100%; height: 100%; z-index: -1; }
.hero-bg img { width: 100%; height: 100%; object-fit: cover; filter: brightness(0.4) contrast(1.1); }
.hero-bg::after {
    content: ''; position: absolute; bottom: 0; left: 0;
    width: 100%; height: 40%;
    background: linear-gradient(to top, var(--bg), transparent);
}
.hero-content {
    max-width: 1200px; width: 100%;
    display: grid; grid-template-columns: 1.2fr 0.8fr;
    align-items: end; gap: 60px;
}
.hero-text h1 {
    /* 좌측 컬럼 폭(최대 684px) 안에서 "시험이 아니라 '설계'로"가 한 줄에 들어가는 상한 */
    font-size: clamp(36px, 4.8vw, 62px);
    line-height: 1.1; font-weight: 700; letter-spacing: -0.04em;
    margin-bottom: 24px;
}
.hero-text p {
    font-size: 18px; color: var(--text-dim);
    max-width: 540px; margin-bottom: 40px; font-weight: 300;
}
.hero-visual-card {
    background: rgba(255,255,255,0.03);
    border: 0.5px solid var(--border);
    border-radius: 24px; padding: 40px;
    backdrop-filter: blur(10px);
    position: relative;
}
.time-diff { display: flex; flex-direction: column; gap: 20px; }
.time-row { display: flex; justify-content: space-between; align-items: center; }
.bar-container { flex-grow: 1; margin: 0 20px; height: 2px; background: rgba(255,255,255,0.1); position: relative; }
.bar-fill { position: absolute; left: 0; top: -1px; height: 4px; background: var(--accent); box-shadow: 0 0 10px var(--accent); }

.scanline {
    position: absolute; top: 0; left: 0; width: 100%; height: 100%;
    background: linear-gradient(to bottom, transparent 50%, rgba(212,175,55,0.02) 50%);
    background-size: 100% 4px;
    pointer-events: none; opacity: .5; z-index: 10;
}

.btn-primary {
    display: inline-block;
    background: var(--accent); color: var(--bg);
    padding: 18px 36px; border-radius: 40px;
    font-weight: 700; font-size: 16px; text-decoration: none;
    transition: all .3s ease;
    box-shadow: 0 10px 20px rgba(212,175,55,0.2);
    border: 0; cursor: pointer; font-family: inherit;
}
.btn-primary:hover { transform: translateY(-2px); box-shadow: 0 15px 30px rgba(212,175,55,0.4); }

.section-padding { padding: 140px 0; }

.problem-grid {
    display: grid; grid-template-columns: repeat(3, 1fr);
    gap: 24px; max-width: 1200px; margin: 60px auto 0; padding: 0 5%;
}
.problem-card {
    background: var(--surface);
    border: 0.5px solid var(--border);
    border-radius: 20px; padding: 48px 40px;
    display: flex; flex-direction: column; gap: 24px;
    transition: transform .3s ease, border-color .3s ease;
}
.problem-card:hover { border-color: var(--accent); transform: translateY(-8px); }
.problem-card h3 { font-size: 20px; font-weight: 600; color: var(--text-main); line-height: 1.4; }
.problem-card p { font-size: 15px; color: var(--text-dim); font-weight: 300; line-height: 1.7; }

.section-header { max-width: 1200px; margin: 0 auto; padding: 0 5%; text-align: left; }
.section-header h2 { font-size: 42px; font-weight: 700; letter-spacing: -0.03em; margin-top: 20px; text-wrap: balance; }

/* ===== 확장 섹션 (동일 디자인 언어) ===== */
.stat-num { font-size: 34px; font-weight: 700; color: var(--accent); letter-spacing: -0.02em; }
.stat-cap { font-size: 11px; color: var(--text-dim); text-transform: uppercase; letter-spacing: 0.12em; margin-top: 4px; }

.review-grid {
    max-width: 1200px; margin: 60px auto 0; padding: 0 5%;
    display: grid; grid-template-columns: repeat(3, 1fr); gap: 24px;
}
.review-card {
    background: var(--surface);
    border: 0.5px solid var(--border);
    border-radius: 20px; padding: 36px 32px;
    display: flex; flex-direction: column; gap: 18px;
}
.review-card blockquote { font-size: 14.5px; color: var(--text-main); font-weight: 300; line-height: 1.8; }
.review-card .who { font-size: 12px; color: var(--text-dim); border-top: 1px solid rgba(255,255,255,0.06); padding-top: 14px; }
.review-card .who b { color: var(--accent); font-weight: 600; }

.form-card {
    background: rgba(255,255,255,0.03);
    border: 0.5px solid var(--border);
    border-radius: 24px; padding: 44px 40px;
    backdrop-filter: blur(10px);
}
.form-card label { display: block; font-size: 12px; letter-spacing: 0.08em; text-transform: uppercase; color: var(--text-dim); margin-bottom: 8px; }
.form-card input {
    width: 100%;
    background: rgba(255,255,255,0.04);
    border: 0.5px solid var(--border);
    border-radius: 12px;
    color: var(--text-main);
    padding: 14px 16px; font-size: 15px; font-family: inherit;
}
.form-card input:focus { outline: 1px solid var(--accent); border-color: var(--accent); }
.form-card input::placeholder { color: rgba(168,159,148,0.5); }
.field { margin-bottom: 22px; }
.seg { display: grid; grid-template-columns: repeat(3, 1fr); gap: 10px; }
.seg button {
    background: rgba(255,255,255,0.04);
    border: 0.5px solid var(--border);
    border-radius: 12px; color: var(--text-dim);
    padding: 13px 0; font-size: 14px; font-family: inherit; cursor: pointer;
    transition: all .2s ease;
}
.seg button.on { background: var(--accent); color: var(--bg); font-weight: 700; border-color: var(--accent); }
.msg { display: none; margin-top: 14px; font-size: 13.5px; font-weight: 600; text-align: center; }
.msg.ok { display: block; color: var(--accent); }
.msg.err { display: block; color: #e07a5f; }

/* FAQ */
.faq-list { max-width: 900px; margin: 60px auto 0; padding: 0 5%; }
.faq-list details { border-bottom: 1px solid rgba(255,255,255,0.08); }
.faq-list summary {
    list-style: none; cursor: pointer;
    padding: 26px 8px;
    font-weight: 600; font-size: 17px; color: var(--text-main);
    display: flex; justify-content: space-between; gap: 16px;
}
.faq-list summary::-webkit-details-marker { display: none; }
.faq-list summary::after { content: "+"; color: var(--accent); font-weight: 300; font-size: 22px; }
.faq-list details[open] summary::after { content: "–"; }
.faq-list .a { padding: 0 8px 26px; font-size: 14.5px; color: var(--text-dim); font-weight: 300; line-height: 1.9; max-width: 760px; }

/* 칼럼 카드 링크 */
.insight-card { text-decoration: none; }
.insight-card .more { font-size: 12px; color: var(--accent); letter-spacing: 0.08em; text-transform: uppercase; margin-top: auto; }

/* 게시글 (posts/) */
.post-main { max-width: 860px; margin: 0 auto; padding: 150px 5% 90px; }
.post-main h1 { font-size: clamp(28px, 4vw, 40px); font-weight: 700; letter-spacing: -0.03em; line-height: 1.3; margin: 16px 0 12px; text-wrap: balance; }
.post-meta { font-size: 12px; color: var(--text-dim); letter-spacing: 0.05em; margin-bottom: 40px; }
.post-main h2 { font-size: 23px; font-weight: 600; letter-spacing: -0.02em; margin: 48px 0 16px; }
.post-main p, .post-main li { font-size: 15.5px; color: var(--text-dim); font-weight: 300; line-height: 1.9; }
.post-main p { margin-bottom: 16px; }
.post-main ul, .post-main ol { padding-left: 22px; margin-bottom: 16px; }
.post-main strong, .post-main b { color: var(--text-main); font-weight: 600; }
.post-main table { width: 100%; border-collapse: collapse; margin: 20px 0 24px; font-size: 14px; }
.post-main th, .post-main td { border: 1px solid rgba(255,255,255,0.1); padding: 12px 14px; text-align: left; color: var(--text-dim); font-weight: 300; }
.post-main th { color: var(--text-main); font-weight: 600; background: var(--surface); }
.post-main a { color: var(--accent); text-decoration: underline; text-underline-offset: 3px; }
.post-main a.btn-primary { color: var(--bg); text-decoration: none; }
.post-cta {
    margin-top: 56px; padding: 36px 32px;
    background: var(--surface); border: 0.5px solid var(--border); border-radius: 20px;
    text-align: center;
}
.post-cta p { margin-bottom: 20px; }
.post-related { margin-top: 48px; padding-top: 28px; border-top: 1px solid rgba(255,255,255,0.08); }
.post-related h2 { margin-top: 0; font-size: 16px; }
.post-related a { display: block; padding: 8px 0; font-size: 14.5px; }

footer { padding: 80px 5%; border-top: 1px solid var(--border); display: flex; justify-content: space-between; align-items: flex-start; gap: 40px; flex-wrap: wrap; }

.nav-tel { color: var(--accent); font-size: 13px; font-weight: 700; text-decoration: none; letter-spacing: 0.02em; }
.nav-tel:hover { opacity: .85; }

.mbar {
    display: none;
    position: fixed; left: 0; right: 0; bottom: 0; z-index: 1100;
}
.mbar a {
    flex: 1; text-align: center; padding: 15px;
    font-weight: 700; font-size: 15px; text-decoration: none;
}
.mbar .m-tel { background: var(--surface); color: var(--accent); border-top: 0.5px solid var(--border); }
.mbar .m-cta { background: var(--accent); color: var(--bg); }

/* 데스크톱 레이아웃 전용 강제 줄바꿈: 모바일에선 자연 줄바꿈에 맡김 */
@media (max-width: 968px) {
    .br-pc { display: none; }
}

@media (max-width: 968px) {
    .hero-content { grid-template-columns: 1fr; padding-top: 100px; gap: 40px; }
    .problem-grid, .review-grid { grid-template-columns: 1fr; }
    /* 360px 화면에서 "사회복지사 2급," 이 한 줄에 들어가는 크기 (48px 고정 시 "2급,"만 고아 줄로 떨어짐) */
    .hero-text h1 { font-size: clamp(30px, 8.5vw, 44px); }
    .nav-links, .nav-tel { display: none; }
    .section-header h2 { font-size: 30px; }
    .section-padding { padding: 90px 0; }
    section.hero { height: auto; padding-bottom: 80px; }
    .mbar { display: flex; }
    body { padding-bottom: 54px; }
}
@media (prefers-reduced-motion: reduce) { html { scroll-behavior: auto; } }

/* 뷰포트 밖 섹션은 렌더링 지연 (히어로는 .section-padding이 없어 제외됨) */
@supports (content-visibility: auto) {
    .section-padding { content-visibility: auto; contain-intrinsic-size: auto 900px; }
}

/* ===== Tailwind CDN 제거 후 대체 유틸리티 (본문에서 실제 사용하는 클래스만) ===== */
.flex { display: flex; }
.block { display: block; }
.flex-col { flex-direction: column; }
.flex-wrap { flex-wrap: wrap; }
.items-center { align-items: center; }
.justify-end { justify-content: flex-end; }
.gap-2 { gap: 8px; }
.gap-4 { gap: 16px; }
.gap-8 { gap: 32px; }
.gap-10 { gap: 40px; }
.gap-x-8 { column-gap: 32px; }
.gap-y-4 { row-gap: 16px; }
.mb-4 { margin-bottom: 16px; }
.mb-5 { margin-bottom: 20px; }
.mb-6 { margin-bottom: 24px; }
.mt-4 { margin-top: 16px; }
.mt-5 { margin-top: 20px; }
.mt-6 { margin-top: 24px; }
.mt-8 { margin-top: 32px; }
.w-full { width: 100%; }
.w-20 { width: 80px; }
.w-\[50\%\] { width: 50%; }
.opacity-30 { opacity: 0.3; }
.text-white { color: #FFFFFF; }
.text-right { text-align: right; }
.text-center { text-align: center; }
.text-\[10px\] { font-size: 10px; }
.text-\[11px\] { font-size: 11px; }
.text-\[12px\] { font-size: 12px; }
.text-\[13px\] { font-size: 13px; }
.text-\[14px\] { font-size: 14px; }
.text-\[24px\] { font-size: 24px; }
.text-\[\#A89F94\] { color: #A89F94; }
.text-\[\#D4AF37\] { color: #D4AF37; }
.bg-\[\#0A0806\] { background-color: #0A0806; }
.font-bold { font-weight: 700; }
.font-mono { font-family: ui-monospace, SFMono-Regular, Menlo, Consolas, monospace; }
.uppercase { text-transform: uppercase; }
.tracking-widest { letter-spacing: 0.1em; }
.leading-relaxed { line-height: 1.625; }
.underline { text-decoration: underline; }
.underline-offset-4 { text-underline-offset: 4px; }