/* ==========================================================================
   해아림한의원 노원점 — 칼럼(Column) 섹션 전용 스타일시트
   메인 사이트(index.html)와는 완전히 분리된 파일입니다.
   메인 사이트의 CSS/HTML은 이 파일과 무관하며, 이 파일을 수정해도
   메인 사이트 디자인에는 영향을 주지 않습니다.
   ========================================================================== */

:root{
  --bg:#FFFFFF; --bg-soft:#F5F6F8; --card:#FFFFFF;
  --ink:#14171C; --ink-soft:#5B6270;
  --line:rgba(20,23,28,.10); --line-strong:rgba(20,23,28,.18);
  --teal:#0E9C90; --teal-soft:#E3F5F3;
  --navy:#1F2A5C; --navy-soft:#EAECF4;
  --shadow:0 16px 36px -22px rgba(20,23,28,.28);
}
@media (prefers-color-scheme: dark){
  :root:not([data-theme="light"]){
    --bg:#0F1216; --bg-soft:#161A1F; --card:#181C22;
    --ink:#F2F4F6; --ink-soft:#A7AEB8;
    --line:rgba(242,244,246,.12); --line-strong:rgba(242,244,246,.22);
    --teal:#3FC7BA; --teal-soft:#123330;
    --navy:#96A3DA; --navy-soft:#1E2340;
    --shadow:0 16px 36px -18px rgba(0,0,0,.6);
  }
}
:root[data-theme="dark"]{
  --bg:#0F1216; --bg-soft:#161A1F; --card:#181C22;
  --ink:#F2F4F6; --ink-soft:#A7AEB8;
  --line:rgba(242,244,246,.12); --line-strong:rgba(242,244,246,.22);
  --teal:#3FC7BA; --teal-soft:#123330;
  --navy:#96A3DA; --navy-soft:#1E2340;
  --shadow:0 16px 36px -18px rgba(0,0,0,.6);
}

*{box-sizing:border-box;}
body{margin:0; background:var(--bg); color:var(--ink); font-family:"Noto Sans KR",system-ui,-apple-system,"Malgun Gothic",sans-serif; -webkit-font-smoothing:antialiased;}
h1,h2,h3{font-weight:900; line-height:1.3; margin:0; letter-spacing:-.02em;}
p{margin:0; line-height:1.8;}
a{color:inherit; text-decoration:none;}
img{max-width:100%; display:block;}
.wrap{max-width:880px; margin-inline:auto; padding-inline:24px;}
@media (max-width:640px){ .wrap{padding-inline:18px;} }

/* header */
.col-header{position:sticky; top:0; z-index:10; background:color-mix(in srgb, var(--bg) 90%, transparent); backdrop-filter:blur(10px); border-bottom:1px solid var(--line);}
.col-header .wrap{display:flex; align-items:center; justify-content:space-between; padding-block:14px; gap:16px; max-width:1120px;}
.col-brand{display:flex; align-items:center; gap:10px; color:var(--ink); font-weight:900; font-size:1.05rem;}
.col-brand img{height:44px; width:auto; flex:none;}
.col-home-link{font-size:.88rem; font-weight:700; color:var(--ink-soft); white-space:nowrap;}
.col-home-link:hover{color:var(--ink);}

/* list page */
.col-main{max-width:1120px; margin-inline:auto; padding:64px 24px 96px;}
@media (max-width:640px){ .col-main{padding:48px 18px 72px;} }
.col-eyebrow{display:block; font-size:.78rem; font-weight:700; letter-spacing:.14em; text-transform:uppercase; color:var(--navy); margin-bottom:10px;}
.col-title{font-size:clamp(1.6rem,3vw,2.3rem); margin-bottom:14px;}
.col-intro{color:var(--ink-soft); max-width:60ch; font-size:1.02rem; margin-bottom:48px;}

.col-grid{display:grid; grid-template-columns:repeat(2,1fr); gap:20px;}
@media (max-width:700px){ .col-grid{grid-template-columns:1fr;} }

.col-card{display:flex; flex-direction:column; gap:12px; background:var(--card); border:1px solid var(--line); border-radius:18px; padding:26px; box-shadow:var(--shadow); transition:transform .18s ease;}
.col-card:hover{transform:translateY(-2px);}
.col-cat{display:inline-block; width:fit-content; font-size:.82rem; font-weight:800; color:var(--navy);}
.col-card h3{font-size:1.08rem; font-weight:800; line-height:1.5;}
.col-card p{color:var(--ink-soft); font-size:.9rem; line-height:1.7;}
.col-meta{margin-top:auto; padding-top:8px; font-size:.8rem; color:var(--ink-soft); display:flex; justify-content:space-between; align-items:center;}
.col-more{font-weight:700; color:var(--navy);}

.col-empty{grid-column:1/-1; padding:60px 20px; text-align:center; color:var(--ink-soft); font-size:.95rem; border:1px dashed var(--line); border-radius:16px;}
.col-filters{display:flex; flex-wrap:wrap; gap:8px; margin-bottom:16px;} .col-filter-btn{padding:8px 16px; border-radius:999px; border:1px solid var(--line-strong); background:var(--card); color:var(--ink-soft); font-size:.86rem; font-weight:700; cursor:pointer;} .col-filter-btn.active{background:var(--navy); border-color:var(--navy); color:#fff;} .col-count{margin-bottom:14px; font-size:.86rem; color:var(--ink-soft); font-weight:600;} .col-pager{display:flex; flex-wrap:wrap; gap:8px; justify-content:center; margin-top:32px;} .col-pager-btn{width:38px; height:38px; border-radius:10px; border:1px solid var(--line-strong); background:var(--card); color:var(--ink); font-weight:700; cursor:pointer;} .col-pager-btn.active{background:var(--navy); border-color:var(--navy); color:#fff;}

/* single post page */
.post-main{max-width:720px; margin-inline:auto; padding:64px 24px 96px;}
@media (max-width:640px){ .post-main{padding:48px 18px 72px;} }
.post-back{display:inline-flex; align-items:center; gap:6px; font-size:.86rem; font-weight:700; color:var(--navy); margin-bottom:28px;}
.post-cat{display:inline-block; font-size:.76rem; font-weight:800; color:var(--navy); margin-bottom:16px;}
.post-title{font-size:clamp(1.5rem,3.2vw,2.1rem); margin-bottom:14px;}
.post-meta{color:var(--ink-soft); font-size:.86rem; margin-bottom:40px; padding-bottom:28px; border-bottom:1px solid var(--line);}
.post-body p{color:var(--ink); font-size:1.02rem; line-height:1.9; margin-bottom:22px;}
.post-body h2{font-size:1.2rem; margin:36px 0 14px;}
.post-notice{margin-top:48px; padding:18px 20px; border-radius:14px; background:var(--bg-soft); color:var(--ink-soft); font-size:.86rem; line-height:1.7;}

/* footer */
.col-footer{border-top:1px solid var(--line); padding:28px 24px; text-align:center; color:var(--ink-soft); font-size:.82rem;}