/* Theme: Index-card Catalog (site 057) — from design-system sample */
  :root{
    --bg:#EDE4CE; --surface:#F6EFDC; --surface-alt:#E2D6B8;
    --text:#23211C; --muted:#5C5444; --border:#C7B98F;
    --accent:#A11E1E; --accent-2:#1F4E66; --cream:#F6EFDC;
    --success:#3F6B2E;
    --font-body:'Gowun Batang','Noto Serif KR','Nanum Myeongjo',serif;
    --font-head:'Noto Serif KR','Gowun Batang','Nanum Myeongjo',serif;
    --font-mono:'IBM Plex Mono','D2Coding','Courier New',monospace;
    --shadow-rest:2px 2px 0 #C7B98F;
    --shadow-hover:4px 4px 0 #C7B98F;
    --sp-1:4px; --sp-2:8px; --sp-3:16px; --sp-4:24px; --sp-5:32px; --sp-6:48px;
    --shell:1040px; --rail:240px;
  }
  *{box-sizing:border-box}
  html{-webkit-text-size-adjust:100%}
  body{
    margin:0;background:var(--bg);color:var(--text);
    font-family:var(--font-body);font-size:16px;line-height:1.7;
    letter-spacing:-0.01em;overflow-x:hidden;
  }
  a{color:var(--accent-2);text-underline-offset:2px}
  a:focus-visible,button:focus-visible,input:focus-visible{
    outline:2px solid var(--accent-2);outline-offset:2px;
  }
  img{max-width:100%}
  .mono{font-family:var(--font-mono);letter-spacing:.02em}
  .shell{max-width:var(--shell);margin:0 auto;padding:0 var(--sp-3)}

  /* ---- skip link ---- */
  .skip{position:absolute;left:-999px;top:0;background:var(--accent);color:var(--cream);
    padding:8px 14px;z-index:50;font-family:var(--font-mono);border-radius:0 0 3px 0}
  .skip:focus{left:0}

  /* ---- masthead / GNB (서랍 손잡이 스트립) ---- */
  .masthead{background:var(--surface-alt);border-bottom:2px solid var(--text)}
  .masthead-top{display:flex;align-items:center;gap:var(--sp-3);
    padding:var(--sp-3);max-width:var(--shell);margin:0 auto;flex-wrap:wrap}
  .logo-stamp{display:inline-flex;flex-direction:column;line-height:1.05;
    border:2px solid var(--text);border-radius:3px;padding:6px 12px;background:var(--surface);
    font-family:var(--font-mono);text-decoration:none;color:var(--text)}
  .logo-stamp b{font-size:18px;letter-spacing:.06em}
  .logo-stamp span{font-size:11px;color:var(--accent);letter-spacing:.12em;text-transform:uppercase}
  .masthead-meta{font-family:var(--font-mono);font-size:12.8px;color:var(--muted);
    margin-left:auto;text-align:right;line-height:1.45}
  .search{display:flex;align-items:flex-end;gap:6px;margin-left:var(--sp-3)}
  .search label{font-family:var(--font-mono);font-size:11px;color:var(--muted);
    letter-spacing:.06em;text-transform:uppercase;padding-bottom:10px}
  .search input{font-family:var(--font-mono);font-size:14px;background:transparent;
    border:none;border-bottom:1.5px solid var(--muted);color:var(--text);
    padding:6px 4px;min-width:160px;min-height:44px}
  .search input::placeholder{color:var(--muted);font-family:var(--font-mono)}
  .search input:focus{outline:none;border-bottom:2px solid var(--accent)}
  /* nav tab strip */
  nav.gnb{border-top:1px solid var(--border);background:var(--surface-alt)}
  .gnb-tabs{display:flex;gap:6px;overflow-x:auto;max-width:var(--shell);margin:0 auto;
    padding:8px var(--sp-3);scrollbar-width:thin}
  .tab{display:inline-flex;align-items:center;white-space:nowrap;
    font-family:var(--font-mono);font-size:13px;letter-spacing:.04em;text-transform:uppercase;
    text-decoration:none;color:var(--accent-2);background:var(--surface);
    border:1px solid var(--border);border-radius:2px;padding:8px 12px;min-height:44px}
  .tab.active{background:var(--accent);color:var(--cream);border-color:#7C1414;font-weight:600}
  .tab:hover:not(.active){color:var(--accent)}

  /* ---- card primitives (색인 카드) ---- */
  .card{position:relative;background:var(--surface);border:1px solid var(--border);
    border-radius:3px;padding:var(--sp-3)}
  .card::before{content:"";position:absolute;top:-2px;left:14px;width:8px;height:28px;
    background:var(--accent);border-radius:0 0 3px 0}
  .call{font-family:var(--font-mono);font-size:13px;letter-spacing:.04em;color:var(--accent);
    text-transform:uppercase;font-weight:600}
  .meta{font-family:var(--font-mono);font-size:12.8px;color:var(--muted);line-height:1.4}
  .stamp{font-family:var(--font-mono);font-size:11.5px;color:var(--muted);
    border:1px dotted var(--muted);border-radius:2px;padding:1px 6px;display:inline-block}

  /* 4:3 svg image box */
  .imgbox{aspect-ratio:4/3;width:100%;border:1px solid var(--border);border-radius:3px;
    overflow:hidden;background:var(--surface-alt);display:block}
  .imgbox svg{display:block;width:100%;height:100%}

  /* ---- front page grid ---- */
  main{padding:var(--sp-5) 0 var(--sp-6)}
  .front-grid{display:grid;grid-template-columns:1fr var(--rail);gap:var(--sp-5)}
  .lead-row{display:grid;grid-template-columns:1.5fr 1fr;gap:var(--sp-3);margin-bottom:var(--sp-5)}
  .lead-card:hover{box-shadow:var(--shadow-hover);transition:box-shadow .12s}
  .lead-card .imgbox{margin-bottom:var(--sp-3)}
  .lead-card h2{font-family:var(--font-head);font-size:25px;line-height:1.2;font-weight:700;
    margin:6px 0 var(--sp-2)}
  .lead-card h2 a{color:var(--text);text-decoration:none;border-bottom:2px solid var(--accent-2)}
  .lead-card h2 a:hover{color:var(--accent-2)}
  .lead-card p.excerpt{margin:0 0 var(--sp-2);color:var(--text)}
  .badge-new{display:inline-block;font-family:var(--font-mono);font-size:11px;color:var(--cream);
    background:var(--accent);border:2px solid #7C1414;border-radius:2px;padding:1px 6px;
    transform:rotate(-3deg);letter-spacing:.06em;font-weight:600;margin-bottom:var(--sp-1)}

  .sec-cards{display:flex;flex-direction:column;gap:var(--sp-3)}
  .mini-card{display:grid;grid-template-columns:96px 1fr;gap:var(--sp-3);
    padding:var(--sp-3) var(--sp-3) var(--sp-3)}
  .mini-card .imgbox{margin-top:4px}
  .mini-card h3{font-family:var(--font-head);font-size:16px;line-height:1.32;font-weight:600;margin:4px 0 6px}
  .mini-card h3 a{color:var(--accent-2);text-decoration:underline}
  .mini-card h3 a:hover{color:var(--accent)}

  /* ---- 3-column section blocks (분야별 서랍) ---- */
  .section-blocks{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:var(--sp-3)}
  .drawer-head{display:flex;align-items:baseline;gap:8px;border-bottom:2px solid var(--accent);
    padding-bottom:6px;margin-bottom:var(--sp-2)}
  .drawer-head .call{font-size:12.5px}
  .drawer-head h2{font-family:var(--font-head);font-size:20px;line-height:1.25;font-weight:700;margin:0}
  .drawer ul{list-style:none;margin:0 0 var(--sp-3);padding:0}
  .drawer li{border-bottom:1px solid var(--border);padding:7px 6px;display:flex;gap:8px;align-items:flex-start}
  .drawer li:nth-child(even){background:var(--surface-alt)}
  .drawer li .call{flex:0 0 auto;font-size:11.5px;padding-top:3px}
  .drawer li a{color:var(--accent-2);text-decoration:underline;font-size:15px;line-height:1.4}
  .drawer li a:hover{color:var(--accent)}
  .drawer .imgbox{margin-top:var(--sp-1)}

  /* ---- right ranking rail (가장 많이 꺼내본 카드) ---- */
  aside.rail{align-self:start;position:sticky;top:var(--sp-3)}
  .rail-card h2{font-family:var(--font-head);font-size:18px;font-weight:700;margin:0 0 var(--sp-2);
    border-bottom:2px solid var(--accent);padding-bottom:6px}
  .rank-list{list-style:none;margin:0;padding:0}
  .rank-list li{display:grid;grid-template-columns:28px 1fr;gap:8px;align-items:start;
    padding:9px 0;border-bottom:1px solid var(--border)}
  .rank-list li:last-child{border-bottom:none}
  .rank-no{font-family:var(--font-mono);font-weight:700;color:var(--accent);font-size:16px;text-align:center}
  .rank-list a{color:var(--accent-2);text-decoration:underline;font-size:14.5px;line-height:1.35;display:block}
  .rank-list a:hover{color:var(--accent)}
  .rank-views{font-family:var(--font-mono);font-size:11.5px;color:var(--muted);margin-top:2px}
  .verified{font-family:var(--font-mono);font-size:10.5px;color:var(--success);
    border:1px solid var(--success);border-radius:2px;padding:0 4px;margin-left:4px}

  /* ---- buttons ---- */
  .btn{display:inline-flex;align-items:center;justify-content:center;gap:6px;min-height:44px;width:100%;
    font-family:var(--font-mono);font-size:13px;letter-spacing:.04em;text-transform:uppercase;
    text-decoration:none;border-radius:3px;padding:8px 16px;cursor:pointer}
  .btn-primary{background:var(--accent);color:var(--cream);border:none;border-bottom:2px solid #7C1414}
  .btn-primary:hover{background:#8B1A1A;transform:translateY(-1px)}
  .btn-primary:active{transform:translateY(1px)}
  .btn-secondary{background:transparent;color:var(--accent-2);border:1.5px solid var(--accent-2)}
  .btn-secondary:hover{background:var(--bg)}

  /* ---- footer ---- */
  footer{background:var(--surface-alt);border-top:2px solid var(--text);margin-top:var(--sp-6)}
  .foot-in{max-width:var(--shell);margin:0 auto;padding:var(--sp-5) var(--sp-3);
    display:flex;flex-wrap:wrap;gap:var(--sp-4);justify-content:space-between;align-items:center}
  .foot-links{display:flex;flex-wrap:wrap;gap:var(--sp-3)}
  .foot-links a{font-family:var(--font-mono);font-size:13px;color:var(--accent-2);
    text-decoration:underline;display:inline-flex;align-items:center;min-height:44px}
  .foot-label{font-family:var(--font-mono);font-size:12.8px;color:var(--muted);
    border:1px dotted var(--muted);border-radius:2px;padding:6px 10px}
  .foot-copy{font-family:var(--font-mono);font-size:12px;color:var(--muted);
    max-width:var(--shell);margin:0 auto;padding:0 var(--sp-3) var(--sp-5)}

  /* ---- responsive ---- */
  @media (max-width:1024px){
    .front-grid{grid-template-columns:1fr}
    aside.rail{position:static}
  }
  @media (max-width:768px){
    .lead-row{grid-template-columns:1fr}
    .section-blocks{grid-template-columns:1fr 1fr}
    .masthead-meta{margin-left:0;text-align:left;order:3;width:100%}
    .search{margin-left:0;width:100%}
    .search input{flex:1}
  }
  @media (max-width:480px){
    main{padding:var(--sp-4) 0}
    .section-blocks{grid-template-columns:1fr}
    .mini-card{grid-template-columns:80px 1fr}
    .lead-card h2{font-size:22px}
    .lead-card:hover{box-shadow:var(--shadow-rest)}
  }


/* ============ gnuboard dynamic supplements (Index-card Catalog) ============ */
/* thumb images */
.imgbox img{width:100%;height:100%;object-fit:cover;display:block;}
/* pager current page */
.pager strong,.pager .now{
  display:inline-flex;align-items:center;justify-content:center;
  min-width:32px;height:32px;padding:0 8px;
  font-family:var(--font-mono);font-size:13px;font-weight:700;
  background:var(--accent);color:var(--cream);border:1px solid #7C1414;border-radius:2px;
}
/* pager wrap */
.pager{display:flex;flex-wrap:wrap;gap:4px;justify-content:center;margin-top:var(--sp-4);font-family:var(--font-mono);}
.pager a{display:inline-flex;align-items:center;justify-content:center;
  min-width:32px;height:32px;padding:0 8px;font-size:13px;
  color:var(--accent-2);border:1px solid var(--border);border-radius:2px;background:var(--surface);text-decoration:none;}
.pager a:hover{border-color:var(--accent);color:var(--accent);}
/* board list heading */
.board-h1{font-family:var(--font-head);font-size:26px;font-weight:700;margin:0 0 var(--sp-3);
  display:flex;align-items:center;gap:8px;}
.board-h1::before{content:"";width:8px;height:28px;background:var(--accent);display:inline-block;border-radius:0 0 3px 0;}
.board-list-head{display:flex;align-items:center;justify-content:space-between;gap:16px;
  margin-bottom:var(--sp-3);padding-bottom:var(--sp-2);border-bottom:2px solid var(--accent);}
.board-total{font-family:var(--font-mono);font-size:12.8px;color:var(--muted);}
/* board actions bar */
.board-actions{display:flex;justify-content:space-between;align-items:center;gap:12px;flex-wrap:wrap;
  margin-top:var(--sp-4);padding-top:var(--sp-3);border-top:1px solid var(--border);}
.board-search{display:flex;gap:8px;align-items:center;flex-wrap:wrap;}
.board-search select,.board-search input[type=text]{
  height:44px;padding:0 12px;font-family:var(--font-mono);font-size:14px;
  background:var(--surface);color:var(--text);border:1px solid var(--border);border-radius:2px;}
.board-search .btn{width:auto;min-width:80px;}
.btn-write{width:auto;}
/* board card list items */
.card-list{list-style:none;margin:0;padding:0;display:flex;flex-direction:column;gap:var(--sp-3);}
.card-item{display:grid;grid-template-columns:96px 1fr;gap:var(--sp-3);}
.card-item .imgbox{margin-top:4px;}
.card-item-body .call{display:block;margin-bottom:4px;}
.card-item-body h3{font-family:var(--font-head);font-size:17px;line-height:1.35;font-weight:600;margin:0 0 6px;}
.card-item-body h3 a{color:var(--accent-2);text-decoration:underline;}
.card-item-body h3 a:hover{color:var(--accent);}
.card-item-body p.excerpt{font-size:14px;color:var(--muted);margin:0 0 6px;
  display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical;overflow:hidden;}
/* board layout wrapper */
.layout{display:grid;grid-template-columns:1fr var(--rail);gap:var(--sp-5);margin-top:var(--sp-4);}
.rail-panel{align-self:start;position:sticky;top:var(--sp-3);}
.rail-panel .card{margin-bottom:var(--sp-3);}
/* board detail view */
.hm-board-view{background:var(--surface);border:1px solid var(--border);border-radius:3px;
  box-shadow:var(--shadow-rest);padding:var(--sp-5);margin:var(--sp-4) auto var(--sp-3);max-width:860px;}
.hm-view-head{border-bottom:2px solid var(--text);padding-bottom:var(--sp-3);margin-bottom:var(--sp-4);}
.hm-view-head .hm-board-kicker{font-family:var(--font-mono);font-size:11.5px;letter-spacing:.1em;
  text-transform:uppercase;color:var(--accent-2);margin:0 0 8px;}
.hm-view-head h1{font-family:var(--font-head);font-size:26px;font-weight:700;line-height:1.25;color:var(--text);margin:0;}
.hm-view-meta{display:flex;gap:14px;margin-top:10px;font-family:var(--font-mono);font-size:12.8px;color:var(--muted);flex-wrap:wrap;}
.hm-view-content{font-family:var(--font-body);font-size:16px;line-height:1.8;color:var(--text);
  padding:8px 0 var(--sp-4);border-bottom:1px solid var(--border);}
.hm-view-content img{max-width:100%;height:auto;border-radius:3px;border:1px solid var(--border);}
.hm-view-content p{margin:0 0 var(--sp-3);}
.hm-view-files{display:flex;flex-wrap:wrap;gap:8px;margin:var(--sp-3) 0;}
.hm-view-files a{font-family:var(--font-mono);font-size:13px;border:1px solid var(--border);
  border-radius:2px;padding:6px 12px;color:var(--accent-2);background:var(--surface);}
.hm-view-neighbor{display:flex;flex-direction:column;gap:8px;margin:var(--sp-3) 0;}
.hm-view-neighbor a{display:flex;gap:12px;padding:10px 12px;border:1px solid var(--border);
  border-radius:3px;background:var(--surface-alt);text-decoration:none;}
.hm-view-neighbor span{font-family:var(--font-mono);font-size:12px;color:var(--muted);flex:0 0 auto;}
.hm-view-neighbor strong{font-weight:600;color:var(--accent-2);overflow:hidden;text-overflow:ellipsis;white-space:nowrap;}
.hm-view-actions{display:flex;gap:8px;flex-wrap:wrap;margin-top:var(--sp-3);}
.hm-view-actions a{min-height:40px;display:inline-flex;align-items:center;padding:0 16px;
  border:1px solid var(--border);border-radius:3px;font-family:var(--font-mono);font-size:13px;
  color:var(--text);background:var(--surface);text-decoration:none;width:auto;}
.hm-view-actions a.is-primary{background:var(--accent);color:var(--cream);border-color:#7C1414;border-bottom:2px solid #7C1414;}
.hm-view-vote{display:flex;gap:10px;margin:var(--sp-3) 0;}
.hm-view-vote a{padding:8px 16px;border:1px solid var(--border);border-radius:3px;
  color:var(--text);font-family:var(--font-mono);font-size:13px;text-decoration:none;}
/* sr-only */
.sr-only{position:absolute;width:1px;height:1px;overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap;}
/* view detail: section wrapper (이 게시판 목록, 페이징, 추천글) */
.view-section-wrap{max-width:860px;margin:var(--sp-4) auto var(--sp-2);}
@media(max-width:1024px){
  .layout{grid-template-columns:1fr;}
  .rail-panel{position:static;}
}
@media(max-width:768px){
  .card-item{grid-template-columns:80px 1fr;}
  .hm-board-view{padding:var(--sp-3);}
}
@media(max-width:480px){
  .card-item{grid-template-columns:1fr;}
  .card-item .imgbox{max-width:140px;}
}