/* Theme: Muji Japandi Calm (site 071) — from design-system sample */
:root{
    --bg:#F4F1EA; --surface:#FBFAF6; --surface-alt:#EBE6DA;
    --text:#2B2A26; --muted:#605C55; --border:#D8D2C4;
    --accent:#566049; --accent-2:#825435; --danger:#9C4A3C;
    --on-accent:#FFFFFF;
    --r:4px;
    --sh1:0 1px 2px rgba(43,42,38,0.06);
    --sh2:0 4px 12px rgba(43,42,38,0.08);
    --font-body:Pretendard,'Apple SD Gothic Neo','Malgun Gothic',sans-serif;
    --font-head:'Noto Serif KR','Nanum Myeongjo',serif;
    --font-mono:'IBM Plex Mono','D2Coding',monospace;
    --shell:1104px; --rail:316px; --gutter:32px; --measure:660px;
  }
  *{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.75;
    letter-spacing:-0.005em;
    -webkit-font-smoothing:antialiased; text-rendering:optimizeLegibility;
  }
  a{color:var(--accent); text-decoration:none;}
  a:hover{text-decoration:underline;}
  a:focus-visible,button:focus-visible,input:focus-visible{
    outline:2px solid var(--accent); outline-offset:2px;
  }
  img,svg{display:block; max-width:100%;}
  h1,h2,h3{margin:0; font-family:var(--font-head); font-weight:400;}
  h1{font-size:39px; line-height:1.2; font-weight:300; letter-spacing:-0.01em;}
  h2{font-size:25px; line-height:1.25;}
  h3{font-size:20px; line-height:1.3; font-weight:500; font-family:var(--font-body);}
  .mono{font-family:var(--font-mono); font-size:12.8px; line-height:1.5; color:var(--muted);}
  ul{margin:0; padding:0; list-style:none;}

  .shell{max-width:var(--shell); margin:0 auto; padding:0 24px;}

  /* ---------- HEADER / MASTHEAD ---------- */
  header.site{background:var(--bg); border-bottom:1px solid var(--border);}
  .masthead{
    max-width:var(--shell); margin:0 auto; padding:32px 24px 24px;
    display:flex; align-items:flex-end; justify-content:space-between; gap:24px; flex-wrap:wrap;
  }
  .brand{display:flex; flex-direction:column; gap:4px;}
  .brand .logo{
    font-family:var(--font-head); font-weight:300; font-size:31.25px;
    line-height:1; letter-spacing:0.02em; color:var(--text);
  }
  .brand .logo b{font-weight:400;}
  .brand .tagline{font-family:var(--font-mono); font-size:12.8px; color:var(--muted); letter-spacing:0.02em;}
  .search{
    display:flex; align-items:center; gap:8px; min-width:240px;
  }
  .search input{
    flex:1; background:transparent; border:none; border-bottom:1px solid var(--border);
    padding:10px 4px; font-family:var(--font-body); font-size:14px; color:var(--text);
    min-height:44px;
  }
  .search input::placeholder{color:var(--muted);}
  .search input:focus{outline:none; border-bottom:2px solid var(--accent);}
  .search button{
    background:transparent; border:none; color:var(--accent);
    font-family:var(--font-mono); font-size:12.8px; cursor:pointer;
    padding:10px 4px; min-height:44px; min-width:44px;
  }

  nav.primary{border-top:1px solid var(--border); background:var(--bg);}
  nav.primary .nav-inner{
    max-width:var(--shell); margin:0 auto; padding:0 24px;
    display:flex; align-items:center; gap:0; flex-wrap:wrap;
  }
  nav.primary a{
    color:var(--text); font-size:15px; padding:14px 16px;
    display:inline-flex; align-items:center; min-height:44px;
    border-bottom:2px solid transparent;
  }
  nav.primary a:hover{text-decoration:none; color:var(--accent);}
  nav.primary a[aria-current="page"]{
    border-bottom-color:var(--accent); color:var(--text); font-weight:500;
  }
  nav.primary a.active{
    border-bottom-color:var(--accent); color:var(--text); font-weight:500;
  }
  .nav-toggle{display:none;}

  /* ---------- LAYOUT GRID ---------- */
  main{padding:48px 0 64px;}
  .grid{
    max-width:var(--shell); margin:0 auto; padding:0 24px;
    display:grid; grid-template-columns:minmax(0,1fr) var(--rail); gap:var(--gutter);
  }
  .content{min-width:0;}
  aside.rail{min-width:0;}

  /* ---------- NOTICE STRIP ---------- */
  .notice{
    background:var(--surface); border:1px solid var(--border); border-radius:var(--r);
    padding:16px 24px; display:flex; align-items:baseline; gap:16px;
    margin-bottom:48px; flex-wrap:wrap;
  }
  .notice .tag{
    font-family:var(--font-mono); font-size:12.8px; color:var(--accent-2);
    border:1px solid var(--border); border-radius:var(--r); padding:2px 9px;
    flex:none;
  }
  .notice p{margin:0; color:var(--text); font-size:15px;}
  .notice a{font-weight:500;}

  /* ---------- SECTION HEAD ---------- */
  .sec-head{
    display:flex; align-items:baseline; justify-content:space-between;
    gap:16px; margin-bottom:24px; padding-bottom:12px;
    border-bottom:1px solid var(--border);
  }
  .sec-head .more{font-family:var(--font-mono); font-size:12.8px;}
  section + section{margin-top:64px;}

  /* ---------- THUMB-LIST BOARD ---------- */
  ul.board li{border-bottom:1px solid var(--border);}
  ul.board li:first-child{border-top:1px solid var(--border);}
  .post{
    display:flex; gap:16px; align-items:flex-start;
    padding:16px 4px; position:relative;
  }
  .thumb{
    flex:none; width:112px; aspect-ratio:4/3; border-radius:var(--r);
    overflow:hidden; border:1px solid var(--border); background:var(--surface-alt);
  }
  .thumb svg{width:100%; height:100%;}
  .post-body{min-width:0; flex:1;}
  .post-cat{
    font-family:var(--font-mono); font-size:12.8px; color:var(--accent);
    border:1px solid var(--border); border-radius:var(--r); padding:1px 9px;
    display:inline-block; margin-bottom:6px;
  }
  .post-title{
    font-family:var(--font-body); font-size:18px; font-weight:500; line-height:1.4;
    color:var(--text); display:block;
  }
  .post-title:hover{color:var(--text); text-decoration:underline;}
  .post-excerpt{
    color:var(--muted); font-size:14.5px; line-height:1.6; margin:4px 0 8px;
    display:-webkit-box; -webkit-line-clamp:1; -webkit-box-orient:vertical; overflow:hidden;
  }
  .post-meta{
    font-family:var(--font-mono); font-size:12.8px; color:var(--muted);
    display:flex; gap:14px; flex-wrap:wrap;
  }
  .post-meta .cm{color:var(--accent);}
  .post-no{
    position:absolute; top:16px; right:4px;
    font-family:var(--font-mono); font-size:12.8px; color:var(--muted);
  }

  /* ---------- GALLERY ---------- */
  .gallery{
    display:grid; grid-template-columns:repeat(3,minmax(280px,1fr));
    gap:24px;
  }
  .card{
    background:var(--surface); border:1px solid var(--border); border-radius:var(--r);
    overflow:hidden; display:flex; flex-direction:column;
    transition:box-shadow .18s ease;
  }
  .card:hover{box-shadow:var(--sh1);}
  .card-figure{
    position:relative; aspect-ratio:4/3; background:var(--surface-alt);
    border-bottom:1px solid var(--border);
  }
  .card-figure svg{width:100%; height:100%;}
  .card .badge{
    position:absolute; top:8px; left:8px;
    font-family:var(--font-mono); font-size:12.8px; color:var(--accent);
    background:var(--surface); border:1px solid var(--border); border-radius:var(--r);
    padding:1px 9px;
  }
  .card .num{
    position:absolute; top:8px; right:8px;
    font-family:var(--font-mono); font-size:12.8px; color:var(--muted);
    background:var(--surface); border:1px solid var(--border); border-radius:var(--r);
    padding:1px 8px;
  }
  .card-body{padding:16px;}
  .card-body h3{margin-bottom:6px; font-size:18px;}
  .card-body h3 a{color:var(--text);}
  .card-body h3 a:hover{color:var(--text);}
  .card-body .post-meta{margin-top:8px;}

  /* ---------- PAGINATION ---------- */
  .pager{
    margin-top:32px; display:flex; gap:16px; justify-content:center; align-items:center;
    font-family:var(--font-mono); font-size:14px;
  }
  .pager a{color:var(--muted); padding:6px 4px; min-width:32px; text-align:center;}
  .pager a:hover{color:var(--text); text-decoration:none;}
  .pager a[aria-current="page"]{color:var(--text); border-bottom:2px solid var(--accent);}

  /* ---------- BUTTONS ---------- */
  .btn{
    display:inline-flex; align-items:center; justify-content:center; gap:8px;
    font-family:var(--font-body); font-size:15px; font-weight:500;
    border-radius:var(--r); padding:11px 20px; min-height:44px; cursor:pointer;
    border:1px solid transparent; transition:background .15s ease, filter .15s ease;
  }
  .btn-primary{background:var(--accent-2); color:var(--on-accent); border-color:var(--accent-2);}
  .btn-primary:hover{filter:brightness(0.94); text-decoration:none;}
  .btn-primary:active{transform:translateY(1px);}
  .btn-secondary{background:transparent; border-color:var(--border); color:var(--text);}
  .btn-secondary:hover{background:var(--surface-alt); text-decoration:none;}

  /* ---------- SIDEBAR RAIL ---------- */
  .rail-block{
    background:var(--surface); border:1px solid var(--border); border-radius:var(--r);
    padding:24px; margin-bottom:24px;
  }
  .rail-block h2{font-size:20px; margin-bottom:16px; font-weight:400;}
  .rail-write{text-align:center;}
  .rail-write p{color:var(--muted); font-size:14px; margin:0 0 16px;}
  .rank li{
    display:flex; gap:12px; align-items:baseline; padding:9px 0;
    border-bottom:1px solid var(--border);
  }
  .rank li:last-child{border-bottom:none;}
  .rank .rk{font-family:var(--font-mono); font-size:12.8px; color:var(--accent); flex:none; width:18px;}
  .rank a{color:var(--text); font-size:15px; line-height:1.5;}
  .rank a:hover{color:var(--accent);}
  .tags{display:flex; flex-wrap:wrap; gap:8px;}
  .chip{
    font-family:var(--font-mono); font-size:12.8px; color:var(--accent);
    border:1px solid var(--border); border-radius:var(--r); padding:4px 9px;
  }
  .chip:hover{background:var(--surface-alt); text-decoration:none;}

  /* ---------- FOOTER ---------- */
  footer.site{
    border-top:1px solid var(--border); margin-top:64px; background:var(--bg);
  }
  .foot-inner{
    max-width:var(--shell); margin:0 auto; padding:48px 24px;
    display:flex; flex-wrap:wrap; gap:32px; justify-content:space-between;
  }
  .foot-inner .logo{font-family:var(--font-head); font-weight:300; font-size:20px; color:var(--text);}
  .foot-nav{display:flex; gap:24px; flex-wrap:wrap;}
  .foot-nav a{color:var(--muted); font-size:14px;}
  .foot-nav a:hover{color:var(--accent);}
  .foot-meta{
    max-width:var(--shell); margin:0 auto; padding:0 24px 48px;
    font-family:var(--font-mono); font-size:12.8px; color:var(--muted);
  }
  .site-label{
    border:1px solid var(--border); border-radius:var(--r); padding:6px 12px;
    display:inline-block; margin-top:12px;
  }

  /* ---------- RESPONSIVE ---------- */
  @media (max-width:1023px){
    .grid{grid-template-columns:1fr;}
    aside.rail{order:2;}
    .gallery{grid-template-columns:repeat(2,minmax(0,1fr));}
  }
  @media (max-width:768px){
    .masthead{justify-content:center; text-align:center; padding-top:24px;}
    .brand{align-items:center;}
    .search{width:100%; min-width:0;}
    nav.primary .nav-inner{padding:0 16px;}
    .gallery{grid-template-columns:repeat(2,minmax(0,1fr));}
  }
  @media (max-width:480px){
    h1{font-size:31.25px;}
    main{padding:32px 0 48px;}
    .shell,.grid,.masthead,.nav-inner,.foot-inner,.foot-meta{padding-left:16px; padding-right:16px;}
    .notice{margin-bottom:32px;}
    section + section{margin-top:48px;}
    nav.primary .nav-inner{flex-direction:column; align-items:stretch;}
    nav.primary a{border-bottom:1px solid var(--border); border-left:2px solid transparent;}
    nav.primary a[aria-current="page"]{border-bottom-color:var(--border); border-left-color:var(--accent);}
    nav.primary a.active{border-bottom-color:var(--border); border-left-color:var(--accent);}
    .post{flex-direction:column;}
    .thumb{width:100%;}
    .post-no{position:static; display:block; margin-bottom:6px;}
    .gallery{grid-template-columns:1fr;}
  }

/* ============ gnuboard dynamic supplements (Muji Japandi Calm) ============ */
.thumb img{width:100%;height:100%;object-fit:cover;display:block;}
.card-figure img{width:100%;height:100%;object-fit:cover;display:block;position:absolute;top:0;left:0;}
.pager strong,.pager .now{color:var(--text);border-bottom:2px solid var(--accent);font-family:var(--font-mono);font-size:14px;padding:6px 4px;min-width:32px;text-align:center;display:inline-block;}
.sec-head .board-h1{font-family:var(--font-head);font-weight:400;font-size:25px;line-height:1.25;margin:0;color:var(--text);}
.board-actions{display:flex;justify-content:space-between;align-items:center;gap:16px;flex-wrap:wrap;margin-top:24px;padding-top:16px;border-top:1px solid var(--border);}
.board-actions .board-search{display:flex;gap:8px;align-items:center;flex-wrap:wrap;}
.board-actions select,.board-actions input[type=text]{height:44px;padding:0 12px;font-family:var(--font-body);font-size:14px;background:var(--surface);color:var(--text);border:1px solid var(--border);border-radius:var(--r);}
.sr-only{position:absolute;width:1px;height:1px;overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap;}
/* board detail (view) — retinted for Muji Japandi Calm palette */
.hm-board-view{background:var(--surface);border:1px solid var(--border);border-radius:var(--r);box-shadow:var(--sh2);padding:28px;margin:32px auto 24px;max-width:860px;}
.hm-view-head{border-bottom:1px solid var(--border);padding-bottom:16px;margin-bottom:20px;}
.hm-view-head .hm-board-kicker{font-family:var(--font-mono);font-size:12px;letter-spacing:.08em;color:var(--accent);margin:0 0 8px;}
.hm-view-head h1{font-family:var(--font-head);font-size:28px;font-weight:400;line-height:1.25;color:var(--text);margin:0;}
.hm-view-meta{display:flex;gap:14px;margin-top:12px;font-family:var(--font-mono);font-size:12.8px;color:var(--muted);flex-wrap:wrap;}
.hm-view-content{font-size:16px;line-height:1.8;color:var(--text);padding:8px 0 24px;border-bottom:1px solid var(--border);}
.hm-view-content img{max-width:100%;height:auto;border-radius:var(--r);}
.hm-view-content p{margin:0 0 16px;}
.hm-view-files{display:flex;flex-wrap:wrap;gap:10px;margin:16px 0;}
.hm-view-files a{font-family:var(--font-mono);font-size:12.8px;border:1px solid var(--border);border-radius:var(--r);padding:6px 12px;color:var(--accent);background:var(--surface);}
.hm-view-neighbor{display:flex;flex-direction:column;gap:8px;margin:20px 0;}
.hm-view-neighbor a{display:flex;gap:12px;padding:10px 12px;border:1px solid var(--border);border-radius:var(--r);background:var(--surface-alt);}
.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:500;color:var(--text);overflow:hidden;text-overflow:ellipsis;white-space:nowrap;}
.hm-view-actions{display:flex;gap:8px;flex-wrap:wrap;margin-top:20px;}
.hm-view-actions a{min-height:40px;display:inline-flex;align-items:center;padding:0 16px;border:1px solid var(--border);border-radius:var(--r);font-family:var(--font-body);font-weight:500;font-size:14px;color:var(--text);background:var(--surface);}
.hm-view-actions a.is-primary{background:var(--accent-2);color:var(--on-accent);border-color:var(--accent-2);}
.hm-view-vote{display:flex;gap:10px;margin:16px 0;}
.hm-view-vote a{padding:8px 16px;border:1px solid var(--border);border-radius:var(--r);color:var(--text);font-family:var(--font-mono);font-size:12.8px;}
/* board detail — extra sections (list5, paging, recommended) share list-page classes */
.hm-view-extra{max-width:860px;margin:40px auto 0;}