:root{
  --bg:#070b14;
  --panel:#0d1426;
  --panel2:#0e1934;
  --text:#e7eefc;
  --muted:#9fb0d2;
  --line:rgba(231,238,252,.10);
  --accent:#7aa2ff;
  --accent2:#8bffc7;
  --danger:#ff7a7a;
  --warning:#ffd36a;
  --shadow: 0 10px 30px rgba(0,0,0,.35);
  --radius:16px;
  --radius2:22px;
  --mono: ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas, "Liberation Mono", "Courier New", monospace;
  --sans: ui-sans-serif, system-ui, -apple-system, Segoe UI, Roboto, "Noto Sans KR", Arial, sans-serif;
}

*{box-sizing:border-box}
html,body{height:100%}
body{
  margin:0;
  font-family:var(--sans);
  background:
    radial-gradient(1200px 800px at 18% 12%, rgba(122,162,255,.20), transparent 60%),
    radial-gradient(900px 600px at 82% 0%, rgba(139,255,199,.12), transparent 55%),
    radial-gradient(700px 550px at 70% 90%, rgba(255,211,106,.08), transparent 55%),
    linear-gradient(180deg, var(--bg), #05070f 85%);
  color:var(--text);
}

a{color:inherit; text-decoration:none}
.container{width:min(1240px, 94vw); margin:18px auto 56px}

/* Top nav (Civitai-ish) */
.navbar{
  position:sticky; top:0; z-index:50;
  padding:12px 0;
  background: linear-gradient(180deg, rgba(7,11,20,.95), rgba(7,11,20,.65));
  backdrop-filter: blur(10px);
}
.nav-inner{
  width:min(1240px, 94vw); margin:0 auto;
  display:flex; align-items:center; gap:12px;
  border:1px solid var(--line);
  border-radius: var(--radius2);
  background: rgba(13,20,38,.68);
  box-shadow: var(--shadow);
  padding:10px 12px;
}
.brand{
  display:flex; align-items:center; gap:10px;
  padding:6px 8px;
}
.logo{
  width:36px; height:36px; border-radius:14px;
  background: linear-gradient(135deg, rgba(122,162,255,.95), rgba(139,255,199,.85));
  box-shadow: 0 10px 24px rgba(122,162,255,.18);
}
.brand .title{font-weight:850; letter-spacing:-.3px; font-size:14px; margin:0}
.brand .tag{margin:0; color:var(--muted); font-size:11px}

.search{
  flex:1;
  display:flex; align-items:center; gap:10px;
  padding:10px 12px;
  border-radius: 999px;
  border:1px solid rgba(255,255,255,.10);
  background: rgba(7,11,20,.62);
}
.search svg{opacity:.8}
.search input{
  width:100%;
  background: transparent;
  border:none;
  outline:none;
  color:var(--text);
  font-size:13px;
}
.search input::placeholder{color: rgba(159,176,210,.75)}
.nav-links{
  display:flex; align-items:center; gap:6px; flex-wrap:wrap; justify-content:flex-end;
}
.nav-link{
  font-size:12.5px;
  padding:9px 10px;
  border-radius: 999px;
  border:1px solid transparent;
  color: var(--muted);
  transition: background .15s ease, border-color .15s ease, transform .08s ease;
}
.nav-link:hover{
  background: rgba(255,255,255,.04);
  border-color: rgba(255,255,255,.10);
  color: var(--text);
  transform: translateY(-1px);
}
.nav-link.active{
  background: rgba(122,162,255,.14);
  border-color: rgba(122,162,255,.65);
  color: var(--text);
}

/* Layout */
.hero{
  margin-top:18px;
  border-radius: var(--radius2);
  border:1px solid var(--line);
  background: linear-gradient(180deg, rgba(255,255,255,.05), rgba(255,255,255,.02));
  box-shadow: var(--shadow);
  padding:16px 18px;
}
.hero h1{margin:0; font-size:18px; letter-spacing:-.35px}
.hero p{margin:8px 0 0; color:var(--muted); font-size:12.5px; line-height:1.5}

.grid{
  margin-top:16px;
  display:grid;
  grid-template-columns: 1fr 340px;
  gap:16px;
}
@media(max-width: 980px){
  .grid{grid-template-columns:1fr}
}
.panel{
  border:1px solid var(--line);
  border-radius: var(--radius2);
  background: rgba(13,20,38,.72);
  box-shadow: var(--shadow);
  overflow:hidden;
}
.panel-head{
  padding:14px 16px;
  border-bottom:1px solid var(--line);
  display:flex; align-items:flex-start; justify-content:space-between; gap:12px;
}
.panel-head h2{margin:0; font-size:15px}
.panel-head p{margin:6px 0 0; color:var(--muted); font-size:12px; line-height:1.5}
.chips{display:flex; gap:8px; flex-wrap:wrap; justify-content:flex-end}
.chip{
  font-size:12px;
  padding:7px 10px;
  border-radius:999px;
  background: rgba(255,255,255,.04);
  border:1px solid var(--line);
  color:var(--muted);
}

/* Form */
.content{padding:14px 16px 16px}
.row{display:flex; gap:10px; flex-wrap:wrap}
.field{flex:1; min-width:190px}
label{display:block; font-size:12px; color:var(--muted); margin:0 0 6px 2px}
input, textarea, select{
  width:100%;
  background: rgba(7,11,20,.70);
  border:1px solid rgba(255,255,255,.10);
  color:var(--text);
  border-radius: 14px;
  padding:10px 11px;
  outline:none;
  font-size:14px;
}
textarea{min-height: 120px; resize: vertical}
input:focus, textarea:focus, select:focus{border-color: rgba(122,162,255,.75)}
.btnbar{display:flex; gap:10px; margin-top:12px; flex-wrap:wrap}
button.primary{
  border:1px solid rgba(122,162,255,.75);
  background: rgba(122,162,255,.18);
  color: var(--text);
  padding:10px 12px;
  border-radius: 14px;
  cursor:pointer;
  font-weight:780;
}
button.primary:hover{background: rgba(122,162,255,.24)}
button.ghost{
  border:1px solid rgba(255,255,255,.10);
  background: rgba(255,255,255,.03);
  color: var(--muted);
  padding:10px 12px;
  border-radius: 14px;
  cursor:pointer;
  font-weight:700;
}
button.ghost:hover{color: var(--text)}
.sep{height:1px; background: var(--line); margin:12px 0}

/* Results */
.results{display:grid; grid-template-columns:1fr; gap:10px}
.card{
  border:1px solid rgba(255,255,255,.10);
  border-radius: 18px;
  padding:12px;
  background: rgba(255,255,255,.03);
}
.kv{display:flex; justify-content:space-between; align-items:baseline; gap:10px}
.kv .k{color:var(--muted); font-size:12px}
.kv .v{font-family: var(--mono); font-size:14px}
.note{font-size:12px; color:var(--muted); margin-top:6px; line-height:1.4}
.small{font-size:12px; color:var(--muted); line-height:1.5}

/* AI side */
.ai-box{position:sticky; top:86px; height:fit-content}
.ai-title{display:flex; align-items:center; justify-content:space-between; gap:10px}
.lock{
  font-size:12px; padding:6px 10px; border-radius:999px;
  border:1px solid rgba(255,255,255,.10);
  background: rgba(7,11,20,.55);
  color: var(--muted);
}
.ai-free{
  border:1px dashed rgba(122,162,255,.55);
  background: rgba(122,162,255,.08);
}
.suggest{display:flex; flex-direction:column; gap:8px; margin-top:10px}
.suggest button{
  text-align:left;
  border-radius: 14px;
  border:1px solid rgba(255,255,255,.10);
  background: rgba(7,11,20,.55);
  color: var(--text);
  padding:10px 10px;
  cursor:pointer;
}
.suggest button:hover{border-color: rgba(122,162,255,.55)}
.suggest button small{display:block; color: var(--muted); margin-top:4px; line-height:1.35}

/* Tool cards on home */
.tool-grid{
  display:grid;
  grid-template-columns: repeat(3, 1fr);
  gap:12px;
}
@media(max-width: 980px){ .tool-grid{grid-template-columns: 1fr} }
.tool-card{
  border:1px solid rgba(255,255,255,.10);
  border-radius: 20px;
  background: rgba(255,255,255,.03);
  padding:14px;
  transition: transform .08s ease, border-color .15s ease, background .15s ease;
}
.tool-card:hover{
  transform: translateY(-1px);
  border-color: rgba(122,162,255,.55);
  background: rgba(122,162,255,.06);
}
.tool-card h3{margin:0; font-size:14px}
.tool-card p{margin:8px 0 0; color:var(--muted); font-size:12px; line-height:1.45}
.tool-card .meta{margin-top:10px; display:flex; gap:8px; flex-wrap:wrap}
.pill{
  font-size:12px;
  padding:7px 10px;
  border-radius:999px;
  background: rgba(255,255,255,.04);
  border:1px solid rgba(255,255,255,.08);
  color:var(--muted);
}
.footer{
  margin-top:14px; color: var(--muted);
  font-size:12px;
  line-height:1.5;
  opacity:.95;
}
code.inline{
  font-family: var(--mono);
  background: rgba(0,0,0,.22);
  border: 1px solid rgba(255,255,255,.10);
  border-radius: 10px;
  padding: 2px 6px;
  font-size: 12px;
}

/* Modal */
.modal-backdrop{
  position:fixed; inset:0;
  background: rgba(0,0,0,.55);
  display:none;
  align-items:center; justify-content:center;
  padding:18px;
  z-index: 200;
}
.modal{
  width:min(560px, 92vw);
  border-radius: 22px;
  border:1px solid rgba(255,255,255,.10);
  background: rgba(13,20,38,.98);
  box-shadow: var(--shadow);
  padding:16px;
}
.modal h4{margin:0 0 8px; font-size:16px}
.modal p{margin:0 0 12px; color:var(--muted); line-height:1.45; font-size:13px}
.modal .actions{display:flex; gap:10px; justify-content:flex-end; flex-wrap:wrap}

/* Toast */
#toast{
  position:fixed; left:50%; bottom:22px; transform:translateX(-50%);
  background: rgba(13,20,38,.92);
  border:1px solid rgba(255,255,255,.10);
  padding:10px 12px; border-radius: 999px;
  color: var(--text);
  box-shadow: var(--shadow);
  opacity:0;
  transition: opacity .2s ease;
  font-size:12px;
  z-index: 210;
}


/* v4 additions */
pre.json{
  margin: 10px 0 0;
  padding: 10px;
  border-radius: 16px;
  border: 1px solid rgba(255,255,255,.10);
  background: rgba(7,11,20,.55);
  color: var(--text);
  overflow:auto;
  font-family: var(--mono);
  font-size: 12px;
  line-height: 1.45;
}
.help{
  margin-top: 10px;
  color: var(--muted);
  font-size: 12px;
  line-height: 1.5;
}


/* Image tools */
.dropzone{
  border: 1px dashed rgba(255,255,255,.18);
  border-radius: 14px;
  padding: 14px;
  display: flex;
  gap: 12px;
  align-items: center;
  justify-content: space-between;
  background: rgba(255,255,255,.03);
  cursor: pointer;
}
.dropzone.drag{
  border-color: rgba(120,160,255,.65);
  background: rgba(120,160,255,.08);
}
.dropzone .hint{
  display:flex; flex-direction:column; gap:4px;
}
.previewWrap{
  display:grid;
  grid-template-columns: 1.2fr .8fr;
  gap: 14px;
}
@media (max-width: 920px){
  .previewWrap{ grid-template-columns: 1fr; }
}
.previewBox{
  border: 1px solid rgba(255,255,255,.12);
  border-radius: 14px;
  padding: 12px;
  background: rgba(0,0,0,.18);
  overflow: hidden;
}
.previewBox img{
  width: 100%;
  height: auto;
  display: block;
  border-radius: 12px;
}
.canvasBox canvas{
  width:100%;
  height:auto;
  border-radius:12px;
  display:block;
  background: repeating-conic-gradient(rgba(255,255,255,.06) 0 25%, rgba(255,255,255,.02) 0 50%) 50%/18px 18px;
}
.kv{
  display:grid;
  grid-template-columns: 140px 1fr;
  gap: 8px 12px;
}
.kv .k{ color: rgba(255,255,255,.75); font-size: 13px; }
.kv .v{ color: rgba(255,255,255,.92); font-size: 13px; }


/* Community */
.community{ margin-top:12px; }
.community-ticker{
  display:flex; align-items:center; gap:10px;
  padding:10px 12px;
  border:1px solid var(--border);
  border-radius:14px;
  background: rgba(255,255,255,.03);
  flex-wrap:nowrap;
 overflow:hidden; }
.ticker-label{
  font-size:12px;
  color:var(--muted);
  white-space:nowrap;
}
.ticker-link{ color: rgba(240,244,255,.92); text-decoration:none; flex:1; min-width:0; white-space:nowrap; overflow:hidden; text-overflow:ellipsis; }
.ticker-link:hover{ text-decoration:underline; }

.community-box{ margin-top:10px; }

.community-list .post{
  border:1px solid var(--border);
  border-radius:14px;
  padding:10px 12px;
  margin-top:10px;
  background: rgba(255,255,255,.03);
  cursor:pointer;
}
.community-list .post:hover{
  border-color: rgba(125,211,252,.35);
}
.community-list .post-title{
  font-weight:700;
  font-size:13px;
  margin:0;
}
.community-list .post-meta{
  margin-top:4px;
  font-size:12px;
  color:var(--muted);
  display:flex;
  gap:10px;
  flex-wrap:wrap;
}
.community-list .post-body{
  margin-top:8px;
  font-size:13px;
  color: rgba(240,244,255,.92);
  white-space:pre-wrap;
  max-height: 3.6em;
  overflow:hidden;
}
.community-empty{
  padding:10px 12px;
  color:var(--muted);
  font-size:12px;
}



/* ---- D-Day 커뮤니티 UI v3 (그리드/티커/댓글/달력아이콘) ---- */
.spacer-lg{ height:14px; }

.community-card{ padding:14px; }

.ticker-viewport{
  position:relative;
  overflow:hidden;
  height:20px;
  flex:1;
  min-width: 180px;
}
.ticker-track{
  display:flex;
  flex-direction:column;
  transform:translateY(0);
  transition:transform .45s cubic-bezier(.2,.9,.2,1);
  will-change: transform;
}
.ticker-track.no-trans{ transition:none !important; }
.ticker-item{
  height:20px;
  line-height:20px;
  display:block;
}

.community-grid{
  margin-top:10px;
  display:grid;
  grid-template-columns: repeat(5, minmax(0, 1fr));
  gap:10px;
}
@media (max-width: 1200px){
  .community-grid{ grid-template-columns: repeat(4, minmax(0,1fr)); }
}
@media (max-width: 980px){
  .community-grid{ grid-template-columns: repeat(3, minmax(0,1fr)); }
}
@media (max-width: 680px){
  .community-grid{ grid-template-columns: repeat(2, minmax(0,1fr)); }
}

.post-card{
  border:1px solid var(--border);
  border-radius:16px;
  background: rgba(255,255,255,.03);
  padding:10px;
  display:flex;
  flex-direction:column;
  gap:8px;
  min-height: 140px;
}
.post-thumb{
  border:1px dashed rgba(255,255,255,.10);
  border-radius:14px;
  background: rgba(255,255,255,.02);
  aspect-ratio: 1 / 1;
  display:flex;
  align-items:center;
  justify-content:center;
  padding:10px;
}
.post-snippet{
  font-weight:700;
  font-size:14px;
  text-align:center;
  letter-spacing: .2px;
}
.post-meta{
  font-size:12px;
  color: var(--muted);
  display:flex;
  align-items:center;
  gap:6px;
  flex-wrap:wrap;
}
.post-ctx{
  font-size:12px;
  color: var(--muted);
  min-height: 1.4em;
  overflow:hidden;
  text-overflow:ellipsis;
  white-space:nowrap;
}
.post-actions{
  display:flex;
  justify-content:flex-end;
  margin-top:auto;
}
.post-expand{
  margin-top:8px;
}
.post-full{
  font-size:13px;
  color: rgba(240,244,255,.92);
  white-space:pre-wrap;
  line-height:1.5;
}
.post-divider{
  height:1px;
  background: var(--border);
  margin:10px 0;
  opacity:.9;
}
.post-comments .small{ font-size:12px; color:var(--muted); }

.community-empty{
  grid-column: 1 / -1;
  padding:14px;
  border:1px dashed rgba(255,255,255,.12);
  border-radius:16px;
  color:var(--muted);
}

.community-pager{
  margin-top:10px;
  display:flex;
  align-items:center;
  justify-content:center;
  gap:10px;
}
.pager-info{
  font-size:12px;
  color:var(--muted);
  min-width: 60px;
  text-align:center;
}

.comment-list{
  display:flex;
  flex-direction:column;
  gap:10px;
  margin-bottom:10px;
}
.comment{
  border:1px solid rgba(255,255,255,.08);
  border-radius:12px;
  padding:10px;
  background: rgba(0,0,0,.10);
}
.comment-meta{
  font-size:12px;
  color:var(--muted);
  display:flex;
  align-items:center;
  gap:6px;
  margin-bottom:6px;
}
.comment-body{
  font-size:13px;
  color: rgba(240,244,255,.92);
  white-space:pre-wrap;
  line-height:1.45;
}
.comment-empty{
  font-size:12px;
  color:var(--muted);
  padding:6px 0;
}
.comment-form .row{ margin-top:8px; }
.comment-form textarea{ min-height: 58px; }

.date-wrap{
  display:flex;
  align-items:center;
  gap:8px;
}
.date-wrap > input{
  flex:1;
}
.date-cal-btn{
  width:38px;
  height:38px;
  border-radius:12px;
  border:1px solid var(--border);
  background: rgba(255,255,255,.03);
  color: rgba(240,244,255,.86);
  display:flex;
  align-items:center;
  justify-content:center;
  cursor:pointer;
}
.date-cal-btn:hover{ background: rgba(255,255,255,.06); }
.date-hidden{
  position:fixed;
  left:-10000px;
  top:-10000px;
  width:1px;
  height:1px;
  opacity:0.01;
}



/* --- D-DAY: date picker icon + layout tweaks --- */
.date-ctl{
  display:flex;
  align-items:center;
  gap:8px;
  position:relative;
}
.date-cal-btn{
  width:34px;
  height:34px;
  border-radius:12px;
  border:1px solid var(--border);
  background: rgba(255,255,255,.03);
  display:inline-flex;
  align-items:center;
  justify-content:center;
  cursor:pointer;
  flex:0 0 auto;
}
.date-cal-btn svg{
  width:18px;
  height:18px;
  fill: rgba(240,244,255,.85);
}
.date-cal-btn:hover{ background: rgba(255,255,255,.06); }
.date-native{
  position:fixed;
  left:-10000px;
  top:-10000px;
  width:1px;
  height:1px;
  opacity:0.01;
}

/* event row spacing */
#ddCountdown .dd-toprow{ margin-top: 10px; }
#ddPresetToggleBtn{ width:100%; justify-content:space-between; }
#ddPresetToggleBtn .chev{ opacity:.8; }
#ddPresetWrap select{ width:100%; }

/* --- Community layout: posts -> composer -> pager --- */
#communityDday .community-headline{
  text-align:center;
  font-weight:700;
  margin: 10px 0 10px;
}
#communityDday .community-box{
  margin-top: 12px;
  padding-top: 6px;
}
#communityDday .community-grid{
  margin-top: 10px;
  display:grid;
  grid-template-columns: repeat(1, minmax(0, 1fr));
  gap:12px;
}
@media (min-width: 760px){
  #communityDday .community-grid{ grid-template-columns: repeat(2, minmax(0, 1fr)); }
}
@media (min-width: 1100px){
  #communityDday .community-grid{ grid-template-columns: repeat(3, minmax(0, 1fr)); }
}
#communityDday .community-composer{
  margin-top: 14px;
  padding-top: 14px;
  border-top: 1px solid var(--border);
}
#communityDday .composer-form textarea{ width:100%; }
#communityDday .composer-meta{
  display:grid;
  grid-template-columns: 1fr 1fr;
  gap:10px;
  margin-top: 10px;
}
#communityDday .composer-meta .actions{
  grid-column: 1 / -1;
  display:flex;
  gap:10px;
  justify-content:flex-end;
  flex-wrap:wrap;
}
#communityDday .community-pager{
  margin-top: 14px;
  display:flex;
  align-items:center;
  justify-content:center;
  gap:10px;
}
#communityDday .ticker-viewport{ height: 20px; }
#communityDday .ticker-track{ transition: transform 320ms ease; }

/* Navbar: put search on far right */
.nav-inner{ display:flex; align-items:center; gap:14px; }
.nav-links{ order:2; }
.search{ order:3; margin-left:auto; }

.commTitle{ text-align:center; width:100%; }

/* Ticker roll animation (stable) */
.ticker-item{ display:block; line-height: 24px; height:24px; overflow:hidden; white-space:nowrap; text-overflow:ellipsis; }
.ticker-viewport{ height:24px; overflow:hidden; }
.ticker-item.roll{ animation: tickerRoll .35s ease; }
@keyframes tickerRoll{
  from{ transform: translateY(12px); opacity:0; }
  to{ transform: translateY(0); opacity:1; }
}

.community-composer{ margin-top:14px; }
.community-pager{ margin-top:14px; display:flex; justify-content:center; gap:10px; align-items:center; }

.post-actions{ display:flex; align-items:center; gap:10px; }
.post-cmtcount{ font-size: 12px; opacity:.85; }

.dd-toprow{ margin-top: 10px; }


/* --- Navbar layout: keep search at far right --- */
.nav-inner{
  display:flex;
  align-items:center;
  gap:14px;
  flex-wrap:nowrap;
}
.nav-links{
  display:flex;
  align-items:center;
  gap:10px;
  flex:1 1 auto;
  overflow-x:auto;
  scrollbar-width: none;
}
.nav-links::-webkit-scrollbar{ display:none; }
.search{
  flex:0 0 320px;
  margin-left:auto;
}
@media (max-width: 980px){
  .search{ flex-basis: 260px; }
}
@media (max-width: 760px){
  .search{ flex-basis: 200px; }
}

/* --- Date calendar button + native date input --- */
.date-ctl{
  position:relative;
}
.cal-btn{
  width:34px;
  height:34px;
  display:inline-flex;
  align-items:center;
  justify-content:center;
  border:1px solid rgba(255,255,255,.12);
  background: rgba(255,255,255,.04);
  border-radius:10px;
  cursor:pointer;
}
.cal-btn:hover{ background: rgba(255,255,255,.07); }
.native-date{
  position:absolute;
  right:6px;
  top:50%;
  transform: translateY(-50%);
  width:1px;
  height:1px;
  opacity:0;
  pointer-events:none;
}

/* --- Ticker: single line stable --- */
.community-ticker{
  display:flex;
  align-items:center;
  gap:12px;
  padding:10px 12px;
  border:1px solid rgba(255,255,255,.08);
  border-radius:14px;
  background: rgba(255,255,255,.03);
}
.ticker-viewport{
  overflow:hidden;
  height:22px;
  flex:1;
  min-width: 200px;
}
.ticker-item{
  display:block;
  height:22px;
  line-height:22px;
  white-space:nowrap;
  overflow:hidden;
  text-overflow:ellipsis;
  color: var(--text);
  text-decoration:none;
}
.ticker-item.roll{ animation: tickerRoll .32s ease; }

/* --- Service tiles (home) --- */
.tool-grid{
  display:grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap:14px;
}
@media (max-width: 1100px){ .tool-grid{ grid-template-columns: repeat(3, minmax(0, 1fr)); } }
@media (max-width: 820px){ .tool-grid{ grid-template-columns: repeat(2, minmax(0, 1fr)); } }
@media (max-width: 520px){ .tool-grid{ grid-template-columns: 1fr; } }
.tool-card{
  border:1px solid rgba(255,255,255,.10);
  background: rgba(255,255,255,.03);
  border-radius:16px;
  padding:14px;
  min-height: 110px;
  display:flex;
  flex-direction:column;
  gap:10px;
  transition: transform .12s ease, background .12s ease, border-color .12s ease;
}
.tool-card:hover{
  transform: translateY(-1px);
  background: rgba(255,255,255,.05);
  border-color: rgba(255,255,255,.16);
}
.tool-card .tool-title{ font-weight:900; }
.tool-card .tool-desc{ font-size:12px; color: var(--muted); line-height:1.4; }
.tool-card .tool-tags{ display:flex; gap:6px; flex-wrap:wrap; }
.tool-card .tool-tag{
  font-size:11px;
  padding:3px 8px;
  border-radius:999px;
  border:1px solid rgba(255,255,255,.10);
  color: var(--muted);
}


/* Navbar layout: wrap menus into 2 lines + keep search on far right */
.nav-inner{
  display:flex;
  align-items:center;
  gap:12px;
}
.brand{ flex:0 0 auto; min-width: 160px; }
.brand .title{ white-space:nowrap; }
.nav-links{
  flex:1 1 auto;
  display:flex;
  flex-wrap:wrap;
  gap:8px 10px;
  min-width:0;
}
.search{
  margin-left:auto;
  flex:0 0 auto;
  width: 240px;
  max-width: 240px;
}
.search input{ width:100%; }

/* Ensure the nav links can occupy two rows without pushing layout into tools */
@media (max-width: 980px){
  .search{ width: 200px; max-width:200px; }
}

/* Community: make sure blocks show */
.community-grid{ display:grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap:12px; margin-top:12px; }
@media (max-width: 900px){ .community-grid{ grid-template-columns: repeat(2, minmax(0, 1fr)); } }
@media (max-width: 560px){ .community-grid{ grid-template-columns: 1fr; } }

.community-compose{ margin-top: 14px; }
.community-compose .row{ margin-top: 10px; }
.community-compose .row.two{
  display:grid;
  grid-template-columns: 1fr 1fr;
  gap:10px;
}
@media (max-width: 560px){
  .community-compose .row.two{ grid-template-columns: 1fr; }
}
.compose-actions{ display:flex; gap:10px; align-items:center; flex-wrap:wrap; }

/* Post actions: show comment count */
.post-actions{ display:flex; align-items:center; gap:10px; }
.post-cmtcount{ font-size:12px; opacity:.85; }

/* Ticker: stable text + simple slide-in */
.ticker-viewport{ overflow:hidden; height: 24px; }
.ticker-item{ display:block; white-space:nowrap; overflow:hidden; text-overflow:ellipsis; opacity:1; transform: translateY(0); }
.ticker-item.ticker-anim{ animation: tickerUp .26s ease; }
@keyframes tickerUp{
  from{ transform: translateY(14px); opacity:0; }
  to{ transform: translateY(0); opacity:1; }
}

/* Calendar button visibility */
.date-cal-btn{
  color: var(--text);
  background: rgba(255,255,255,.06);
}
.date-cal-btn svg{ opacity: .95; }



/* Brand title: keep on one line even under WP theme */
.navbar .brand{ min-width: 220px !important; }
.navbar .brand .title{
  white-space: nowrap !important;
  word-break: keep-all !important;
  overflow: hidden;
  text-overflow: ellipsis;
  display:inline-block;
  max-width: 220px;
}

/* Keep AI widget on right like a sidebar */
.grid{ grid-template-columns: 1fr 340px; }
@media (max-width: 820px){
  .grid{ grid-template-columns: 1fr; }
}
.ai-box{ position: sticky; top: 88px; align-self: start; }

/* Community grid: 3 columns */
.community-grid{ grid-template-columns: repeat(3, minmax(0, 1fr)) !important; }
@media (max-width: 900px){
  .community-grid{ grid-template-columns: repeat(2, minmax(0, 1fr)) !important; }
}
@media (max-width: 560px){
  .community-grid{ grid-template-columns: 1fr !important; }
}

/* Calendar icon visibility */
.date-cal-btn, .iconBtn{
  color: rgba(255,255,255,.92) !important;
  background: rgba(255,255,255,.10) !important;
  border-color: rgba(255,255,255,.18) !important;
}
.date-cal-btn:hover, .iconBtn:hover{ background: rgba(255,255,255,.14) !important; }



/* build:20260104_9 - overrides (WP theme-safe) */

/* Make brand/title never wrap ("서비스 목록" 줄바꿈 방지) */
.brand{ min-width: 240px !important; }
.brand .title{ white-space: nowrap !important; word-break: keep-all !important; overflow: visible !important; display:inline-block !important; }

/* Keep navbar compact: search narrower + links wrap 2 rows */
.search{ width: 220px !important; max-width: 220px !important; }
.nav-links{ flex-wrap: wrap !important; }

/* Ensure 2-col layout (calculator left, AI right) */
.grid{ display:grid !important; grid-template-columns: minmax(0,1fr) 360px !important; gap: 16px !important; }
@media (max-width: 980px){
  .grid{ grid-template-columns: 1fr !important; }
}
.ai-box{ position: sticky !important; top: 16px !important; align-self: start !important; }

/* Calendar icon more visible */
.date-cal-btn{ color: var(--text) !important; background: rgba(255,255,255,.08) !important; border: 1px solid rgba(255,255,255,.14) !important; }
.date-cal-btn svg{ opacity: 1 !important; }

/* Community headline centered */
.community-headline{ text-align:center !important; }



/* Calendar icon button - increase contrast */
.date-wrap { position: relative; display: flex; align-items: center; gap: 8px; }
.date-cal-btn{
  border: 1px solid rgba(255,255,255,.28);
  background: rgba(255,255,255,.10);
  color: rgba(255,255,255,.92);
  box-shadow: inset 0 0 0 1px rgba(0,0,0,.35);
}
.date-cal-btn:hover{ background: rgba(255,255,255,.14); }
.date-cal-btn:active{ transform: translateY(0.5px); }
.date-cal-btn svg{ opacity: 1; }
.date-hidden{
  position:absolute;
  left:-9999px;
  width:1px; height:1px;
  opacity:0;
}



/* Like button */
.post-like{ display:inline-flex; align-items:center; gap:6px; }
.post-like.liked{ opacity:.65; }
.post-actions{ display:flex; align-items:center; gap:10px; flex-wrap:wrap; }



/* Calendar icon: keep button bg/border, but make icon clearly visible */
.date-cal-btn{ color:#ffffff; }
.date-cal-btn svg{ stroke: currentColor; }

/* Quick date pills */
.quick-date-row{ display:flex; flex-wrap:wrap; gap:8px; margin-top:10px; }
.pill{
  border:1px solid rgba(255,255,255,.12);
  background: rgba(255,255,255,.06);
  padding:7px 10px;
  border-radius:999px;
  font-size:12px;
  cursor:pointer;
}
.pill:hover{ background: rgba(255,255,255,.10); }

/* Hero top row */
.hero-top{ display:flex; align-items:center; justify-content:space-between; gap:12px; flex-wrap:wrap; }
.hero-chips{ margin-left:auto; }

/* Quick date pills clickable */
.pill{ cursor:pointer; user-select:none; }
.pill:active{ transform: translateY(1px); }

/* spacing between headline and ticker */
.community-headline{ margin-bottom: 10px; }

/* D-Day actions spacing */
.btnbar{ padding-left: 24px; gap:10px; }

/* Calendar icon visibility */
.date-cal-btn{ color:#fff; }
.date-cal-btn svg, .date-cal-btn svg *{ stroke: #fff !important; fill: #fff !important; }

.community-headline-spacer{ height: 16px; }


body[data-page="dday"] .community-headline{
  margin: 12px 0 18px !important;
}


body[data-page="dday"] .community-headline-spacer{
  height: 24px !important;
}



/* D-DAY page: 게시물은 3개 × 2줄(=6개)만 보이도록(나머지는 페이지로) */
body[data-page="dday"] .community-grid{
  grid-template-columns: repeat(3, minmax(0, 1fr)) !important;
}
@media (max-width: 680px){
  body[data-page="dday"] .community-grid{ grid-template-columns: repeat(2, minmax(0, 1fr)) !important; }
}
@media (max-width: 420px){
  body[data-page="dday"] .community-grid{ grid-template-columns: repeat(1, minmax(0, 1fr)) !important; }
}

/* D-DAY page: 계산 버튼 영역을 오른쪽으로 조금 이동 */
body[data-page="dday"] .btnbar{ padding-left: 48px !important; }
@media (max-width: 680px){
  body[data-page="dday"] .btnbar{ padding-left: 12px !important; }
}

body[data-page="dday"] .community-ticker{
  margin-top: 6px !important;
}


body[data-page="dday"] .btnbar{
  padding-left: 24px;
}


body[data-page="dday"] .cal-btn{
  color: #fff;
  border-color: rgba(255,255,255,0.35);
}


body[data-page="dday"] .cal-btn svg{
  stroke: #fff;
  color: #fff;
}


body[data-page="dday"] .community-headline-spacer{
  height: 24px !important;
}


/* --- D-DAY page specific fixes (layout + spacing) --- */
body[data-page="dday"] .community-headline{
  margin-bottom: 14px !important;
}
body[data-page="dday"] .community-headline-spacer{
  height: 28px !important; /* one blank line feel */
  display:block !important;
}
body[data-page="dday"] .community-grid{
  grid-template-columns: repeat(3, minmax(0, 1fr)) !important; /* 3 per row, 2 rows when limit=6 */
}
body[data-page="dday"] .btnbar{
  margin-left: 12px; /* move right ~1칸 */
}
/* === D-DAY page: final overrides (couple mode UI + alignment) === */
body[data-page="dday"][data-ddmode="couple"] #ddCountdown{ display:none !important; }
body[data-page="dday"][data-ddmode="couple"] #ddCouple{ display:block !important; }
body[data-page="dday"][data-ddmode="countdown"] #ddCountdown{ display:block !important; }
body[data-page="dday"][data-ddmode="countdown"] #ddCouple{ display:none !important; }

/* Button bar: keep aligned with form (no extra left padding) */
body[data-page="dday"] .btnbar{ margin-left:0 !important; padding-left:0 !important; }

/* Community grid: 3 columns (desktop), 2 (tablet), 1 (mobile) */
body[data-page="dday"] .community-grid{
  grid-template-columns: repeat(3, minmax(0, 1fr)) !important;
}
@media (max-width: 680px){
  body[data-page="dday"] .community-grid{ grid-template-columns: repeat(2, minmax(0, 1fr)) !important; }
}
@media (max-width: 420px){
  body[data-page="dday"] .community-grid{ grid-template-columns: repeat(1, minmax(0, 1fr)) !important; }
}