/* styles.css — tommy.log shared stylesheet (D2 "Stack" design) */
:root{
  --ink:#0E141B; --mute:#6A7686; --dim:#9AA5B3; --line:#E4EAF2; --line-soft:#EEF2F7;
  --bg:#FFFFFF; --bg-soft:#F5F8FB;
  --accent:#0E8F7E;
  --it:#3B6BD6; --ai:#0E8F7E; --game:#7A5BD9; --golf:#3F8C4E;
  --font-sans:"Pretendard Variable",Pretendard,-apple-system,BlinkMacSystemFont,system-ui,"Segoe UI",Roboto,sans-serif;
  --font-mono:"IBM Plex Mono",ui-monospace,"SFMono-Regular",Menlo,monospace;
}
*{box-sizing:border-box}
html,body{margin:0;padding:0}
body{font-family:var(--font-sans);color:var(--ink);background:var(--bg);-webkit-font-smoothing:antialiased;text-wrap:pretty}
a{color:inherit;text-decoration:none}
a:hover{color:var(--accent)}
img{max-width:100%;display:block}
.wrap{max-width:1280px;margin:0 auto}
.mono{font-family:var(--font-mono)}

/* Header */
.site-header{border-bottom:1px solid var(--line);padding:18px 40px;display:flex;align-items:center;justify-content:space-between;flex-wrap:wrap;gap:12px}
.logo{font-size:22px;font-weight:800;letter-spacing:-.02em}
.logo span{color:var(--accent)}
.header-meta{font-family:var(--font-mono);font-size:11px;color:var(--mute);letter-spacing:.08em}
.header-left{display:flex;align-items:baseline;gap:14px;flex-wrap:wrap}
.main-nav{display:flex;gap:24px;align-items:center;font-size:14px;font-weight:500}
.main-nav a{color:var(--ink)}
.main-nav .muted{color:var(--mute)}
.kbd{padding:6px 12px;border:1px solid var(--line);font-size:12px;color:var(--mute);font-family:var(--font-mono);letter-spacing:.08em}

/* Footer */
.site-footer{border-top:1px solid var(--line);padding:32px 40px;display:flex;justify-content:space-between;align-items:flex-end;flex-wrap:wrap;gap:20px}
.site-footer .logo{font-size:18px}
.footer-sub{font-size:12px;color:var(--mute);margin-top:4px}
.footer-links{display:flex;gap:18px;font-size:12px;color:var(--mute);font-family:var(--font-mono);letter-spacing:.06em}
.footer-links a{color:var(--mute)}

/* Category pill / dot */
.cat-dot{display:inline-block;width:8px;height:8px;border-radius:999px;margin-right:6px;vertical-align:middle}
.cat-pill{display:inline-flex;align-items:center;gap:6px;padding:3px 8px;font-size:11px;font-weight:600;letter-spacing:.04em;font-family:var(--font-mono);text-transform:uppercase}
.cat-it{color:var(--it);background:color-mix(in oklch,var(--it) 8%,white);border:1px solid color-mix(in oklch,var(--it) 25%,white)}
.cat-ai{color:var(--ai);background:color-mix(in oklch,var(--ai) 8%,white);border:1px solid color-mix(in oklch,var(--ai) 25%,white)}
.cat-game{color:var(--game);background:color-mix(in oklch,var(--game) 8%,white);border:1px solid color-mix(in oklch,var(--game) 25%,white)}
.cat-golf{color:var(--golf);background:color-mix(in oklch,var(--golf) 8%,white);border:1px solid color-mix(in oklch,var(--golf) 25%,white)}
.dot-it{background:var(--it)} .dot-ai{background:var(--ai)} .dot-game{background:var(--game)} .dot-golf{background:var(--golf)}
.tx-it{color:var(--it)} .tx-ai{color:var(--ai)} .tx-game{color:var(--game)} .tx-golf{color:var(--golf)}

/* ===== Home (index) ===== */
.hero{padding:64px 80px 48px;border-bottom:1px solid var(--line);display:grid;grid-template-columns:1fr 320px;gap:80px}
.hero .eyebrow{font-family:var(--font-mono);font-size:12px;color:var(--accent);letter-spacing:.12em;margin-bottom:18px}
.hero h1{font-size:44px;line-height:1.2;letter-spacing:-.025em;font-weight:700;margin:0 0 18px}
.hero h1 .muted{color:var(--mute)}
.hero p{font-size:16px;line-height:1.7;color:#3A4654;margin:0;max-width:580px}
.side-rail{border-left:1px solid var(--line);padding-left:28px}
.side-rail .rail-title{font-family:var(--font-mono);font-size:11px;color:var(--mute);letter-spacing:.1em;margin-bottom:14px}
.filter-row{display:flex;justify-content:space-between;align-items:center;padding:10px 0;border-bottom:1px dashed var(--line)}
.filter-row .name{display:inline-flex;align-items:center;gap:10px;font-size:14px;font-weight:500}
.filter-row .name .en{color:var(--mute);font-size:12px;margin-left:4px}
.filter-row .count{font-family:var(--font-mono);font-size:12px;color:var(--mute)}
.reading-box{margin-top:22px;padding:16px;background:var(--bg-soft);border:1px solid var(--line)}
.reading-box .label{font-family:var(--font-mono);font-size:11px;color:var(--mute);letter-spacing:.08em;margin-bottom:8px}
.reading-box .title{font-size:14px;font-weight:600;line-height:1.4}
.reading-box .sub{font-size:12px;color:var(--mute);margin-top:2px}

.timeline{padding:32px 80px 64px}
.month-block{display:grid;grid-template-columns:120px 1fr;gap:40px;padding:32px 0;border-top:1px solid var(--line)}
.month-label{font-size:28px;font-weight:800;letter-spacing:-.02em;line-height:1}
.month-meta{font-family:var(--font-mono);font-size:12px;color:var(--mute);letter-spacing:.08em;margin-top:4px}
.post-row{display:grid;grid-template-columns:92px 1fr 100px;gap:28px;align-items:baseline;padding:22px 0;border-bottom:1px solid var(--line-soft)}
.post-row:last-child{border-bottom:none}
.post-date{font-family:var(--font-mono);font-size:12px;color:var(--mute);letter-spacing:.06em;padding-top:6px}
.post-meta-line{display:flex;align-items:center;gap:10px;margin-bottom:6px}
.post-meta-line .cat{font-family:var(--font-mono);font-size:11px;letter-spacing:.1em;font-weight:600;text-transform:uppercase}
.post-meta-line .tag{font-family:var(--font-mono);font-size:10px;color:var(--dim);letter-spacing:.08em}
.post-title{font-size:21px;line-height:1.3;letter-spacing:-.015em;font-weight:700;margin:0 0 6px}
.post-excerpt{font-size:14px;line-height:1.6;color:#5A6675;margin:0;max-width:640px}
.post-read{font-family:var(--font-mono);font-size:12px;color:var(--dim);text-align:right;padding-top:6px}
.load-more{margin-top:40px;text-align:center;font-family:var(--font-mono);font-size:12px;color:var(--mute);letter-spacing:.08em}

/* ===== Post detail ===== */
.post-crumb{padding:16px 80px;border-bottom:1px solid var(--line);font-family:var(--font-mono);font-size:11px;color:var(--mute);letter-spacing:.08em;display:flex;justify-content:space-between;flex-wrap:wrap;gap:8px}
.article-wrap{padding:56px 80px 0}
.article-head{max-width:680px;margin:0 auto}
.article-head .meta-line{display:flex;align-items:center;gap:10px;margin-bottom:18px}
.article-head .meta-line .cat{font-family:var(--font-mono);font-size:11px;letter-spacing:.1em;font-weight:600;text-transform:uppercase}
.article-head h1{font-size:42px;line-height:1.2;letter-spacing:-.025em;font-weight:700;margin:0 0 20px}
.article-head .excerpt{font-size:17px;line-height:1.6;color:#5A6675;margin:0 0 28px}
.byline{display:flex;justify-content:space-between;align-items:center;padding:16px 0;border-top:1px solid var(--line);border-bottom:1px solid var(--line);margin-bottom:48px;font-family:var(--font-mono);font-size:12px;color:var(--mute);letter-spacing:.06em}
.article-body{max-width:680px;margin:0 auto;font-size:17px;line-height:1.85;color:#1A222E}
.article-body p{text-wrap:pretty}
.article-body h2{font-size:24px;font-weight:700;letter-spacing:-.015em;margin:40px 0 14px}
.article-body blockquote{margin:32px 0;padding:4px 0 4px 24px;border-left:2px solid var(--accent);font-size:18px;line-height:1.6;color:#3A4654;font-style:italic}
.article-body pre{background:#0E141B;color:#E8ECF1;padding:20px;font-size:13px;line-height:1.6;font-family:var(--font-mono);margin:28px 0;overflow-x:auto}
.article-body code{font-family:var(--font-mono)}
.related-section{padding:56px 80px 64px;border-top:1px solid var(--line);margin-top:56px}
.related-inner{max-width:680px;margin:0 auto}
.related-title{font-family:var(--font-mono);font-size:11px;letter-spacing:.12em;color:var(--mute);margin-bottom:20px;text-transform:uppercase}
.related-row{display:grid;grid-template-columns:100px 1fr 80px;gap:24px;padding:18px 0;border-bottom:1px solid var(--line-soft);align-items:baseline}
.related-row:last-child{border-bottom:none}

/* ===== Comments ===== */
.comments-section{padding:0 80px 64px}
.comments-inner{max-width:680px;margin:0 auto}
.comments-title{font-family:var(--font-mono);font-size:11px;letter-spacing:.12em;color:var(--mute);margin-bottom:20px;text-transform:uppercase}
.comment-row{padding:16px 0;border-bottom:1px solid var(--line-soft)}
.comment-meta{display:flex;gap:10px;align-items:baseline;margin-bottom:6px}
.comment-author{font-size:14px;font-weight:700}
.comment-date{font-family:var(--font-mono);font-size:11px;color:var(--mute)}
.comment-body{font-size:14px;line-height:1.6;color:#1A222E}
.comment-form{margin-top:24px;padding-top:24px;border-top:1px solid var(--line)}
.comment-form input,.comment-form textarea{width:100%;border:1px solid var(--line);padding:10px 12px;font-size:14px;font-family:inherit;outline:none;box-sizing:border-box;margin-bottom:10px}
.comment-form textarea{min-height:80px;resize:vertical}

/* ===== Category page ===== */
.cat-hero{padding:56px 80px 40px;border-bottom:1px solid var(--line);display:grid;grid-template-columns:1fr 320px;gap:80px}
.cat-hero h1{display:flex;align-items:baseline;gap:16px;font-size:48px;font-weight:800;letter-spacing:-.025em;margin:0 0 18px}
.cat-hero h1 .en{font-family:var(--font-mono);font-size:14px;color:var(--mute);letter-spacing:.06em;font-weight:500}
.cat-hero .dot-lg{width:12px;height:12px;border-radius:999px}
.cat-hero p{font-size:16px;line-height:1.7;color:#3A4654;margin:0;max-width:560px}
.cat-list{padding:16px 80px 64px}

/* ===== About page ===== */
.about-hero{padding:64px 80px 48px;border-bottom:1px solid var(--line);display:grid;grid-template-columns:1fr 320px;gap:80px}
.about-hero h1{font-size:44px;line-height:1.2;letter-spacing:-.025em;font-weight:700;margin:0 0 20px}
.about-hero .body-text{font-size:16px;line-height:1.75;color:#1A222E;max-width:560px}
.stack-row{display:flex;justify-content:space-between;padding:9px 0;border-bottom:1px dashed var(--line);font-size:13px}
.stack-row .k{color:var(--mute)}
.stack-row .v{font-weight:600}
.contact-line{margin-top:18px;font-family:var(--font-mono);font-size:12px;color:var(--mute)}
.history-section{padding:48px 80px 64px}
.history-title{font-family:var(--font-mono);font-size:11px;letter-spacing:.12em;color:var(--mute);margin-bottom:20px;text-transform:uppercase}
.history-row{display:grid;grid-template-columns:120px 1fr;gap:24px;padding:16px 0;border-bottom:1px solid var(--line);align-items:baseline}
.history-row:last-child{border-bottom:none}
.history-year{font-family:var(--font-mono);font-size:16px;color:var(--accent);letter-spacing:.04em;font-weight:700}
.history-text{font-size:16px;color:#1A222E}

/* ===== Newsletter form (footer of home) ===== */
.subscribe{margin:0 80px 64px;padding:36px;background:var(--bg-soft);border:1px solid var(--line);display:grid;grid-template-columns:1.2fr 1fr;gap:32px;align-items:center}
.subscribe h3{font-size:22px;font-weight:700;letter-spacing:-.02em;margin:0 0 8px}
.subscribe p{font-size:13px;color:var(--mute);margin:0}
.subscribe-form{display:flex}
.subscribe-form input{flex:1;border:1px solid var(--line);padding:12px 14px;font-size:14px;font-family:inherit;outline:none}
.subscribe-form button{background:var(--accent);color:#fff;border:none;padding:0 20px;font-size:14px;font-weight:600;cursor:pointer;font-family:inherit}

/* ===== Mobile ===== */
@media (max-width:820px){
  .site-header{padding:14px 20px}
  .header-meta{display:none}
  .main-nav{gap:16px;font-size:13px}
  .kbd{display:none}
  .hero,.cat-hero,.about-hero{grid-template-columns:1fr;padding:32px 20px;gap:24px}
  .hero h1{font-size:30px}
  .cat-hero h1{font-size:34px}
  .about-hero h1{font-size:32px}
  .side-rail{border-left:none;border-top:1px solid var(--line);padding-left:0;padding-top:20px}
  .timeline,.article-wrap,.cat-list,.history-section,.related-section,.post-crumb{padding-left:20px;padding-right:20px}
  .month-block{grid-template-columns:1fr;gap:12px}
  .post-row{grid-template-columns:1fr;gap:6px}
  .post-date{padding-top:0}
  .post-read{text-align:left;padding-top:0}
  .subscribe{margin:0 20px 40px;grid-template-columns:1fr}
  .site-footer{padding:24px 20px}
  .related-row{grid-template-columns:1fr}
}