:root{
--bg: #f4f5f7;
--panel: #ffffff;
--panel-raised: #eef0f3;
--flip-shade: #e1e5ea;
--border: #dde1e6;
--accent: #dd8b12;
--accent-dim: #f3d9ac;
--accent-2: #1f9d90;
--text: #1c2024;
--text-muted: #6b7280;
--danger: #d64545;
--hero-glow: rgba(221,139,18,0.06);
--header-bg: rgba(255,255,255,0.85);
--glow-dot: rgba(221,139,18,0.5);
--glow-accent: rgba(221,139,18,0.25);
--glow-danger: rgba(214,69,69,0.35);
--soft-accent: rgba(221,139,18,0.10);
--soft-accent2: rgba(31,157,144,0.10);
--soft-accent2-strong: rgba(31,157,144,0.16);
--soft-danger: rgba(214,69,69,0.12);
--mono: 'JetBrains Mono', ui-monospace, monospace;
--sans: 'Pretendard', -apple-system, BlinkMacSystemFont, sans-serif;
}
html[data-theme="dark"]{
--bg: #14171c;
--panel: #1b1f26;
--panel-raised: #20252d;
--flip-shade: #171b21;
--border: #2a3038;
--accent: #ffb340;
--accent-dim: #8a6428;
--accent-2: #4fd1c5;
--text: #eae7e0;
--text-muted: #868c96;
--danger: #ff6b6b;
--hero-glow: rgba(255,179,64,0.07);
--header-bg: rgba(20,23,28,0.9);
--glow-dot: rgba(255,179,64,0.6);
--glow-accent: rgba(255,179,64,0.35);
--glow-danger: rgba(255,107,107,0.5);
--soft-accent: rgba(255,179,64,0.12);
--soft-accent2: rgba(79,209,197,0.12);
--soft-accent2-strong: rgba(79,209,197,0.18);
--soft-danger: rgba(255,107,107,0.15);
}
*{ box-sizing:border-box; }
html{ scroll-behavior:smooth; }
body{
margin:0;
background:
radial-gradient(ellipse 80% 50% at 50% -10%, var(--hero-glow), transparent),
var(--bg);
color:var(--text);
font-family:var(--sans);
line-height:1.6;
}
a{ color:inherit; }

/* ---------- Header ---------- */
header{
position:sticky; top:0; z-index:50;
background:var(--header-bg);
backdrop-filter:blur(10px);
border-bottom:1px solid var(--border);
}
.header-inner{
max-width:1060px; margin:0 auto;
display:flex; align-items:center; justify-content:space-between; flex-wrap:wrap;
gap:14px;
padding:14px 20px;
}
.logo{
display:flex; align-items:center; gap:8px;
font-family:var(--sans); font-weight:800; font-size:19px; letter-spacing:-0.2px;
text-decoration:none; color:var(--text);
}
.logo .dot{
width:9px; height:9px; border-radius:50%;
background:var(--accent);
box-shadow:0 0 8px 2px var(--glow-dot);
animation:blink 2s steps(1) infinite;
}
@keyframes blink{ 50%{ opacity:0.25; } }

nav.tabs{ display:flex; gap:8px; flex-wrap:wrap; }
.tab-group{ display:flex; gap:4px; background:var(--panel); border:1px solid var(--border); border-radius:10px; padding:4px; }
.tab-group.featured{ background:var(--soft-accent); border-color:var(--accent-dim); }
.tab-group.featured a.active{ background:var(--accent); color:#1a1206; }
.tab-group.featured a:not(.active){ color:var(--accent); }
.tab-group a{
font-family:var(--sans); font-weight:600; font-size:13px;
color:var(--text-muted); background:transparent; border:none;
padding:9px 12px; border-radius:7px; cursor:pointer; white-space:nowrap;
text-decoration:none; display:inline-block;
transition:color .15s, background .15s;
}
.tab-group a:hover{ color:var(--text); }
.tab-group a.active{ background:var(--panel-raised); color:var(--accent); }

.nav-toggle{
display:none; width:38px; height:38px; border-radius:10px;
border:1px solid var(--border); background:var(--panel); color:var(--text);
font-size:16px; cursor:pointer; flex-shrink:0;
}

.theme-toggle{
width:38px; height:38px; border-radius:10px;
border:1px solid var(--border); background:var(--panel);
color:var(--text); font-size:17px; cursor:pointer;
display:flex; align-items:center; justify-content:center;
flex-shrink:0;
transition:border-color .15s, transform .15s;
}
.theme-toggle:hover{ border-color:var(--accent-2); }
.theme-toggle:active{ transform:scale(0.92); }

main{ max-width:1060px; margin:0 auto; padding:36px 20px 60px; }
.tool{ display:none; }
.tool.active{ display:block; animation:fadeIn .35s ease; }
@keyframes fadeIn{ from{ opacity:0; transform:translateY(6px);} to{ opacity:1; transform:none; } }

h1{ font-size:26px; margin:0 0 6px; }
.eyebrow{
font-family:var(--mono); font-size:12px; letter-spacing:2px; text-transform:uppercase;
color:var(--accent-2); margin:0 0 10px;
}
.lede{ color:var(--text-muted); max-width:560px; margin:0 0 30px; font-size:14.5px; }

.panel{
background:var(--panel);
border:1px solid var(--border);
border-radius:16px;
padding:32px;
}

/* ---------- Flip clock ---------- */
.flip-row{ display:flex; justify-content:center; gap:10px; margin-bottom:20px; flex-wrap:wrap; }
.flip-group{ display:flex; flex-direction:column; align-items:center; gap:8px; }
.flip-digits{ display:flex; gap:3px; }
.flip-unit{
position:relative;
width:64px; height:88px;
perspective:300px;
}
.flip-card{
position:absolute; inset:0;
background:linear-gradient(180deg, var(--panel-raised), var(--flip-shade));
border-radius:8px;
box-shadow:inset 0 0 0 1px var(--border), 0 6px 18px rgba(0,0,0,0.35);
display:flex; align-items:center; justify-content:center;
font-family:var(--mono); font-weight:700; font-size:52px; color:var(--accent);
text-shadow:0 0 18px var(--glow-accent);
}
.flip-unit::after{
content:''; position:absolute; left:0; right:0; top:50%; height:1px;
background:rgba(0,0,0,0.25); transform:translateY(-0.5px); z-index:2;
}
.flip-unit.tick .flip-card{ animation:pulseFlip .32s ease; }
@keyframes pulseFlip{
0%{ filter:brightness(2.4); }
100%{ filter:brightness(1); }
}
.flip-colon{ font-family:var(--mono); font-size:44px; color:var(--text-muted); align-self:center; padding-bottom:14px; }
.flip-label{ font-family:var(--mono); font-size:11px; letter-spacing:2px; color:var(--text-muted); text-transform:uppercase; }
.ring-active .flip-card{ color:var(--danger); text-shadow:0 0 22px var(--glow-danger); animation:ringPulse 1s infinite; }
@keyframes ringPulse{ 50%{ filter:brightness(1.6); } }

/* ---------- Controls ---------- */
.controls{ display:flex; gap:12px; justify-content:center; flex-wrap:wrap; margin-bottom:8px; }
button.btn{
font-family:var(--sans); font-weight:600; font-size:14px;
padding:12px 26px; border-radius:10px; border:1px solid var(--border);
background:var(--panel-raised); color:var(--text); cursor:pointer;
transition:transform .1s, border-color .15s, background .15s;
}
button.btn:hover{ border-color:#3a4250; }
button.btn:active{ transform:scale(0.97); }
button.btn:disabled{ opacity:0.4; cursor:default; }
button.btn.primary{ background:var(--accent); border-color:var(--accent); color:#1a1206; }
button.btn.primary:hover{ filter:brightness(1.08); }
button.btn.danger{ background:transparent; border-color:var(--danger); color:var(--danger); }
button.btn.ghost{ background:transparent; }

.preset-row{ display:flex; gap:8px; justify-content:center; flex-wrap:wrap; margin:22px 0 0; }
.preset-row button{
font-family:var(--mono); font-size:12.5px; padding:7px 12px; border-radius:20px;
border:1px solid var(--border); background:transparent; color:var(--text-muted); cursor:pointer;
}
.preset-row button:hover{ border-color:var(--accent-2); color:var(--accent-2); }
.preset-caption{ text-align:center; font-family:var(--mono); font-size:11px; color:var(--text-muted); letter-spacing:1.5px; text-transform:uppercase; margin:26px 0 10px; }

.custom-input{ display:flex; gap:10px; justify-content:center; margin:22px 0 0; flex-wrap:wrap; }
.custom-input label{ font-family:var(--mono); font-size:11px; color:var(--text-muted); display:block; text-align:center; margin-bottom:6px; text-transform:uppercase; letter-spacing:1px; }
.custom-input input{
width:76px; text-align:center; font-family:var(--mono); font-size:20px;
background:var(--panel-raised); border:1px solid var(--border); color:var(--text);
border-radius:8px; padding:8px 0;
}
.custom-input input:focus{ outline:none; border-color:var(--accent-2); }

/* ---------- Generic form fields ---------- */
.field-group{ display:flex; gap:14px; flex-wrap:wrap; justify-content:center; margin-bottom:22px; align-items:flex-end; }
.field{ display:flex; flex-direction:column; gap:6px; }
.field label{ font-family:var(--mono); font-size:11px; color:var(--text-muted); text-transform:uppercase; letter-spacing:1px; }
.field input[type=date], .field input[type=number], .field input[type=text], .field select{
background:var(--panel-raised); border:1px solid var(--border); color:var(--text);
border-radius:10px; padding:11px 14px; font-family:var(--sans); font-size:14px; min-width:160px;
}
.field input:focus, .field select:focus{ outline:none; border-color:var(--accent-2); }
.checkbox-row{ display:flex; align-items:center; gap:8px; font-size:13px; color:var(--text-muted); justify-content:center; margin-bottom:24px; }
.checkbox-row input{ width:16px; height:16px; accent-color:var(--accent); }

.subtab-row{ display:flex; gap:8px; justify-content:center; margin-bottom:30px; }
.subtab-row button{
font-family:var(--sans); font-weight:600; font-size:13.5px; padding:9px 18px; border-radius:20px;
border:1px solid var(--border); background:transparent; color:var(--text-muted); cursor:pointer;
}
.subtab-row button.active{ background:var(--accent); border-color:var(--accent); color:#1a1206; }
.subview{ display:none; }
.subview.active{ display:block; }

.result-display{ text-align:center; margin:10px 0 8px; }
.result-number{ font-family:var(--mono); font-weight:800; font-size:clamp(40px,8vw,64px); color:var(--accent); text-shadow:0 0 20px var(--glow-accent); }
.result-unit{ font-size:16px; color:var(--text-muted); margin-left:8px; }
.result-sub{ color:var(--text-muted); font-size:13.5px; margin-top:10px; text-align:center; }
.result-grid{ display:grid; grid-template-columns:repeat(auto-fit,minmax(140px,1fr)); gap:14px; margin-top:26px; }
.result-item{ background:var(--panel-raised); border:1px solid var(--border); border-radius:12px; padding:16px; text-align:center; }
.result-item .num{ font-family:var(--mono); font-weight:700; font-size:20px; color:var(--accent-2); }
.result-item .lbl{ font-size:11px; color:var(--text-muted); margin-top:4px; text-transform:uppercase; letter-spacing:1px; font-family:var(--mono); }

/* ---------- D-day / Alarm list style ---------- */
.list-empty{ color:var(--text-muted); font-size:14px; text-align:center; padding:30px 0; }
.dday-list, .alarm-list{ display:flex; flex-direction:column; gap:10px; }
.dday-item, .alarm-item{
display:flex; align-items:center; justify-content:space-between;
background:var(--panel-raised); border:1px solid var(--border); border-radius:12px; padding:16px 18px;
}
.dday-badge{ font-family:var(--mono); font-weight:800; font-size:20px; padding:6px 14px; border-radius:8px; background:var(--soft-accent); color:var(--accent); min-width:70px; text-align:center; }
.dday-badge.past{ background:var(--soft-accent2); color:var(--accent-2); }
.dday-badge.today{ background:var(--soft-danger); color:var(--danger); }
.dday-info{ flex:1; margin-left:16px; }
.dday-info .label{ font-weight:700; font-size:15px; }
.dday-info .date{ font-family:var(--mono); font-size:12px; color:var(--text-muted); margin-top:2px; }
button.del{ background:none; border:none; color:var(--text-muted); cursor:pointer; font-size:18px; }
button.del:hover{ color:var(--danger); }

.alarm-item.disabled{ opacity:0.4; }
.alarm-time{ font-family:var(--mono); font-size:24px; font-weight:700; }
.alarm-meta{ font-size:12.5px; color:var(--text-muted); }
.alarm-actions{ display:flex; align-items:center; gap:14px; }
.switch{ position:relative; width:42px; height:24px; }
.switch input{ opacity:0; width:0; height:0; }
.slider{ position:absolute; inset:0; background:#333; border-radius:24px; cursor:pointer; transition:.2s; }
.slider::before{ content:''; position:absolute; width:18px; height:18px; left:3px; top:3px; background:white; border-radius:50%; transition:.2s; }
.switch input:checked + .slider{ background:var(--accent); }
.switch input:checked + .slider::before{ transform:translateX(18px); }

/* ---------- Pomodoro ---------- */
.phase-label{ text-align:center; font-family:var(--mono); font-size:13px; letter-spacing:3px; text-transform:uppercase; color:var(--accent-2); margin-bottom:18px; }
.phase-label.break{ color:var(--accent); }
.cycle-dots{ display:flex; gap:8px; justify-content:center; margin:6px 0 26px; }
.cycle-dots .dot{ width:10px; height:10px; border-radius:50%; background:var(--panel-raised); border:1px solid var(--border); }
.cycle-dots .dot.done{ background:var(--accent); border-color:var(--accent); }

/* ---------- Stopwatch ---------- */
.sw-display{
font-family:var(--mono); font-weight:800; font-size:clamp(48px,9vw,84px);
text-align:center; color:var(--accent); letter-spacing:2px;
text-shadow:0 0 20px var(--glow-accent);
margin-bottom:26px;
}
.sw-display .ms{ font-size:0.45em; color:var(--text-muted); }
.laps{ margin-top:26px; max-height:280px; overflow-y:auto; }
.lap-row{ display:flex; justify-content:space-between; padding:10px 14px; border-bottom:1px solid var(--border); font-family:var(--mono); font-size:13px; }
.lap-row:first-child{ color:var(--accent-2); }
.lap-row .lap-idx{ color:var(--text-muted); }

/* ---------- World clock ---------- */
.city-search{ display:flex; gap:10px; margin-bottom:24px; }
.city-search input{
flex:1; background:var(--panel-raised); border:1px solid var(--border);
color:var(--text); border-radius:10px; padding:12px 14px; font-family:var(--sans); font-size:14px;
}
.city-search input:focus{ outline:none; border-color:var(--accent-2); }
.city-grid{ display:grid; grid-template-columns:repeat(auto-fill, minmax(220px,1fr)); gap:14px; }
.city-card{ background:var(--panel-raised); border:1px solid var(--border); border-radius:14px; padding:18px; position:relative; overflow:hidden; }
.city-card .remove{ position:absolute; top:10px; right:12px; background:none; border:none; color:var(--text-muted); cursor:pointer; font-size:16px; line-height:1; }
.city-card .remove:hover{ color:var(--danger); }
.city-name{ font-weight:700; font-size:15px; margin-bottom:2px; }
.city-sub{ font-family:var(--mono); font-size:11px; color:var(--text-muted); margin-bottom:14px; text-transform:uppercase; letter-spacing:1px; }
.city-time{ font-family:var(--mono); font-size:30px; color:var(--accent); font-weight:700; letter-spacing:1px; }
.city-date{ font-size:12px; color:var(--text-muted); margin-top:4px; }
.city-diff{ position:absolute; bottom:14px; right:16px; font-family:var(--mono); font-size:11px; color:var(--accent-2); }

/* ---------- Meeting planner ---------- */
.city-pickers{ display:flex; gap:14px; justify-content:center; flex-wrap:wrap; margin-bottom:30px; align-items:flex-end; }
.city-pickers .swap{ background:var(--panel-raised); border:1px solid var(--border); border-radius:50%; width:40px; height:40px; color:var(--text-muted); cursor:pointer; font-size:16px; margin-bottom:1px; }
.city-pickers .swap:hover{ color:var(--accent-2); border-color:var(--accent-2); }
.timeline-wrap{ overflow-x:auto; padding-bottom:10px; }
.timeline{ display:flex; gap:3px; min-width:680px; }
.tl-cell{ flex:1; min-width:26px; text-align:center; border-radius:6px; padding:8px 2px 6px; background:var(--panel-raised); border:1px solid var(--border); }
.tl-cell.overlap{ background:var(--soft-accent2-strong); border-color:var(--accent-2); }
.tl-cell .a{ font-family:var(--mono); font-size:11px; color:var(--text); }
.tl-cell .b{ font-family:var(--mono); font-size:10px; color:var(--text-muted); margin-top:3px; }
.tl-cell .shift{ font-size:8px; color:var(--accent-2); vertical-align:super; }
.meeting-summary{ margin-top:22px; text-align:center; font-size:14px; color:var(--text); background:var(--panel-raised); border:1px solid var(--border); border-radius:12px; padding:16px; }
.meeting-summary strong{ color:var(--accent-2); }
.timeline-legend{ text-align:center; font-size:11.5px; color:var(--text-muted); margin-top:10px; font-family:var(--mono); }

/* ---------- Alarm form ---------- */
.alarm-form, .dday-form{ display:flex; gap:10px; align-items:flex-end; flex-wrap:wrap; margin-bottom:26px; }
.alarm-form input[type=time]{
background:var(--panel-raised); border:1px solid var(--border); color:var(--text);
border-radius:10px; padding:11px 14px; font-family:var(--mono); font-size:18px;
}
.alarm-form input[type=text], .dday-form input[type=text]{
background:var(--panel-raised); border:1px solid var(--border); color:var(--text);
border-radius:10px; padding:11px 14px; font-family:var(--sans); font-size:14px; width:160px;
}

/* ---------- SEO content blocks ---------- */
.info-block{ margin-top:56px; border-top:1px solid var(--border); padding-top:36px; }
.info-block h2{ font-size:19px; margin-bottom:14px; }
.info-block p{ color:var(--text-muted); font-size:14px; max-width:680px; }
.faq-item{ margin-bottom:18px; max-width:680px; }
.faq-item h3{ font-size:15px; margin:0 0 6px; }
.faq-item p{ margin:0; font-size:13.5px; }

/* ---------- Fullscreen mode ---------- */
.fs-exit-hint{ display:none; font-family:var(--mono); font-size:12px; color:var(--text-muted); margin-top:28px; letter-spacing:1px; text-align:center; }
.fs-area:fullscreen,
.fs-area:-webkit-full-screen{
background:#0b0d10;
display:flex; flex-direction:column; align-items:center; justify-content:center;
width:100%; height:100%;
}
.fs-area:fullscreen .fs-exit-hint,
.fs-area:-webkit-full-screen .fs-exit-hint{ display:block; }
.fs-area:fullscreen .flip-card,
.fs-area:-webkit-full-screen .flip-card{ font-size:min(16vw,220px); }
.fs-area:fullscreen .flip-unit,
.fs-area:-webkit-full-screen .flip-unit{ width:min(18vw,250px); height:min(25vw,340px); }
.fs-area:fullscreen .flip-colon,
.fs-area:-webkit-full-screen .flip-colon{ font-size:min(12vw,160px); }
.fs-area:fullscreen .flip-label,
.fs-area:-webkit-full-screen .flip-label{ font-size:14px; }
.fs-area:fullscreen .phase-label,
.fs-area:-webkit-full-screen .phase-label{ font-size:20px; margin-bottom:30px; }
.fs-area:fullscreen .sw-display,
.fs-area:-webkit-full-screen .sw-display{ font-size:min(18vw,220px); margin-bottom:40px; }
.fs-area:fullscreen .controls,
.fs-area:-webkit-full-screen .controls{ transform:scale(1.15); }

/* ---------- D-day share ---------- */
.dday-actions{ display:flex; align-items:center; gap:14px; }
.icon-btn{ background:none; border:none; color:var(--text-muted); cursor:pointer; font-size:18px; line-height:1; padding:4px; }
.icon-btn:hover{ color:var(--accent-2); }
.icon-btn.del:hover{ color:var(--danger); }

/* ---------- Server time ---------- */
#stDisplay.st-warning{ color:var(--danger); text-shadow:0 0 22px var(--glow-danger); animation:ringPulse 1s infinite; }
#stExternalResult.success{ color:var(--accent-2); }
#stExternalResult.error{ color:var(--text-muted); }

footer{ border-top:1px solid var(--border); padding:26px 20px; text-align:center; color:var(--text-muted); font-size:12.5px; font-family:var(--mono); }
.footer-links{ margin-top:10px; }
.footer-links a{ color:var(--text-muted); text-decoration:none; }
.footer-links a:hover{ color:var(--accent-2); text-decoration:underline; }
.footer-links span{ margin:0 8px; opacity:0.5; }

.info-block ul{ color:var(--text-muted); font-size:14px; max-width:680px; padding-left:20px; margin:10px 0 22px; }
.info-block ul li{ margin-bottom:6px; }

.popular-tools{ margin-top:28px; }
.popular-grid{ display:grid; grid-template-columns:repeat(auto-fit,minmax(150px,1fr)); gap:12px; }
.popular-card{
display:flex; flex-direction:column; align-items:flex-start; gap:4px;
background:var(--panel); border:1px solid var(--border); border-radius:14px;
padding:16px; cursor:pointer; text-align:left; font-family:var(--sans);
text-decoration:none; color:inherit;
transition:border-color .15s, transform .1s;
}
.popular-card:hover{ border-color:var(--accent); transform:translateY(-2px); }
.popular-card:active{ transform:translateY(0); }
.popular-icon{ font-size:22px; }
.popular-name{ font-weight:700; font-size:14.5px; color:var(--text); margin-top:4px; }
.popular-desc{ font-size:12px; color:var(--text-muted); }

/* ---------- Chat ---------- */
.chat-room-label{ font-family:var(--mono); font-size:12px; color:var(--accent-2); margin:0 0 12px; }
.chat-messages{
height:260px; overflow-y:auto; background:var(--panel-raised); border:1px solid var(--border);
border-radius:12px; padding:14px; display:flex; flex-direction:column; gap:9px; margin-bottom:12px;
}
.chat-msg{ font-size:13.5px; line-height:1.5; word-break:break-word; }
.chat-msg .name{ font-family:var(--mono); font-weight:700; color:var(--accent-2); margin-right:6px; }
.chat-msg .time{ font-family:var(--mono); font-size:10.5px; color:var(--text-muted); margin-left:6px; }
.chat-empty{ color:var(--text-muted); font-size:13px; text-align:center; padding:20px 0; margin:auto; }
.chat-input-row{ display:flex; gap:8px; }
.chat-input-row input[type=text]{
flex:1; background:var(--panel-raised); border:1px solid var(--border); border-radius:10px;
padding:10px 14px; color:var(--text); font-family:var(--sans); font-size:14px;
}
.chat-input-row input[type=text]:focus{ outline:none; border-color:var(--accent-2); }

/* ---------- Progress bar (전역일 계산기 등) ---------- */
.progress-bar{ width:100%; height:12px; background:var(--panel-raised); border:1px solid var(--border); border-radius:8px; overflow:hidden; margin-top:18px; }
.progress-fill{ height:100%; background:linear-gradient(90deg, var(--accent-2), var(--accent)); border-radius:8px; transition:width .4s ease; }
.disclaimer{ font-size:12.5px; color:var(--text-muted); background:var(--panel-raised); border:1px solid var(--border); border-radius:10px; padding:12px 16px; margin-top:16px; }

/* ---------- Server time 2-column layout (desktop) ---------- */
.st-layout{ display:grid; grid-template-columns:1fr 1fr; gap:20px; align-items:start; }
.st-col{ display:flex; flex-direction:column; }
.st-chat-panel{ display:flex; flex-direction:column; height:100%; }
.st-chat-panel .chat-messages{ flex:1; min-height:340px; }
@media (max-width: 860px){
.st-layout{ grid-template-columns:1fr; }
.st-chat-panel .chat-messages{ min-height:260px; }
}

@media (max-width: 560px){
.header-inner{ flex-direction:column; gap:12px; align-items:stretch; }
nav.tabs{ justify-content:center; }
.flip-unit{ width:48px; height:66px; }
.flip-card{ font-size:36px; }
.flip-colon{ font-size:32px; padding-bottom:8px; }
.panel{ padding:20px; }
.field input, .field select{ min-width:130px; }
}

@media (prefers-reduced-motion: reduce){
*{ animation-duration:0.001ms !important; transition-duration:0.001ms !important; }
}

/* ---------- Blog ---------- */
.blog-list{ display:flex; flex-direction:column; gap:16px; margin-top:8px; }
.blog-card{
display:block; background:var(--panel); border:1px solid var(--border); border-radius:16px;
padding:24px 26px; text-decoration:none; color:inherit;
transition:border-color .15s, transform .1s;
}
.blog-card:hover{ border-color:var(--accent); transform:translateY(-2px); }
.blog-meta{ font-family:var(--mono); font-size:11.5px; color:var(--accent-2); letter-spacing:1px; text-transform:uppercase; margin-bottom:8px; display:flex; gap:10px; align-items:center; }
.blog-meta .cat{ background:var(--soft-accent2); color:var(--accent-2); padding:3px 9px; border-radius:6px; }
.blog-card h2{ font-size:18px; margin:0 0 8px; }
.blog-card p{ color:var(--text-muted); font-size:13.5px; margin:0; }
.blog-post main{ max-width:720px; }
.blog-post .blog-meta{ margin-bottom:18px; }
.blog-post h1{ font-size:28px; margin-bottom:16px; }
.blog-post .panel{ font-size:15px; }
.blog-post .panel h2{ font-size:19px; margin:34px 0 12px; }
.blog-post .panel h2:first-child{ margin-top:0; }
.blog-post .panel p{ color:var(--text); margin:0 0 16px; }
.blog-post .panel ul{ color:var(--text); padding-left:20px; margin:0 0 16px; }
.blog-post .panel li{ margin-bottom:6px; }
.blog-post .back-link{ display:inline-block; margin-top:30px; font-size:13.5px; color:var(--accent-2); text-decoration:none; }
.blog-post .back-link:hover{ text-decoration:underline; }