:root{
  --hkdi-navy:#071c2f;
  --hkdi-navy2:#0c2b45;
  --hkdi-gold:#c6a15b;
  --hkdi-gold2:#e0c47f;
  --hkdi-paper:#f7f2e8;
  --hkdi-paper2:#fffaf0;
  --hkdi-ink:#172033;
  --hkdi-muted:#667085;
  --hkdi-line:#ded4c1;
}
*{box-sizing:border-box}
body.hkdi-body, body{font-family:'Noto Sans KR','Apple SD Gothic Neo','Malgun Gothic',system-ui,sans-serif;background:linear-gradient(180deg,#f8f4eb 0,#fff 55%,#f7f2e8 100%);color:var(--hkdi-ink)}
.hkdi-container{max-width:1220px;margin:0 auto;padding-left:22px;padding-right:22px}
.hkdi-topnav{background:linear-gradient(90deg,#061827,#0b253a 55%,#071c2f);color:#fff;border-bottom:1px solid rgba(198,161,91,.35);position:sticky;top:0;z-index:50;box-shadow:0 10px 30px rgba(7,28,47,.16)}
.hkdi-nav-inner{max-width:1280px;margin:0 auto;padding:16px 24px;display:flex;align-items:center;justify-content:space-between;gap:20px}
.hkdi-brand{display:flex;align-items:center;gap:12px;text-decoration:none;color:white;min-width:250px}
.hkdi-brand-mark{width:44px;height:44px;border:1px solid rgba(224,196,127,.55);border-radius:50%;display:grid;place-items:center;color:var(--hkdi-gold2);background:rgba(255,255,255,.05);font-size:20px}
.hkdi-brand-title{font-size:22px;font-weight:800;letter-spacing:-.03em;line-height:1.1}
.hkdi-brand-sub{font-size:11px;color:#d7c7a1;letter-spacing:.08em;text-transform:uppercase;margin-top:3px}
.hkdi-nav-links{display:flex;align-items:center;gap:22px;font-size:15px;font-weight:650;white-space:nowrap}
.hkdi-nav-links a,.hkdi-nav-links button{color:#fff;text-decoration:none;background:none;border:0;cursor:pointer;font:inherit;padding:8px 0;opacity:.95}
.hkdi-nav-links a:hover,.hkdi-nav-links button:hover{color:var(--hkdi-gold2)}
.hkdi-nav-dropdown{position:relative}
.hkdi-nav-menu{display:none;position:absolute;top:100%;left:0;min-width:230px;background:#fff;color:#172033;border:1px solid var(--hkdi-line);border-radius:14px;box-shadow:0 18px 40px rgba(0,0,0,.16);padding:8px;z-index:100}
.hkdi-nav-dropdown:hover .hkdi-nav-menu{display:block}
.hkdi-nav-menu a{display:block;color:#172033!important;padding:10px 12px;border-radius:10px;font-size:14px;text-decoration:none}
.hkdi-nav-menu a:hover{background:#f4eee2;color:#071c2f!important}
.hkdi-nav-user{display:flex;align-items:center;gap:10px;font-size:13px;white-space:nowrap}
.hkdi-pill{display:inline-flex;align-items:center;gap:7px;border:1px solid rgba(198,161,91,.42);background:rgba(255,255,255,.08);color:#fff;border-radius:999px;padding:7px 11px;text-decoration:none}
.hkdi-pill.gold{background:var(--hkdi-gold);border-color:var(--hkdi-gold);color:#071c2f;font-weight:800}
.hkdi-mobile-toggle{display:none;background:none;border:1px solid rgba(255,255,255,.25);border-radius:10px;color:white;padding:8px 10px}
.hkdi-mobile-panel{display:none;background:#081b2b;border-top:1px solid rgba(255,255,255,.1);padding:12px 22px}
.hkdi-mobile-panel a{display:block;color:#fff;text-decoration:none;padding:10px 0;border-bottom:1px solid rgba(255,255,255,.08)}
.hkdi-hero{position:relative;overflow:hidden;border-bottom:1px solid var(--hkdi-line);background:radial-gradient(circle at 20% 20%,rgba(198,161,91,.22),transparent 32%),linear-gradient(135deg,#f8f1e4 0,#fffaf0 45%,#eef4f8 100%)}
.hkdi-hero:after{content:"";position:absolute;right:-90px;top:-120px;width:430px;height:430px;border:1px solid rgba(198,161,91,.24);border-radius:50%;background:repeating-radial-gradient(circle,rgba(198,161,91,.12) 0 1px,transparent 1px 16px);opacity:.7}
.hkdi-hero-inner{max-width:1220px;margin:0 auto;padding:74px 22px 52px;position:relative;z-index:1;display:grid;grid-template-columns:1.1fr .9fr;gap:36px;align-items:center}
.hkdi-kicker{color:#9a7430;font-weight:800;letter-spacing:.08em;text-transform:uppercase;font-size:13px;margin-bottom:12px}
.hkdi-hero h1{font-size:52px;line-height:1.08;letter-spacing:-.055em;margin:0 0 18px;color:#071c2f}
.hkdi-hero p{font-size:18px;line-height:1.85;color:#344054;margin:0 0 26px}
.hkdi-actions{display:flex;flex-wrap:wrap;gap:12px}
.hkdi-btn{display:inline-flex;align-items:center;justify-content:center;gap:8px;padding:13px 18px;border-radius:14px;text-decoration:none;font-weight:800;border:1px solid var(--hkdi-line);background:#fff;color:#071c2f;box-shadow:0 4px 12px rgba(7,28,47,.06)}
.hkdi-btn.primary{background:#071c2f;color:#fff;border-color:#071c2f}
.hkdi-btn.gold{background:#c6a15b;color:#071c2f;border-color:#c6a15b}
.hkdi-visual{border:1px solid var(--hkdi-line);border-radius:26px;background:rgba(255,255,255,.72);box-shadow:0 24px 60px rgba(7,28,47,.12);padding:22px;position:relative;overflow:hidden}
.hkdi-visual-grid{display:grid;grid-template-columns:1fr 1fr;gap:12px}
.hkdi-visual-card{background:#fff;border:1px solid #eadfcb;border-radius:18px;padding:18px;min-height:135px;box-shadow:0 10px 24px rgba(7,28,47,.06)}
.hkdi-visual-card i{font-size:28px;color:#b58a3f;margin-bottom:12px}.hkdi-visual-card strong{display:block;color:#071c2f;font-size:18px;margin-bottom:7px}.hkdi-visual-card span{font-size:13px;color:#667085;line-height:1.55}
.hkdi-section{padding:44px 0}.hkdi-section-title{display:flex;align-items:end;justify-content:space-between;gap:18px;margin-bottom:20px}.hkdi-section-title h2{font-size:28px;letter-spacing:-.04em;margin:0;color:#071c2f}.hkdi-section-title p{margin:6px 0 0;color:#667085;line-height:1.6}
.hkdi-card-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:18px}.hkdi-card{border:1px solid var(--hkdi-line);background:rgba(255,255,255,.86);border-radius:20px;padding:24px;box-shadow:0 10px 28px rgba(7,28,47,.06);text-decoration:none;color:inherit;transition:.18s ease}.hkdi-card:hover{transform:translateY(-3px);box-shadow:0 18px 42px rgba(7,28,47,.12)}.hkdi-card .icon{width:50px;height:50px;border-radius:16px;display:grid;place-items:center;background:#071c2f;color:#e0c47f;margin-bottom:16px;font-size:20px}.hkdi-card h3{font-size:21px;margin:0 0 9px;color:#071c2f}.hkdi-card p{font-size:14px;color:#667085;line-height:1.75;margin:0}.hkdi-card .more{display:flex;justify-content:space-between;align-items:center;margin-top:18px;color:#9a7430;font-weight:800}
.hkdi-panel{background:#fff;border:1px solid var(--hkdi-line);border-radius:22px;box-shadow:0 10px 28px rgba(7,28,47,.06);overflow:hidden}.hkdi-panel-head{padding:20px 22px;border-bottom:1px solid #eadfcb;background:linear-gradient(90deg,#fffaf0,#fff)}.hkdi-panel-head h2,.hkdi-panel-head h3{margin:0;color:#071c2f;letter-spacing:-.035em}.hkdi-panel-body{padding:22px}
.hkdi-board-hero{background:linear-gradient(135deg,#071c2f,#0b304e 60%,#132f45);color:white;padding:54px 0;border-bottom:4px solid var(--hkdi-gold)}.hkdi-board-hero h1{font-size:40px;letter-spacing:-.05em;margin:0 0 10px}.hkdi-board-hero p{color:#d9e3ea;line-height:1.8;margin:0}.hkdi-searchbar{display:flex;gap:10px;margin-top:22px}.hkdi-searchbar input,.hkdi-searchbar select{background:#fff;border:1px solid var(--hkdi-line);border-radius:13px;padding:12px 14px;color:#172033}.hkdi-searchbar input{flex:1}.hkdi-category-grid{display:grid;grid-template-columns:repeat(5,1fr);gap:14px}.hkdi-cat-card{background:#fff;border:1px solid var(--hkdi-line);border-radius:18px;padding:18px;text-decoration:none;color:#172033;box-shadow:0 8px 22px rgba(7,28,47,.05)}.hkdi-cat-card:hover{border-color:#c6a15b;transform:translateY(-2px)}.hkdi-cat-card i{color:#b58a3f;font-size:20px}.hkdi-cat-card strong{display:block;margin:10px 0 6px;color:#071c2f}.hkdi-cat-card span{font-size:12px;color:#667085;line-height:1.5}.hkdi-cat-count{display:inline-flex;margin-top:10px;padding:4px 8px;border-radius:999px;background:#f4eee2;color:#7a5a1f;font-size:12px;font-weight:800}
.hkdi-post-list{display:flex;flex-direction:column;gap:13px}.hkdi-post-item{display:grid;grid-template-columns:1fr auto;gap:18px;align-items:center;background:#fff;border:1px solid var(--hkdi-line);border-radius:18px;padding:18px;text-decoration:none;color:inherit}.hkdi-post-item:hover{border-color:#c6a15b;box-shadow:0 12px 28px rgba(7,28,47,.08)}.hkdi-post-meta{display:flex;flex-wrap:wrap;gap:10px;font-size:12px;color:#667085;margin-top:8px}.hkdi-badge{display:inline-flex;align-items:center;gap:5px;border-radius:999px;padding:4px 8px;font-size:12px;font-weight:800;background:#f3ead8;color:#8a6426}.hkdi-badge.navy{background:#071c2f;color:#fff}.hkdi-badge.red{background:#fff0f0;color:#b42318}.hkdi-badge.blue{background:#eef6ff;color:#175cd3}.hkdi-post-title{font-size:18px;font-weight:800;color:#071c2f;margin:0}.hkdi-post-excerpt{font-size:14px;color:#667085;line-height:1.65;margin:7px 0 0}.hkdi-post-stats{display:flex;gap:10px;color:#667085;font-size:13px;white-space:nowrap}.hkdi-write-shell{max-width:980px;margin:0 auto}.hkdi-form-card{background:#fff;border:1px solid var(--hkdi-line);border-radius:24px;box-shadow:0 14px 36px rgba(7,28,47,.08);padding:26px}.hkdi-form-grid{display:grid;grid-template-columns:1fr 1fr;gap:18px}.hkdi-field{margin-bottom:18px}.hkdi-field label{display:block;font-weight:800;color:#071c2f;margin-bottom:8px}.hkdi-field input,.hkdi-field select,.hkdi-field textarea{width:100%;border:1px solid #d9cfbd;border-radius:13px;padding:12px 13px;background:#fff;color:#172033}.hkdi-field small{display:block;color:#667085;margin-top:6px;line-height:1.5}.hkdi-view{max-width:980px;margin:0 auto}.hkdi-view-article{background:#fff;border:1px solid var(--hkdi-line);border-radius:24px;box-shadow:0 14px 36px rgba(7,28,47,.08);overflow:hidden}.hkdi-view-head{padding:28px;border-bottom:1px solid #eadfcb;background:linear-gradient(90deg,#fffaf0,#fff)}.hkdi-view-head h1{font-size:32px;letter-spacing:-.045em;margin:12px 0;color:#071c2f}.hkdi-content{padding:30px;font-size:17px;line-height:1.9;color:#1d2939}.hkdi-content img{max-width:100%;height:auto;border-radius:12px}.hkdi-filebox{border-top:1px solid #eadfcb;padding:20px 28px;background:#fffaf0}.hkdi-filebox a{display:inline-flex;align-items:center;gap:8px;margin:6px 8px 6px 0;padding:9px 12px;background:#fff;border:1px solid #e0d3bd;border-radius:12px;color:#071c2f;text-decoration:none}.hkdi-comment{background:#fff;border:1px solid var(--hkdi-line);border-radius:18px;padding:16px}.hkdi-comment + .hkdi-comment{margin-top:12px}.hkdi-empty{padding:36px;text-align:center;color:#667085;background:#fff;border:1px dashed #d9cfbd;border-radius:18px}.hkdi-footer{background:#071c2f;color:#d9e3ea;margin-top:70px;border-top:3px solid var(--hkdi-gold)}.hkdi-footer-inner{max-width:1220px;margin:0 auto;padding:34px 22px;display:flex;justify-content:space-between;gap:20px;flex-wrap:wrap}.hkdi-footer a{color:#e0c47f;text-decoration:none}.hkdi-footer small{color:#9fb0bf}.note-editor.note-frame{border-color:#d9cfbd!important;border-radius:16px!important;overflow:hidden}.note-toolbar{background:#fffaf0!important}
@media(max-width:980px){.hkdi-nav-links,.hkdi-nav-user{display:none}.hkdi-mobile-toggle{display:block}.hkdi-mobile-panel.open{display:block}.hkdi-hero-inner{grid-template-columns:1fr;padding:52px 22px}.hkdi-hero h1{font-size:38px}.hkdi-card-grid{grid-template-columns:1fr}.hkdi-category-grid{grid-template-columns:repeat(2,1fr)}.hkdi-form-grid{grid-template-columns:1fr}.hkdi-post-item{grid-template-columns:1fr}.hkdi-searchbar{flex-direction:column}.hkdi-brand-title{font-size:18px}.hkdi-brand{min-width:0}}
@media(max-width:560px){.hkdi-container{padding-left:16px;padding-right:16px}.hkdi-nav-inner{padding:13px 16px}.hkdi-hero h1{font-size:32px}.hkdi-hero p{font-size:16px}.hkdi-category-grid{grid-template-columns:1fr}.hkdi-visual-grid{grid-template-columns:1fr}.hkdi-view-head h1{font-size:25px}.hkdi-content{padding:22px;font-size:16px}.hkdi-form-card{padding:18px}}

/* =========================================================
   HKDI v1.1 header/footer layout correction
   - remove browser default margins
   - force header/nav/hero/footer to fill the viewport width
   - style the legacy footer without Tailwind dependency
   ========================================================= */
html, body { margin:0 !important; padding:0 !important; width:100%; min-height:100%; }
body.hkdi-body, body { overflow-x:hidden; }
.hkdi-topnav, .hkdi-hero, .hkdi-footer { width:100vw; margin-left:calc(50% - 50vw); margin-right:calc(50% - 50vw); }
.hkdi-topnav { left:0; right:0; }
.hkdi-nav-inner { max-width:none; width:100%; padding-left:clamp(18px,4vw,72px); padding-right:clamp(18px,4vw,72px); }
.hkdi-brand { min-width:330px; }
.hkdi-nav-links { flex:1; justify-content:center; gap:clamp(14px,1.5vw,26px); }
.hkdi-nav-user { min-width:190px; justify-content:flex-end; }
.hkdi-hero-inner, .hkdi-container, .hkdi-footer-inner { max-width:1280px; }
.hkdi-footer { margin-top:70px; background:linear-gradient(135deg,#061827 0%,#071c2f 48%,#0b253a 100%); color:#d9e3ea; border-top:3px solid var(--hkdi-gold); box-shadow:0 -18px 40px rgba(7,28,47,.10); }
.hkdi-footer-inner { margin:0 auto; padding:40px 24px 26px; display:grid; grid-template-columns:1.2fr .8fr .8fr; gap:28px; align-items:start; }
.hkdi-footer-brand { display:flex; gap:14px; align-items:flex-start; }
.hkdi-footer-mark { width:46px; height:46px; border-radius:50%; border:1px solid rgba(224,196,127,.55); display:grid; place-items:center; color:var(--hkdi-gold2); background:rgba(255,255,255,.06); flex:0 0 auto; }
.hkdi-footer h2, .hkdi-footer h3 { margin:0 0 12px; color:#fff; letter-spacing:-.035em; }
.hkdi-footer h2 { font-size:20px; }
.hkdi-footer h3 { font-size:16px; }
.hkdi-footer p { margin:0; line-height:1.8; color:#c8d4dd; }
.hkdi-footer small { color:#9fb0bf; line-height:1.7; }
.hkdi-footer-links { display:grid; gap:9px; }
.hkdi-footer a { color:#e0c47f; text-decoration:none; }
.hkdi-footer a:hover { color:#fff2bd; }
.hkdi-footer-contact { display:grid; gap:8px; color:#c8d4dd; }
.hkdi-footer-contact span { display:flex; gap:9px; align-items:flex-start; line-height:1.55; }
.hkdi-footer-contact i { color:#e0c47f; margin-top:3px; min-width:16px; }
.hkdi-footer-bottom { border-top:1px solid rgba(255,255,255,.12); margin-top:4px; padding:16px 24px 22px; max-width:1280px; margin-left:auto; margin-right:auto; display:flex; justify-content:space-between; gap:16px; flex-wrap:wrap; color:#9fb0bf; font-size:13px; }
.hkdi-footer-sns { display:flex; gap:10px; margin-top:14px; }
.hkdi-footer-sns a { width:34px; height:34px; border-radius:50%; display:grid; place-items:center; border:1px solid rgba(224,196,127,.38); background:rgba(255,255,255,.05); color:#e0c47f; }
.hkdi-footer-sns a:hover { background:rgba(224,196,127,.16); color:#fff; }
@media(max-width:1120px){ .hkdi-brand{min-width:270px}.hkdi-nav-user{min-width:0}.hkdi-nav-links{gap:14px} }
@media(max-width:980px){ .hkdi-nav-inner{padding-left:16px;padding-right:16px}.hkdi-brand{min-width:0}.hkdi-footer-inner{grid-template-columns:1fr}.hkdi-footer-bottom{display:block}.hkdi-footer-bottom span{display:block;margin-top:8px} }