/* ==========================================================================
   한국창의예술협회 (KCAA) — 공통 디자인 시스템
   블루 + 골드 + 화이트 / 한지 미니멀 위 격식 있는 협회 톤
   ========================================================================== */

:root{
  --blue:#17356f; --blue-2:#24518f; --slate:#3f5a80;
  --gold:#c8a24a; --gold-lite:#e6c979; --gold-deep:#a8842f;
  --hero-dark:#12100d; --ink:#1f1f1f; --sub:#6b6b6b;
  --paper:#fff; --paper-2:#f6f7f9; --line:#e6e8ec;
  --shadow:0 12px 30px rgba(23,53,111,.12);
  --radius:12px; --maxw:1200px;
}

*{margin:0;padding:0;box-sizing:border-box;}
html{scroll-behavior:smooth;}
body{font-family:'Pretendard',sans-serif;background:var(--paper);color:var(--ink);line-height:1.6;-webkit-font-smoothing:antialiased;}
img{max-width:100%;display:block;}
a{color:inherit;text-decoration:none;}
button{font-family:inherit;cursor:pointer;}
.myeongjo{font-family:'Nanum Myeongjo',serif;}
.wrap{max-width:var(--maxw);margin:0 auto;padding:0 28px;}
.gold-text{background:linear-gradient(180deg,var(--gold-lite),var(--gold) 45%,var(--gold-deep));-webkit-background-clip:text;background-clip:text;color:transparent;}
.label{font-size:12px;letter-spacing:2px;text-transform:uppercase;color:var(--gold);font-weight:600;}

/* ===== 버튼 ===== */
.btn{display:inline-flex;align-items:center;gap:8px;padding:12px 26px;border-radius:30px;font-size:15px;font-weight:600;border:none;transition:transform .15s,box-shadow .15s,background .15s;}
.btn:hover{transform:translateY(-2px);}
.btn.solid{background:var(--blue);color:#fff;}
.btn.solid:hover{background:var(--blue-2);}
.btn.gold{background:linear-gradient(180deg,var(--gold-lite),var(--gold-deep));color:#3a2c07;}
.btn.ghost{background:transparent;color:var(--blue);box-shadow:inset 0 0 0 1.5px var(--blue);}
.btn.ghost:hover{background:var(--blue);color:#fff;}

/* ===== 상단바 (헤더) ===== */
.topbar{background:var(--blue);color:#fff;position:sticky;top:0;z-index:40;box-shadow:0 2px 12px rgba(10,25,60,.18);}
.topbar .wrap{display:flex;align-items:center;justify-content:space-between;height:76px;gap:20px;}
.brand{display:flex;align-items:center;}
.brand .logo{height:42px;width:auto;display:block;}
.menu{display:flex;gap:28px;margin-left:auto;font-size:15.5px;font-weight:600;}
.menu a{padding:8px 2px;position:relative;color:#eaf0fb;white-space:nowrap;}
.menu a::after{content:"";position:absolute;left:0;right:0;bottom:2px;height:2px;background:var(--gold);transform:scaleX(0);transition:.2s;}
.menu a:hover{color:#fff;} .menu a:hover::after,.menu a[data-active]::after{transform:scaleX(1);}
.menu a[data-active]{color:#fff;}
.util{display:flex;gap:14px;align-items:center;font-size:13.5px;color:#c3cfe6;padding-left:20px;border-left:1px solid rgba(255,255,255,.18);}
.util a:hover{color:var(--gold-lite);}
.hamburger{display:none;background:none;border:none;color:#fff;font-size:24px;margin-left:auto;}

/* 모바일 메뉴 */
@media(max-width:920px){
  .menu,.util{position:fixed;top:76px;left:0;right:0;flex-direction:column;background:var(--blue);padding:14px 28px;gap:6px;border-top:1px solid rgba(255,255,255,.12);
    transform:translateY(-140%);transition:transform .25s;margin:0;}
  .menu{z-index:39;} .util{top:auto;transform:none;position:static;border:none;padding:14px 0 0;}
  .menu.open{transform:translateY(0);} .menu.open .util{display:flex;}
  .menu a{padding:12px 0;border-bottom:1px solid rgba(255,255,255,.08);}
  .hamburger{display:block;}
}

/* ===== 히어로 슬라이더 ===== */
.hero{position:relative;overflow:hidden;background:#0b0a07;min-height:clamp(400px,58vh,620px);}
.hero-track{display:flex;height:100%;min-height:inherit;transition:transform .6s cubic-bezier(.4,0,.2,1);}
.hero-slide{position:relative;flex:0 0 100%;min-height:inherit;overflow:hidden;}
.hero-slide video,.hero-slide .slide-img,.hero-slide .slide-ph{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;z-index:0;}
.hero-slide .veil{position:absolute;inset:0;z-index:1;pointer-events:none;background:linear-gradient(180deg,rgba(11,10,7,.18) 0%,rgba(11,10,7,0) 30%,rgba(11,10,7,.72) 100%);}
.hero-caption{position:absolute;left:0;right:0;bottom:0;z-index:3;padding-bottom:56px;}
.hero-caption .kicker{color:var(--gold-lite);font-size:13px;letter-spacing:4px;font-weight:600;text-transform:uppercase;}
.hero-caption h2{font-family:'Nanum Myeongjo',serif;color:#fff;font-size:clamp(24px,4vw,40px);font-weight:800;margin:10px 0 8px;text-shadow:0 2px 18px rgba(0,0,0,.55);max-width:720px;}
.hero-caption p{color:#e7e0d2;font-size:15px;margin-bottom:18px;text-shadow:0 1px 10px rgba(0,0,0,.5);}
.hero-caption .btn{background:rgba(255,255,255,.14);color:#fff;box-shadow:inset 0 0 0 1.5px rgba(255,255,255,.55);backdrop-filter:blur(4px);}
.hero-caption .btn:hover{background:var(--gold);color:#3a2c07;box-shadow:none;transform:translateY(-2px);}
.hero-nav{position:absolute;top:50%;transform:translateY(-50%);z-index:5;width:46px;height:46px;border-radius:50%;border:none;background:rgba(0,0,0,.32);color:#fff;font-size:24px;line-height:1;display:flex;align-items:center;justify-content:center;transition:background .2s,transform .2s;backdrop-filter:blur(3px);}
.hero-nav:hover{background:rgba(200,162,74,.92);color:#1f1f1f;}
.hero-nav.prev{left:18px;} .hero-nav.next{right:18px;}
.hero-dots{position:absolute;bottom:22px;right:28px;z-index:5;display:flex;gap:9px;}
.hero-dots button{width:9px;height:9px;border-radius:50%;border:none;background:rgba(255,255,255,.45);cursor:pointer;transition:.25s;padding:0;}
.hero-dots button.on{background:var(--gold-lite);width:26px;border-radius:5px;}
@media(max-width:640px){.hero-nav{width:38px;height:38px;font-size:20px;}.hero-nav.prev{left:10px;}.hero-nav.next{right:10px;}.hero-caption{padding-bottom:44px;}.hero-dots{right:16px;}}

/* ===== UX 업그레이드: 스크롤 등장 + 헤더 축소 ===== */
.reveal{opacity:0;transform:translateY(20px);transition:opacity .7s ease,transform .7s ease;}
.reveal.in{opacity:1;transform:none;}
.topbar .wrap{transition:height .25s ease;}
.topbar{transition:box-shadow .25s ease;}
.topbar.scrolled .wrap{height:60px;}
.topbar.scrolled{box-shadow:0 6px 22px rgba(10,25,60,.3);}
.topbar.scrolled .brand .logo{height:34px;transition:height .25s ease;}
.card .thumb img{transition:transform .4s ease;}
.card:hover .thumb img{transform:scale(1.05);}
@media(prefers-reduced-motion:reduce){.reveal{opacity:1;transform:none;transition:none;}}

/* ===== 내부 페이지 상단 배너 ===== */
.page-head{background:linear-gradient(120deg,var(--blue) 0%,#1d3f7e 100%);color:#fff;padding:56px 0 50px;position:relative;overflow:hidden;}
.page-head::after{content:"";position:absolute;right:-40px;top:-40px;width:220px;height:220px;border-radius:50%;background:radial-gradient(circle,rgba(230,201,121,.18),transparent 70%);}
.page-head h1{font-size:34px;font-weight:800;letter-spacing:-0.5px;}
.page-head .crumb{margin-top:10px;font-size:13.5px;color:#c3cfe6;}
.page-head .crumb a:hover{color:var(--gold-lite);}

/* ===== 섹션 공통 ===== */
section.pad{padding:64px 0;}
.section-title{display:flex;align-items:center;gap:10px;margin-bottom:24px;}
.section-title .dot{width:7px;height:7px;background:var(--gold);border-radius:50%;}
.section-title h2{font-size:24px;font-weight:800;}
.section-title .more{margin-left:auto;font-size:12.5px;color:var(--sub);letter-spacing:1px;}
.section-title .more:hover{color:var(--blue-2);}
.lead{font-size:16px;color:#444;max-width:820px;}

/* ===== 퀵버튼 ===== */
.quick{margin-top:-34px;position:relative;z-index:5;}
.quick .wrap{display:grid;grid-template-columns:repeat(3,1fr);gap:18px;}
.qbtn{background:var(--slate);color:#fff;border-radius:14px;padding:22px 24px;display:flex;align-items:center;gap:16px;box-shadow:var(--shadow);transition:transform .2s,box-shadow .2s;}
.qbtn:hover{transform:translateY(-4px);box-shadow:0 18px 40px rgba(23,53,111,.3);}
.qbtn .ic{width:44px;height:44px;flex:0 0 44px;border-radius:10px;background:rgba(255,255,255,.12);display:flex;align-items:center;justify-content:center;}
.qbtn .ic svg{stroke:var(--gold-lite);}
.qbtn b{font-size:17px;font-weight:700;display:block;}
.qbtn span{font-size:12.5px;color:#cdd8ec;}

/* ===== 홈 3단 소식 ===== */
.news{display:grid;grid-template-columns:repeat(3,1fr);gap:38px;}
.news .head{display:flex;align-items:center;padding-bottom:12px;border-bottom:2px solid var(--blue);}
.news .head h3{font-size:17px;font-weight:800;}
.news .head .more{margin-left:auto;font-size:12.5px;color:var(--gold-deep);letter-spacing:1px;}
.news ul{list-style:none;margin-top:6px;}
.news li{display:flex;justify-content:space-between;gap:12px;padding:13px 2px;border-bottom:1px solid var(--line);font-size:14px;}
.news li a{color:#333;overflow:hidden;text-overflow:ellipsis;white-space:nowrap;}
.news li a:hover{color:var(--blue-2);}
.news li .d{color:#a3a3a3;font-size:12.5px;white-space:nowrap;}

/* ===== 카드 그리드 (전시·작가·작품 공용) ===== */
.card-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:24px;}
.card-grid.cols-4{grid-template-columns:repeat(4,1fr);}
.card{background:#fff;border:1px solid var(--line);border-radius:10px;overflow:hidden;transition:transform .2s,box-shadow .2s;display:block;}
.card:hover{transform:translateY(-5px);box-shadow:0 16px 34px rgba(20,30,60,.12);}
.card .thumb{aspect-ratio:4/3;position:relative;overflow:hidden;background:var(--paper-2);}
.card .thumb img{width:100%;height:100%;object-fit:cover;}
.card.portrait .thumb{aspect-ratio:3/4;}
.card .body{padding:15px 16px 18px;}
.card .body h3{font-family:'Nanum Myeongjo',serif;font-size:18px;font-weight:800;margin-bottom:5px;}
.card .body .meta{font-size:12.5px;color:var(--sub);}
.card .body p{font-size:13.5px;color:#555;margin-top:8px;}

/* 이미지 없을 때 플레이스홀더 (그라데이션) */
.ph{position:absolute;inset:0;display:flex;align-items:flex-end;padding:12px 14px;color:rgba(255,255,255,.9);font-size:12px;font-weight:600;}
.ph.g0{background:linear-gradient(135deg,#6b8e6b,#3f5e46);}
.ph.g1{background:linear-gradient(135deg,#c9a24a,#8a6f2f);}
.ph.g2{background:linear-gradient(135deg,#2f5a8f,#20406b);}
.ph.g3{background:linear-gradient(135deg,#b5772f,#7a4d20);}
.ph.g4{background:linear-gradient(135deg,#d98aa0,#9a5f74);}
.ph.g5{background:linear-gradient(135deg,#4a7f9a,#2f5a6b);}
.ph.g6{background:linear-gradient(135deg,#7a6b9a,#4e426b);}
.ph.g7{background:linear-gradient(135deg,#9a7b4a,#6b5230);}

/* ===== 배지 ===== */
.badge{display:inline-block;font-size:11px;padding:3px 10px;border-radius:20px;font-weight:600;}
.badge.ongoing{background:var(--dancheong,#b23b3b);background:#b23b3b;color:#fff;}
.badge.upcoming{background:var(--gold-deep);color:#fff;}
.badge.past{background:#bdb6a8;color:#fff;}

/* ===== 필터/탭 ===== */
.filters{display:flex;gap:8px;margin-bottom:26px;flex-wrap:wrap;}
.filters button{padding:8px 18px;border-radius:22px;border:1px solid var(--line);background:#fff;color:#555;font-size:14px;font-weight:600;}
.filters button.on{background:var(--blue);color:#fff;border-color:var(--blue);}
.tabs{display:flex;gap:0;border-bottom:2px solid var(--line);margin-bottom:24px;}
.tabs button{padding:12px 22px;background:none;border:none;font-size:16px;font-weight:700;color:#999;border-bottom:3px solid transparent;margin-bottom:-2px;}
.tabs button.on{color:var(--blue);border-color:var(--blue);}

/* ===== 게시판 리스트 ===== */
.list-table{width:100%;border-collapse:collapse;font-size:14.5px;}
.list-table thead th{background:var(--paper-2);color:var(--sub);font-weight:600;font-size:13px;padding:12px;border-top:2px solid var(--blue);border-bottom:1px solid var(--line);}
.list-table td{padding:15px 12px;border-bottom:1px solid var(--line);}
.list-table td.num{color:#aaa;text-align:center;width:60px;}
.list-table td.tit a{font-weight:600;color:#333;}
.list-table td.tit a:hover{color:var(--blue-2);}
.list-table td.c{text-align:center;color:var(--sub);font-size:13px;white-space:nowrap;}
.list-table tr:hover td{background:#fafbfd;}

/* ===== 페이지네이션 ===== */
.pager{display:flex;justify-content:center;gap:6px;margin-top:30px;}
.pager a,.pager span{min-width:36px;height:36px;display:flex;align-items:center;justify-content:center;border:1px solid var(--line);border-radius:8px;font-size:14px;color:#555;}
.pager .cur{background:var(--blue);color:#fff;border-color:var(--blue);}

/* ===== 도록(갤러리 상세) ===== */
.doc-cover{position:relative;border-radius:14px;overflow:hidden;min-height:360px;display:flex;align-items:flex-end;color:#fff;}
.doc-cover img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;z-index:0;}
.doc-cover .veil{position:absolute;inset:0;background:linear-gradient(180deg,rgba(0,0,0,.1),rgba(0,0,0,.75));z-index:1;}
.doc-cover .cap{position:relative;z-index:2;padding:40px 36px;}
.doc-cover .cap .period{color:var(--gold-lite);font-size:14px;font-weight:600;letter-spacing:1px;}
.doc-cover .cap h1{font-family:'Nanum Myeongjo',serif;font-size:38px;font-weight:800;margin-top:8px;}
.statement{max-width:760px;margin:40px auto;font-size:16px;color:#444;line-height:1.9;text-align:center;}
.statement .label{display:block;margin-bottom:14px;}
.artwork-row{max-width:900px;margin:0 auto;padding:44px 0;border-top:1px solid var(--line);}
.artwork-row img{width:100%;border-radius:8px;cursor:zoom-in;box-shadow:0 14px 40px rgba(0,0,0,.1);}
.artwork-row .ph{position:relative;aspect-ratio:4/3;border-radius:8px;cursor:zoom-in;}
.artwork-cap{margin-top:20px;text-align:center;}
.artwork-cap h3{font-family:'Nanum Myeongjo',serif;font-size:22px;font-weight:800;}
.artwork-cap .spec{color:var(--gold-deep);font-size:13.5px;margin:6px 0 12px;}
.artwork-cap p{color:#555;font-size:14.5px;max-width:640px;margin:0 auto;}

/* ===== 라이트박스 ===== */
.lightbox{position:fixed;inset:0;background:rgba(10,10,12,.92);z-index:100;display:none;align-items:center;justify-content:center;padding:30px;}
.lightbox.open{display:flex;}
.lightbox img{max-width:92vw;max-height:82vh;border-radius:6px;box-shadow:0 20px 60px rgba(0,0,0,.5);}
.lightbox .lb-cap{position:absolute;bottom:26px;left:0;right:0;text-align:center;color:#eee;font-size:14px;}
.lightbox .lb-close{position:absolute;top:22px;right:28px;color:#fff;font-size:34px;background:none;border:none;line-height:1;}

/* ===== 폼 ===== */
.form-wrap{max-width:440px;margin:0 auto;background:#fff;border:1px solid var(--line);border-radius:16px;padding:38px 34px;box-shadow:var(--shadow);}
.form-wrap.wide{max-width:620px;}
.form-wrap h2{font-size:24px;font-weight:800;text-align:center;margin-bottom:6px;}
.form-wrap .sub{text-align:center;color:var(--sub);font-size:14px;margin-bottom:26px;}
.field{margin-bottom:16px;}
.field label{display:block;font-size:13.5px;font-weight:600;margin-bottom:6px;color:#444;}
.field input,.field select,.field textarea{width:100%;padding:12px 14px;border:1px solid var(--line);border-radius:9px;font-size:15px;font-family:inherit;background:#fbfbfc;}
.field input:focus,.field select:focus,.field textarea:focus{outline:none;border-color:var(--blue-2);background:#fff;}
.form-wrap .btn{width:100%;justify-content:center;margin-top:10px;}
.form-links{text-align:center;margin-top:18px;font-size:13.5px;color:var(--sub);}
.form-links a{color:var(--blue-2);font-weight:600;}

/* ===== CTA 밴드 ===== */
.cta{background:var(--blue);color:#fff;border-radius:0;}
.cta .wrap{display:flex;align-items:center;justify-content:space-between;gap:20px;padding:50px 28px;}
.cta h2{font-size:26px;font-weight:800;}
.cta p{color:#c3cfe6;margin-top:6px;font-size:14.5px;}
.cta .btn.gold{color:#3a2c07;}

/* ===== 푸터 ===== */
footer.site{background:#101c33;color:#aeb9cf;font-size:13.5px;}
footer.site .wrap{display:grid;grid-template-columns:1.6fr 1fr 1fr;gap:36px;padding:52px 28px 34px;}
footer.site .fbrand img{height:40px;margin-bottom:14px;}
footer.site .fbrand{line-height:1.8;}
footer.site h4{color:#fff;font-size:14px;margin-bottom:12px;}
footer.site a{display:block;padding:4px 0;color:#aeb9cf;}
footer.site a:hover{color:var(--gold-lite);}
footer.site .copy{border-top:1px solid rgba(255,255,255,.1);color:#7f8aa3;font-size:12px;}
footer.site .copy .wrap{display:block;padding:16px 28px;}

/* ===== 유틸 ===== */
.center{text-align:center;}
.mt-40{margin-top:40px;} .mt-24{margin-top:24px;}
.empty{padding:60px 0;text-align:center;color:#999;}

/* ===== 반응형 ===== */
@media(max-width:920px){
  .quick .wrap,.news,.card-grid,.card-grid.cols-4,footer.site .wrap{grid-template-columns:1fr;}
  .cta .wrap{flex-direction:column;text-align:center;}
  .page-head h1{font-size:26px;}
  .doc-cover .cap h1{font-size:28px;}
}
@media(max-width:640px){
  .card-grid{grid-template-columns:repeat(2,1fr);}
  .list-table td.c.author{display:none;}
}