/* ============ 벌집실험실(Honey Science Lab) 공통 디자인 토큰 ============ */
@import url('https://cdn.jsdelivr.net/gh/orioncactus/pretendard@v1.3.9/dist/web/variable/pretendardvariable-dynamic-subset.min.css');

:root {
  --honey: #F5A524;
  --honey-deep: #D9860B;
  --honey-soft: #FFF1CC;
  --navy: #14213D;
  --navy-2: #24345A;
  --ink: #1B2333;
  --ink-soft: #5B6478;
  --line: #E8E1D2;
  --bg: #FFFCF5;
  --card: #FFFFFF;
  --cream: #FFF8E7;
  --blue: #3B82F6;
  --green: #22A06B;
  --red: #E0517A;
  --purple: #7C5CE0;
  --orange: #F08A24;
  --radius: 16px;
  --shadow: 0 1px 2px rgba(20, 33, 61, .06), 0 6px 20px rgba(20, 33, 61, .07);
  --shadow-lg: 0 12px 40px rgba(20, 33, 61, .14);
  --font: 'Pretendard Variable', Pretendard, -apple-system, 'Apple SD Gothic Neo', 'Malgun Gothic', sans-serif;
}

* { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; }
body {
  margin: 0; font-family: var(--font); color: var(--ink); background: var(--bg);
  line-height: 1.6; word-break: keep-all; overflow-wrap: anywhere;
}
a { color: inherit; text-decoration: none; }
img { max-width: 100%; display: block; }
button { font: inherit; cursor: pointer; }
h1, h2, h3, h4 { line-height: 1.3; margin: 0; letter-spacing: -0.02em; }
p { margin: 0; }

.wrap { width: 100%; max-width: 1240px; margin: 0 auto; padding: 0 20px; }

/* ── 상단 내비게이션 (포털·시뮬레이션 공통) ── */
.kk-nav {
  position: sticky; top: 0; z-index: 50; background: rgba(255, 252, 245, .92);
  backdrop-filter: blur(10px); border-bottom: 1px solid var(--line);
}
.kk-nav .wrap { display: flex; align-items: center; gap: 18px; height: 64px; }
.kk-logo { display: flex; align-items: center; gap: 10px; font-weight: 800; font-size: 1.32rem; color: var(--navy); flex-shrink: 0; }
.kk-logo img { width: 40px; height: 40px; object-fit: contain; }
.kk-logo .hex {
  width: 38px; height: 38px; display: grid; place-items: center; font-size: 1.3rem;
  background: var(--honey); clip-path: polygon(25% 5%, 75% 5%, 100% 50%, 75% 95%, 25% 95%, 0 50%);
}
.kk-logo small { font-weight: 600; font-size: .72rem; color: var(--ink-soft); display: block; letter-spacing: 0; margin-top: -3px; }
.kk-menu { display: flex; gap: 2px; flex: 1; min-width: 0; overflow-x: auto; scrollbar-width: none; }
.kk-menu::-webkit-scrollbar { display: none; }
.kk-menu a {
  padding: 8px 12px; border-radius: 10px; font-weight: 650; font-size: .95rem; color: var(--ink-soft); white-space: nowrap;
}
.kk-menu a:hover, .kk-menu a.on { background: var(--honey-soft); color: var(--navy); }
.kk-menu a.sensor { color: var(--green); }
.kk-menu > a, .kk-dd > a { display: inline-block; }
.kk-dd { position: relative; }
.kk-dd > a::after { content: ' ▾'; font-size: .7em; opacity: .6; }
.kk-dd-panel {
  display: none; position: absolute; top: calc(100% + 6px); left: 0; z-index: 60; background: #fff; border: 1px solid var(--line);
  border-radius: 16px; box-shadow: var(--shadow-lg); padding: 14px; gap: 18px; grid-template-columns: repeat(2, minmax(170px, 1fr));
}
.kk-dd-panel.one { grid-template-columns: minmax(150px, 1fr); }
.kk-dd-panel::before { content: ''; position: absolute; left: 0; right: 0; top: -8px; height: 8px; }
.kk-dd:hover .kk-dd-panel, .kk-dd:focus-within .kk-dd-panel { display: grid; }
.kk-dd-panel h5 { margin: 0 0 6px; font-size: .78rem; color: var(--honey-deep); letter-spacing: .02em; }
.kk-dd-panel a { display: flex !important; justify-content: space-between; align-items: center; gap: 8px; padding: 6px 10px !important; font-size: .9rem !important; color: var(--ink) !important; }
.kk-dd-panel a.none { color: #A3A9B6 !important; }
.kk-dd-panel a i { font-style: normal; font-size: .72rem; background: var(--honey); color: var(--navy); border-radius: 99px; padding: 0 7px; font-weight: 800; }
@media (min-width: 901px) { .kk-menu { overflow: visible; } }
@media (max-width: 900px) { .kk-dd-panel { display: none !important; } .kk-dd > a::after { content: ''; } }

.btn {
  display: inline-flex; align-items: center; justify-content: center; gap: 6px;
  padding: 10px 16px; border-radius: 12px; border: 1px solid var(--line); background: var(--card);
  font-weight: 700; color: var(--navy); transition: .15s; white-space: nowrap;
}
.btn:hover { border-color: var(--honey); box-shadow: var(--shadow); }
.btn.primary { background: var(--honey); border-color: var(--honey); color: var(--navy); }
.btn.primary:hover { background: var(--honey-deep); color: #fff; }
.btn.dark { background: var(--navy); border-color: var(--navy); color: #fff; }
.btn.sm { padding: 6px 11px; font-size: .86rem; border-radius: 10px; }

.chip {
  display: inline-flex; align-items: center; gap: 4px; padding: 3px 9px; border-radius: 999px;
  font-size: .78rem; font-weight: 700; background: var(--cream); color: var(--ink-soft); border: 1px solid var(--line);
}

.kk-footer { margin-top: 64px; padding: 32px 0 40px; border-top: 1px solid var(--line); color: var(--ink-soft); font-size: .88rem; }
.kk-footer .wrap { display: flex; flex-wrap: wrap; gap: 12px 24px; justify-content: space-between; }

@media (max-width: 640px) {
  .wrap { padding: 0 16px; }
  .kk-nav .wrap { height: 56px; gap: 10px; }
  .kk-logo small { display: none; }
}

/* ============ 벌집 디자인 (Honey Science Lab) ============ */
:root {
  --hex-pointy: polygon(50% 0, 100% 25%, 100% 75%, 50% 100%, 0 75%, 0 25%);
  --hex-flat: polygon(25% 2%, 75% 2%, 100% 50%, 75% 98%, 25% 98%, 0 50%);
  --comb: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='56' height='97' viewBox='0 0 56 97'%3E%3Cpath d='M28 1 L55 16.5 L55 47.5 L28 63 L1 47.5 L1 16.5 Z M28 63 L28 97 M1 16.5 L-26 1 M55 16.5 L82 1' fill='none' stroke='%23F5E9CC' stroke-width='1'/%3E%3C/svg%3E");
}
body { background-color: var(--bg); background-image: var(--comb); background-size: 56px 97px; background-attachment: fixed; }
.kk-logo { gap: 9px; }
.kk-logo img { width: 42px; height: 42px; }
.kk-logo > span { font-size: 1.22rem; letter-spacing: -0.04em; line-height: 1.05; }
.kk-logo small { font-size: .6rem !important; font-weight: 800 !important; letter-spacing: .14em !important; color: var(--honey-deep) !important; margin-top: 2px !important; }
.hex-ic { display: inline-grid; place-items: center; width: 40px; height: 44px; clip-path: var(--hex-pointy); background: var(--honey); color: var(--navy); font-size: 1.15rem; flex-shrink: 0; }
.hex-ic.soft { background: var(--honey-soft); }
.hex-ic.navy { background: var(--navy); color: #fff; }
.sec-title h2 { display: flex; align-items: center; gap: 10px; }
.sec-title h2::before { content: ''; width: 16px; height: 18px; clip-path: var(--hex-pointy); background: var(--honey); flex-shrink: 0; }
.kk-footer { background: rgba(255, 248, 231, .85); }

.kk-footer .wrap { align-items: center; }
.foot-brand { font-weight: 800; color: var(--navy); }
.foot-brand small { font-weight: 700; color: var(--honey-deep); letter-spacing: .06em; font-size: .78em; margin-left: 4px; }
.foot-links { display: flex; gap: 16px; }
.foot-links a:hover { color: var(--honey-deep); text-decoration: underline; }