/* ============================================================
   YTO — 천상열차분야지도 컨셉
   깊은 남색 밤하늘 / 달빛 아이보리 / 금박. 시그니처: 별자리 아이콘.
   ============================================================ */
:root{
  --night:#131B2E;        /* 밤하늘 */
  --night-deep:#0C1220;   /* 심야 */
  --moonlight:#EFE9D8;    /* 달빛 아이보리 (본문) */
  --moon-dim:#A9A493;     /* 흐린 달빛 (보조 텍스트) */
  --gold:#C9A961;         /* 금박 */
  --gold-soft:#8F7B4E;
  --astral:#8FA3C2;       /* 성운 은청색 */
  --rule:rgba(201,169,97,0.18);
  --card:rgba(21,30,49,0.72);
}
*{box-sizing:border-box;margin:0;padding:0}
html{scroll-behavior:smooth}
body{
  background:linear-gradient(180deg,var(--night-deep) 0%,var(--night) 34%,#182238 100%);
  min-height:100vh;color:var(--moonlight);
  font-family:'Pretendard',-apple-system,sans-serif;
  line-height:1.75;-webkit-font-smoothing:antialiased;
}
/* 별밭: 3겹 점 그라디언트 */
.starfield{position:fixed;inset:0;z-index:-1;pointer-events:none;
  background-image:
    radial-gradient(1px 1px at 12% 18%,rgba(239,233,216,.8),transparent),
    radial-gradient(1px 1px at 68% 8%,rgba(239,233,216,.6),transparent),
    radial-gradient(1.5px 1.5px at 84% 32%,rgba(201,169,97,.7),transparent),
    radial-gradient(1px 1px at 32% 44%,rgba(239,233,216,.5),transparent),
    radial-gradient(1px 1px at 52% 70%,rgba(143,163,194,.6),transparent),
    radial-gradient(1.5px 1.5px at 8% 78%,rgba(239,233,216,.55),transparent),
    radial-gradient(1px 1px at 92% 84%,rgba(201,169,97,.5),transparent),
    radial-gradient(1px 1px at 44% 92%,rgba(239,233,216,.45),transparent);
}
@media (prefers-reduced-motion:no-preference){
  .starfield{animation:twinkle 7s ease-in-out infinite alternate}
  @keyframes twinkle{from{opacity:.65}to{opacity:1}}
}

/* 헤더 */
.site-header{max-width:760px;margin:0 auto;padding:22px 24px 0}
.logo{text-decoration:none;display:inline-flex;align-items:baseline;gap:9px}
.logo-star{color:var(--gold);font-size:15px}
.logo-name{font-family:'IBM Plex Mono',monospace;font-weight:500;font-size:15px;letter-spacing:.22em;color:var(--moonlight)}
.logo-sub{font-family:'Gowun Batang',serif;font-size:12.5px;color:var(--moon-dim);letter-spacing:.06em}

.wrap{max-width:760px;margin:0 auto;padding:0 24px 90px}

/* 히어로 */
.hero{padding:52px 0 40px;text-align:center;position:relative}
.moon{width:96px;height:96px;margin:0 auto 6px;display:block}
.eyebrow{font-family:'IBM Plex Mono',monospace;font-size:11.5px;letter-spacing:.26em;color:var(--gold);text-transform:uppercase;margin:14px 0 16px}
.hero h1{font-family:'Song Myung',serif;font-weight:400;font-size:38px;line-height:1.42;letter-spacing:.01em;color:var(--moonlight);margin-bottom:16px}
.hero .sub{font-size:15px;color:var(--moon-dim);max-width:460px;margin:0 auto}
.hero .sub a{color:var(--astral)}

/* 검색 */
.search-box{margin:30px auto 0;max-width:480px;display:flex;border:1px solid var(--rule);border-radius:3px;background:rgba(12,18,32,.6);backdrop-filter:blur(4px)}
.search-box input{flex:1;padding:14px 16px;border:none;background:transparent;color:var(--moonlight);font-family:'Pretendard',sans-serif;font-size:15px;outline:none}
.search-box input::placeholder{color:rgba(169,164,147,.55)}
.search-box input:focus-visible{outline:2px solid var(--gold);outline-offset:-2px}
.search-box button{background:var(--gold);color:var(--night-deep);border:none;padding:0 24px;font-size:14px;font-weight:700;cursor:pointer;font-family:'Pretendard',sans-serif;letter-spacing:.02em}
.search-box button:hover{background:#D8BC7A}

/* 섹션: 별자리 구분선 */
section{margin-top:64px}
.section-head{display:flex;align-items:center;gap:14px;margin-bottom:20px}
.section-head::after{content:'';flex:1;height:1px;background:linear-gradient(90deg,var(--rule),transparent)}
.section-head .mark{font-family:'IBM Plex Mono',monospace;font-size:10.5px;letter-spacing:.2em;color:var(--gold)}
.section-head h2{font-family:'Song Myung',serif;font-weight:400;font-size:21px;color:var(--moonlight)}

.card{background:var(--card);border:1px solid var(--rule);border-radius:4px;padding:24px;font-size:15px;color:var(--moonlight)}

/* 꿈 목록: 성좌 행 */
.dream-list{list-style:none}
.dream-list li{border-bottom:1px solid rgba(201,169,97,.10)}
.dream-list a{display:flex;align-items:center;gap:14px;padding:15px 6px;text-decoration:none;color:var(--moonlight);font-weight:500;font-size:15px;transition:background .15s}
.dream-list a:hover{background:rgba(201,169,97,.05)}
.dream-list a:focus-visible{outline:2px solid var(--gold);outline-offset:-2px}
.const-icon{width:40px;height:34px;flex:0 0 40px}
.const-lines line{stroke:var(--gold-soft);stroke-width:.8;opacity:.7}
.const-stars circle{fill:var(--gold)}
.dream-list .cat{display:none}

/* 본문 */
.prose{font-family:'Gowun Batang',serif}
.prose h2{font-family:'Song Myung',serif;font-weight:400;font-size:20px;margin:42px 0 14px;color:var(--gold);display:flex;align-items:center;gap:10px}
.prose h2::before{content:'✶';font-size:12px;color:var(--gold-soft)}
.prose p{margin-bottom:15px;font-size:15.5px;color:var(--moonlight)}

.faq-item{border-bottom:1px solid rgba(201,169,97,.10);padding:15px 0}
.faq-item summary{cursor:pointer;font-weight:600;font-size:14.5px;color:var(--moonlight);list-style:none;display:flex;justify-content:space-between}
.faq-item summary::after{content:'+';color:var(--gold);font-family:'IBM Plex Mono',monospace}
.faq-item[open] summary::after{content:'−'}
.faq-item p{margin-top:10px;font-size:14px;color:var(--moon-dim)}

/* 댓글 */
.comment{padding:18px 0;border-bottom:1px solid rgba(201,169,97,.10)}
.comment .meta{display:flex;gap:8px;font-size:12.5px;color:var(--moon-dim);margin-bottom:6px}
.comment .name{font-weight:600;color:var(--moonlight)}
.ai-reply{margin:12px 0 0 20px;padding:14px 16px;background:rgba(143,163,194,.08);border-left:2px solid var(--astral);font-size:13.8px;border-radius:0 3px 3px 0}
.ai-badge{font-family:'IBM Plex Mono',monospace;font-size:10px;color:var(--astral);letter-spacing:.06em;display:block;margin-bottom:6px}
.comment-form{margin-top:24px}
.comment-form .nick,.comment-form textarea{width:100%;padding:12px;border:1px solid var(--rule);background:rgba(12,18,32,.55);color:var(--moonlight);border-radius:3px;font-family:'Pretendard',sans-serif;font-size:14px}
.comment-form .nick{margin-bottom:8px}
.comment-form textarea{min-height:84px;resize:vertical}
.comment-form input:focus-visible,.comment-form textarea:focus-visible{outline:2px solid var(--gold);outline-offset:-2px}
.comment-form button{margin-top:10px;background:var(--gold);color:var(--night-deep);border:none;padding:11px 22px;font-size:13.5px;font-weight:700;border-radius:3px;cursor:pointer;font-family:'Pretendard',sans-serif}
.spam-note{font-size:12px;color:var(--moon-dim);margin-top:8px;font-style:italic}
.hp-field{position:absolute;left:-9999px;opacity:0}
.notice{padding:12px 16px;font-size:13.5px;margin:10px 0;border-radius:3px}
.notice.ok{background:rgba(143,163,194,.1);border-left:2px solid var(--astral)}
.notice.blocked{background:rgba(180,90,70,.12);border-left:2px solid #B45A46}

.site-footer{max-width:760px;margin:0 auto;padding:26px 24px;border-top:1px solid var(--rule);font-size:12px;color:var(--moon-dim);text-align:center}

@media(max-width:480px){
  .hero h1{font-size:28px}
  .wrap{padding:0 18px 60px}
  .moon{width:78px;height:78px}
}

/* 게임 입구 버튼 */
.game-cta{display:inline-block;margin-top:22px;padding:13px 26px;border:1px solid var(--gold);border-radius:3px;color:var(--gold);text-decoration:none;font-size:14px;font-weight:600;letter-spacing:.02em;transition:all .2s;background:rgba(201,169,97,.06)}
.game-cta:hover{background:var(--gold);color:var(--night-deep)}

/* 검색어 하이라이트 */
mark.hl{background:var(--gold);color:var(--night-deep);padding:1px 3px;border-radius:2px;font-weight:700;}

/* 카테고리 그리드 (홈/허브 페이지) */
.cat-grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(96px,1fr));gap:10px}
.cat-tile{display:flex;flex-direction:column;align-items:center;gap:4px;padding:14px 8px;border:1px solid var(--rule);border-radius:5px;background:var(--card);text-decoration:none;color:var(--moonlight);transition:transform .15s,border-color .15s}
.cat-tile:hover{border-color:var(--gold);transform:translateY(-2px)}
.cat-tile .const-icon{width:34px;height:28px;flex:none}
.cat-tile-name{font-family:'Gowun Batang',serif;font-size:12.5px;text-align:center;line-height:1.3}
.cat-tile-count{font-family:'IBM Plex Mono',monospace;font-size:10px;color:var(--gold)}

/* 운세 지표 바 */
.fortune-bars{background:var(--card);border:1px solid var(--rule);border-radius:5px;padding:20px 22px;margin-top:28px}
.fortune-row{display:flex;align-items:center;gap:12px;padding:7px 0}
.fortune-label{width:36px;flex:none;font-family:'Gowun Batang',serif;font-size:13.5px;color:var(--moon-dim)}
.fortune-track{flex:1;height:8px;background:rgba(239,233,216,0.08);border-radius:4px;overflow:hidden}
.fortune-fill{height:100%;border-radius:4px}
.fortune-pct{width:28px;flex:none;text-align:right;font-family:'IBM Plex Mono',monospace;font-size:11.5px;color:var(--moon-dim)}
.bar-gilmong{background:linear-gradient(90deg,var(--gold-soft),var(--gold))}
.bar-ubok{background:linear-gradient(90deg,#7A8CA8,var(--astral))}
.bar-jaemul{background:linear-gradient(90deg,#8FA05C,#B8CC7A)}
.bar-health{background:linear-gradient(90deg,#B45A46,#D68A6E)}

/* 대분류 그룹 타일 (홈/그룹허브 페이지) */
.group-grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(130px,1fr));gap:12px}
.group-tile{display:flex;flex-direction:column;align-items:center;gap:6px;padding:20px 10px;border:1px solid var(--rule);border-radius:6px;background:var(--card);text-decoration:none;color:var(--moonlight);transition:transform .15s,border-color .15s}
.group-tile:hover{border-color:var(--gold);transform:translateY(-2px)}
.group-emoji{font-size:32px;line-height:1}
.group-name{font-family:'Gowun Batang',serif;font-size:14px;text-align:center;font-weight:700}
.group-count{font-family:'IBM Plex Mono',monospace;font-size:10.5px;color:var(--gold)}