:root{
  --brand-blue: #1212a1;
  --brand-blue-600: #0f1790;
  --bg: #ffffff;
  --muted: #6b6b6b;
  --gap: 20px;
  --radius: 10px;
  --card-shadow: 0 6px 18px rgba(16,24,72,0.08);
}
*{box-sizing:border-box;margin:0;padding:0}
@import url('https://fonts.googleapis.com/css2?family=Montserrat:wght@500;700&family=Noto+Sans+KR:wght@300;400;700&display=swap');
body{font-family: 'Noto Sans KR', 'Montserrat', Arial, sans-serif;color:#172033;line-height:1.6;background:var(--bg)}
.container{max-width:1100px;margin:0 auto;padding:36px 20px}

/* Header / Nav */
.site-header{background:transparent}
.site-header .container{display:flex;align-items:center;justify-content:space-between;padding:18px 20px}
.logo{font-weight:700;color:var(--brand-blue);font-size:20px}
.navbar{background:transparent}
.nav-list{display:flex;gap:20px;list-style:none;padding:0;margin:0}
.nav-list a{display:inline-block;padding:6px 10px;color:var(--brand-blue);text-decoration:none;font-weight:600;border-radius:8px;transition:all .18s ease;font-size:14px}
.nav-list a:hover, .nav-list a:focus{background:rgba(18,18,161,0.06);transform:translateY(-2px);box-shadow:0 6px 14px rgba(18,18,161,0.06)}

/* Hero */
.hero{background:linear-gradient(180deg, #fbfdff 0%, #f1f6ff 100%);padding:56px 0;border-bottom:1px solid rgba(16,24,72,0.04)}
.hero .container{display:flex;gap:32px;align-items:center}
.hero-left{flex:1}
.hero-right{flex:1;text-align:right}
.hero h1{color:var(--brand-blue);font-size:36px;margin-bottom:8px}
.hero p{color:var(--muted);font-size:16px;margin-bottom:16px}
.hero .hero-img{width:48%;border-radius:12px;box-shadow:var(--card-shadow)}
.hero .hero-cta{display:inline-block;background:var(--brand-blue);color:#fff;padding:10px 18px;border-radius:8px;text-decoration:none;font-weight:700}

/* Two column */
.two-col{display:flex;gap:12px;align-items:center}
.two-col img{margin-left:56px;max-width:100%;height:auto;border-radius:8px}

/* Services */
.service-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:18px;margin-top:18px}
.service-card{background:#fff;padding:18px;border-radius:12px;box-shadow:var(--card-shadow);min-height:110px}
.service-card h3{margin-bottom:8px;color:var(--brand-blue);font-size:16px}
.service-card p{color:var(--muted);font-size:14px}

/* Footer */
.site-footer{background:#0f1724;color:#c9d2e8;padding:28px 0;margin-top:36px}
.footer-content{max-width:1100px;margin:0 auto;display:flex;flex-direction:column;gap:6px;text-align:center;font-size:14px}
.footer-small{opacity:0.9;color:#aeb8d3;font-size:13px}
.footer-brand{font-weight:700;color:#fff}
.footer-copy{opacity:0.85}

/* Map */
.map-layout{display:flex;gap:20px;flex-wrap:wrap;align-items:flex-start}
.map-column{flex:0 1 400px;min-width:280px;max-width:400px;overflow:hidden;margin-right: 24px;}
.guide-column{flex:1 1 280px;min-width:260px}
.map-column .root_daum_roughmap,
.map-column .wrap_map{width:100% !important;max-width:400px}

/* Timeline */
.timeline{background:linear-gradient(180deg, #fbfdff 0%, #f1f6ff 100%);color:#172033;padding:40px 0;border-bottom:1px solid rgba(16,24,72,0.04)}
.timeline h2{color:var(--brand-blue);margin-bottom:18px}
.timeline .entry{background:#fff;padding:18px;margin:12px 0;border-radius:8px;box-shadow:var(--card-shadow)}
.timeline .entry strong{color:var(--brand-blue);display:block;margin-bottom:6px}
.timeline .entry p{color:var(--muted)}

/* Accessibility focus */
a:focus{outline:3px solid rgba(18,18,161,0.12);outline-offset:2px}

/* Utility: prevent text wrapping for single-line headings */
.nowrap{white-space:nowrap;overflow:hidden;text-overflow:ellipsis}

/* Contact Page: Header */
.contact-hero{background:linear-gradient(135deg, #fbfdff 0%, #eef3ff 100%);border-bottom:1px solid rgba(18,18,161,0.1)}
.contact-header{text-align:center;padding:20px 0}
.contact-header h1{color:var(--brand-blue);font-size:32px;margin-bottom:12px}
.contact-header p{color:var(--muted);font-size:16px;max-width:600px;margin:0 auto}

/* Contact Cards */
.contact-cards{display:grid;grid-template-columns:repeat(4,1fr);gap:16px;margin:28px 0}
.contact-card{background:#fff;padding:24px;border-radius:12px;box-shadow:var(--card-shadow);text-align:center;transition:all 0.3s ease}
.contact-card:hover{transform:translateY(-4px);box-shadow:0 12px 24px rgba(18,18,161,0.12)}
.contact-card-icon{width:56px;height:56px;background:rgba(18,18,161,0.08);border-radius:50%;display:flex;align-items:center;justify-content:center;margin:0 auto 16px;font-size:24px;color:var(--brand-blue)}
.contact-card h3{color:var(--brand-blue);font-size:16px;margin-bottom:8px;font-weight:700}
.contact-info{font-size:16px;font-weight:600;color:#172033;margin:12px 0}
.contact-info a{color:var(--brand-blue);text-decoration:none;border-bottom:2px solid var(--brand-blue);transition:all 0.2s ease}
.contact-info a:hover{color:var(--brand-blue-600)}
.contact-detail{font-size:13px;color:var(--muted);margin:0}
.link-arrow{font-weight:600;display:inline-block;transition:transform 0.2s ease}
.link-arrow:hover{transform:translateX(3px)}

/* Board Section */
.board-section{background:linear-gradient(180deg, #fbfdff 0%, #f1f6ff 100%);margin-top:28px;border-top:1px solid rgba(18,18,161,0.08)}
.board-header{text-align:center;margin-bottom:28px;padding-top:8px}
.board-header h2{color:var(--brand-blue);font-size:28px;margin-bottom:8px}
.board-header p{color:var(--muted);font-size:15px}
.board-content{display:grid;grid-template-columns:1fr 1fr;gap:32px;max-width:1200px;margin:0 auto}

/* Form Styles */
.form-group{margin-bottom:18px}
.form-label{display:block;font-size:14px;font-weight:600;color:#172033;margin-bottom:6px}
.required{color:#e63946;font-weight:700}
.optional{color:var(--muted);font-weight:400;font-size:13px}
.form-input,.form-textarea{width:100%;padding:10px 14px;font-family:inherit;font-size:14px;border:1px solid #ddd;border-radius:8px;background:#fff;color:#172033;transition:all 0.2s ease}
.form-input:focus,.form-textarea:focus{outline:none;border-color:var(--brand-blue);box-shadow:0 0 0 3px rgba(18,18,161,0.1)}
.form-input::placeholder,.form-textarea::placeholder{color:#aaa}
.form-textarea{resize:vertical;line-height:1.5}
.form-checkbox{display:flex;align-items:center;gap:8px;cursor:pointer;font-size:14px;color:#172033}
.form-checkbox input{cursor:pointer;width:18px;height:18px;accent-color:var(--brand-blue)}

/* Button Styles */
.btn{display:inline-block;padding:11px 22px;border:none;border-radius:8px;font-size:14px;font-weight:600;cursor:pointer;transition:all 0.2s ease;text-decoration:none;text-align:center}
.btn-primary{background:var(--brand-blue);color:#fff;width:100%}
.btn-primary:hover{background:var(--brand-blue-600);transform:translateY(-2px);box-shadow:0 6px 16px rgba(18,18,161,0.2)}
.btn-primary:active{transform:translateY(0);box-shadow:0 2px 8px rgba(18,18,161,0.15)}

/* Form Feedback */
.form-feedback{margin-top:12px;padding:12px 14px;border-radius:8px;font-size:14px;display:none}
.form-feedback.success{background:#d4edda;color:#155724;border:1px solid #c3e6cb;display:block}
.form-feedback.error{background:#f8d7da;color:#721c24;border:1px solid #f5c6cb;display:block}

/* Board Form Wrapper */
.board-form-wrapper{background:#fff;padding:24px;border-radius:12px;box-shadow:var(--card-shadow)}
.board-form{display:flex;flex-direction:column}

/* Posts List */
.board-list-wrapper{background:#fff;padding:24px;border-radius:12px;box-shadow:var(--card-shadow)}
.board-list-wrapper h3{color:var(--brand-blue);font-size:16px;margin-bottom:16px;font-weight:700}
.posts-list{display:flex;flex-direction:column;gap:12px}
.post-item{padding:14px;border:1px solid rgba(18,18,161,0.06);border-radius:8px;background:#fafbfc;transition:all 0.2s ease}
.post-item:hover{background:#f5f8ff;border-color:rgba(18,18,161,0.15)}
.post-header{display:flex;justify-content:space-between;align-items:flex-start;margin-bottom:8px;font-size:13px}
.post-author{font-weight:600;color:#172033}
.post-date{color:var(--muted)}
.post-secret-badge{background:var(--brand-blue);color:#fff;padding:2px 8px;border-radius:4px;font-size:11px;font-weight:600}
.post-content{color:#172033;font-size:14px;line-height:1.5;margin-bottom:8px}
.post-reply{margin-top:12px;padding:12px;border-left:3px solid var(--brand-blue);background:rgba(18,18,161,0.03);border-radius:4px;font-size:13px}
.post-reply strong{color:var(--brand-blue);display:block;margin-bottom:4px}

/* Pagination */
.pagination{display:flex;gap:6px;justify-content:center;margin-top:16px}
.pagination button{padding:6px 12px;border:1px solid #ddd;background:#fff;border-radius:4px;cursor:pointer;font-size:13px;color:var(--brand-blue);transition:all 0.2s ease}
.pagination button:hover{background:rgba(18,18,161,0.06);border-color:var(--brand-blue)}
.pagination button.active{background:var(--brand-blue);color:#fff;border-color:var(--brand-blue)}

/* Responsive */
@media(max-width:900px){
  .service-grid{grid-template-columns:repeat(2,1fr)}
  .contact-cards{grid-template-columns:repeat(2,1fr)}
  .board-content{grid-template-columns:1fr;gap:24px}
  .hero .hero-img{display:none}
  .hero .container{flex-direction:column;align-items:flex-start}
  .hero-left,
  .hero-right{flex:unset;width:100%;text-align:left}
  .map-column,
  .guide-column{max-width:100%;flex-basis:100%}
}
@media(max-width:600px){
  .service-grid{grid-template-columns:1fr}
  .contact-cards{grid-template-columns:1fr}
  .nav-list{gap:10px}
  .logo{font-size:18px}
  .contact-header h1{font-size:24px}
  .contact-card{padding:18px}
  .board-form-wrapper,.board-list-wrapper{padding:18px}
}