/* 등대 게시판 (/board) — 카페처럼 왼쪽 메뉴 + 오른쪽 목록·글 보기 (2026-10-13) */
body.cafe{background:#f3ecdf}
.cafe-top{background:var(--navy);display:flex;align-items:center;justify-content:space-between;gap:12px;padding:10px max(16px,calc((100% - 1120px)/2))}
.cafe-home{color:#fff;text-decoration:none;font-family:SBAggro,Pretendard,sans-serif;font-size:22px;line-height:1.1}.cafe-home small{display:block;font-family:Pretendard,sans-serif;font-size:11px;letter-spacing:.08em;color:var(--gold);font-weight:700}
.cafe-links{display:flex;gap:4px;flex-wrap:wrap}.cafe-links a{color:#fff;text-decoration:none;font-size:13px;font-weight:700;padding:6px 12px;border-radius:999px;border:1px solid #ffffff40}.cafe-links a:hover{background:#ffffff1a}
.cafe-banner{position:relative;max-width:1120px;margin:16px auto 0;border-radius:18px;overflow:hidden;background:var(--navy)}
.cafe-banner img{display:block;width:100%;height:220px;object-fit:cover;object-position:50% 45%}
.cafe-banner>div{position:absolute;inset:auto 0 0 0;padding:40px 24px 18px;background:linear-gradient(transparent,#0f2a5cd9);color:#fff}
.cafe-banner small{color:var(--gold);font-weight:700;letter-spacing:.08em;font-size:12px}
.cafe-banner h1{font-family:SBAggro,Pretendard,sans-serif;font-weight:400;font-size:34px;margin:2px 0;letter-spacing:-1px;line-height:1.2}
.cafe-banner p{margin:0;font-size:14px;color:#e6ebf6}
.cafe-body{max-width:1120px;margin:16px auto 0;display:grid;grid-template-columns:230px 1fr;gap:18px;align-items:start;padding:0 0 40px}
.cafe-side{display:grid;gap:12px;position:sticky;top:12px}
.side-info,.side-menu{background:#fff;border:1px solid var(--line);border-radius:16px;padding:16px}
.side-info b{font-family:SBAggro,Pretendard,sans-serif;font-weight:400;font-size:20px}
.side-info p{margin:4px 0 12px;font-size:13px;color:var(--muted);line-height:1.6}
.side-write{display:block;text-align:center;background:var(--red);color:#fff;font-family:SBAggro,Pretendard,sans-serif;font-size:15px;text-decoration:none;border-radius:12px;padding:10px}
.side-write:hover{filter:brightness(1.08)}
.side-menu{display:grid;gap:2px;padding:12px}
.side-head{font-size:12px;font-weight:700;color:var(--muted);letter-spacing:.06em;padding:2px 8px 6px}
.side-menu a{display:flex;align-items:center;justify-content:space-between;gap:8px;padding:9px 10px;border-radius:10px;text-decoration:none;font-weight:700;font-size:15px}
.side-menu a:hover{background:var(--paper)}
.side-menu a[aria-current]{background:var(--navy);color:#fff}
.side-menu em{font-style:normal;font-size:12px;font-weight:700;color:var(--red)}.side-menu a[aria-current] em{color:var(--gold)}
.cafe-main{background:#fff;border:1px solid var(--line);border-radius:18px;padding:22px 24px;min-height:420px;min-width:0}
.board-head{display:flex;align-items:end;justify-content:space-between;gap:12px;border-bottom:2px solid var(--navy);padding-bottom:12px;margin-bottom:6px}
.board-head h2{font-family:SBAggro,Pretendard,sans-serif;font-weight:400;font-size:26px;margin:0;letter-spacing:-.5px;line-height:1.3}
.board-head p{margin:2px 0 0;color:var(--muted);font-size:13px}
.btn{display:inline-block;border:0;border-radius:10px;padding:9px 16px;font:inherit;font-size:14px;font-weight:700;cursor:pointer;text-decoration:none;background:var(--navy);color:#fff;white-space:nowrap}
.btn.red{background:var(--red)}.btn.ghost{background:#fff;color:var(--ink);border:1px solid var(--line)}.btn:disabled{opacity:.6;cursor:default}
/* 앨범형 목록 (게임 소개 · 게임 개발 과정) */
.album{list-style:none;margin:0;padding:0}
.album li+li{border-top:1px solid var(--line)}
.album a{display:grid;grid-template-columns:120px 1fr;gap:16px;align-items:center;padding:14px 4px;text-decoration:none}
.album a:hover b{text-decoration:underline}
.album img{width:120px;height:84px;object-fit:cover;border-radius:10px;border:1px solid var(--line);background:var(--paper)}
.album b{display:block;font-size:17px;line-height:1.45}
.album span{display:block;color:var(--muted);font-size:13px;margin-top:3px;line-height:1.5}
.album small{display:block;color:#9a8f7c;font-size:12px;margin-top:4px}
/* 표 목록 (자유게시판) */
.list{width:100%;border-collapse:collapse;font-size:14px}
.list th{font-size:12px;color:var(--muted);font-weight:700;padding:8px 6px;border-bottom:1px solid var(--line);text-align:center}
.list td{padding:11px 6px;border-bottom:1px solid #f1e7d6;text-align:center;color:var(--muted);white-space:nowrap}
.list td.t{text-align:left;color:var(--ink);white-space:normal;width:100%}
.list td.t a{text-decoration:none;font-weight:600}.list td.t a:hover{text-decoration:underline}
.list td.t em{font-style:normal;color:var(--red);font-weight:700;font-size:12px;margin-left:4px}
.list tr.new td.t a::after{content:"N";display:inline-block;margin-left:5px;background:var(--red);color:#fff;font-size:10px;font-weight:800;border-radius:4px;padding:0 4px;line-height:16px;vertical-align:1px}
.cafe-empty{color:var(--muted);text-align:center;padding:48px 10px}
.pager{display:flex;justify-content:center;gap:4px;margin-top:16px}.pager button{min-width:34px;height:34px;border:1px solid var(--line);background:#fff;border-radius:8px;font:inherit;font-size:13px;cursor:pointer}.pager button[aria-current]{background:var(--navy);color:#fff;border-color:var(--navy)}
.board-rule{margin:14px 0 0;padding:12px 14px;background:var(--paper);border-radius:12px;font-size:13px;color:var(--muted);line-height:1.7}
/* 글 보기 */
.post-head{border-bottom:1px solid var(--line);padding-bottom:12px;margin-bottom:14px}
.post-head .crumb{font-size:13px;color:var(--red);font-weight:700;text-decoration:none}
.post-head h2{font-family:SBAggro,Pretendard,sans-serif;font-weight:400;font-size:25px;line-height:1.35;margin:4px 0 6px;letter-spacing:-.5px}
.post-meta{display:flex;gap:12px;flex-wrap:wrap;color:var(--muted);font-size:13px}
.post-body{white-space:pre-wrap;word-break:break-word;font-size:15px;line-height:1.85;min-height:80px}
.post-article article{border:0;padding:0;margin:0;background:transparent}
.post-article article>.tag,.post-article article>time,.post-article article>h2{display:none}
.post-actions{display:flex;justify-content:space-between;gap:8px;flex-wrap:wrap;border-top:1px solid var(--line);margin-top:20px;padding-top:14px}
.post-nav{display:grid;gap:0;margin-top:14px;border:1px solid var(--line);border-radius:12px;overflow:hidden}
.post-nav a{display:flex;gap:10px;padding:10px 14px;text-decoration:none;font-size:14px}.post-nav a+a{border-top:1px solid var(--line)}.post-nav a span{color:var(--muted);flex:none;width:3.5em}.post-nav a:hover{background:var(--paper)}
/* 댓글 */
.comments{margin-top:22px}
.comments h3{font-size:16px;margin:0 0 8px}
.comments ul{list-style:none;margin:0;padding:0}
.comments li{padding:10px 0;border-top:1px solid #f1e7d6;display:grid;grid-template-columns:1fr auto;gap:2px 10px}
.comments li b{font-size:14px}.comments li time{font-size:12px;color:var(--muted);margin-left:6px}
.comments li p{grid-column:1/-1;margin:0;white-space:pre-wrap;word-break:break-word;font-size:14px}
.linkbtn{border:0;background:none;color:var(--muted);font:inherit;font-size:12px;cursor:pointer;text-decoration:underline;padding:0}
/* 글쓰기 · 댓글 입력 */
.form{display:grid;gap:10px}
.form .row{display:grid;grid-template-columns:1fr 1fr;gap:10px}
.form input,.form textarea{width:100%;font:inherit;font-size:15px;border:1px solid var(--line);border-radius:10px;padding:10px 12px;background:#fffdf8;color:var(--ink)}
.form textarea{min-height:220px;resize:vertical;line-height:1.7}
.form.small textarea{min-height:76px}
.form input:focus,.form textarea:focus{outline:2px solid var(--gold);border-color:var(--gold)}
.form .trap{position:absolute;left:-9999px;width:1px;height:1px;overflow:hidden}
.form .msg{min-height:1.4em;margin:0;font-size:13px;color:var(--red)}
.form .end{display:flex;justify-content:flex-end;gap:8px}
@media (max-width:820px){
  .cafe-body{grid-template-columns:1fr;padding:0 12px 32px;gap:12px}
  .cafe-banner{margin:12px 12px 0}
  .cafe-side{position:static}
  .side-info{display:none}
  .side-extra{display:none}
  .side-menu{grid-template-columns:repeat(3,1fr);padding:6px;border-radius:14px}
  .side-head{display:none}
  .side-menu a{justify-content:center;flex-direction:column;gap:0;padding:8px 4px;font-size:13px;text-align:center;line-height:1.3}
  .cafe-main{padding:16px 14px;border-radius:16px}
}
@media (max-width:520px){
  .cafe-banner img{height:150px}.cafe-banner h1{font-size:26px}.cafe-banner p{font-size:12px}.cafe-banner>div{padding:28px 16px 12px}
  .cafe-home{font-size:19px}.cafe-links a{padding:5px 9px;font-size:12px}
  .board-head h2{font-size:22px}
  .album a{grid-template-columns:92px 1fr;gap:12px}.album img{width:92px;height:68px}.album b{font-size:15px}
  .list th.v,.list td.v,.list th.n,.list td.n{display:none}
  .form .row{grid-template-columns:1fr}
  .post-head h2{font-size:21px}
}
.cafe-foot{text-align:center;color:var(--muted);font-size:13px;padding:0 16px 32px}.cafe-foot a{color:inherit}

/* 방문자 수: 왼쪽 메뉴 아래 (대표님 2026-10-13 「카운터는 왼쪽 메뉴 아래 고정」), 숫자는 홈 바닥과 같은 /api/visits */
.side-visits{display:grid;grid-template-columns:1fr auto;gap:2px 10px;padding:10px 14px;border:1px solid #e3d8c4;border-radius:12px;background:#fffdf8;font-size:12px;color:#7a6a52;white-space:nowrap}
.side-visits[hidden]{display:none}
.side-visits span{display:contents}
.side-visits b{color:#3b2f1d;font-weight:700;text-align:right;font-variant-numeric:tabular-nums}
.visit-daily{font-size:11px;color:#7a6a52;margin:6px 4px 0;line-height:1.5}
.side-menu a{justify-content:flex-start}.side-menu a em{margin-left:auto}.side-menu a img{width:22px;height:22px;object-fit:contain;flex:none}
/* 왼쪽 메뉴 하이라이트 (2026-10-13) */
.side-menu a{position:relative;transition:background .18s,color .18s,transform .12s,box-shadow .18s}
.side-menu a img{transition:transform .18s}
.side-menu a:hover{background:#f6ead3;box-shadow:inset 3px 0 0 #b0612a}
.side-menu a:hover img{transform:scale(1.2) rotate(-6deg)}
.side-menu a:active{transform:scale(.97)}
.side-menu a[aria-current]{box-shadow:inset 4px 0 0 #f2c56b,0 2px 8px #0f2a5c33}
.side-menu a[aria-current] img{transform:scale(1.12)}
.side-menu a:focus-visible{outline:2px solid #b0612a;outline-offset:2px}
@media (prefers-reduced-motion:reduce){.side-menu a,.side-menu a img{transition:none}.side-menu a:hover img{transform:none}}
/* 댓글: 누구나 (2026-10-13) */
#fc .end{align-items:center;justify-content:space-between}
.crule{margin:0;font-size:12px;color:var(--muted);line-height:1.5}
.cempty{margin:6px 0 10px;font-size:14px;color:var(--muted)}
@media(max-width:520px){#fc .end{flex-direction:column;align-items:stretch}#fc .end .btn{width:100%}}
@media(max-width:820px){body>.side-visits{display:flex;flex-wrap:wrap;justify-content:center;gap:4px 14px;margin:18px 16px 0;padding:8px 12px;font-size:12px}body>.side-visits[hidden]{display:none}body>.side-visits span{display:inline}body>.side-visits b{margin-left:4px}}
/* 홈페이지다운 모양으로 다듬기 (대표님 2026-10-13 「카페 같은 디자인이지만 우리 홈페이지는 카페와 다른 겁니다」)
   구조(왼쪽 메뉴 + 게시판)만 카페처럼, 겉모양은 홈페이지의 남색 왼쪽 메뉴 · 크림 바탕 · 구리색 · 등대의아이 타이틀 그림 */
.cafe-top{padding:8px max(16px,calc((100% - 1120px)/2))}
.cafe-home img{display:block;height:54px;width:auto}
.cafe-side{gap:0;background:#0f2a5c;color:#e7ecf7;border-radius:14px;padding:12px 10px;box-shadow:0 8px 24px #0f2a5c26}
.cafe-side .side-info,.cafe-side .side-menu{background:none;border:0;border-radius:0;padding:8px 4px;color:inherit}
.cafe-side .side-menu{border-top:1px solid #ffffff1f}
.cafe-side .side-info b{color:#fff;font-size:18px}
.cafe-side .side-info p{color:#c6d0e6}
.cafe-side .side-head{color:#f2c56b;font-size:11px}
.cafe-side .side-menu a{color:#e7ecf7;font-weight:500;font-size:14px;padding:7px 8px}
.cafe-side .side-menu a:hover{background:linear-gradient(90deg,#f2c56b33,#f2c56b0d);color:#fff;box-shadow:inset 3px 0 0 #f2c56b99}
.cafe-side .side-menu a[aria-current]{background:#f2c56b;color:#0f2a5c;font-weight:700;box-shadow:inset 4px 0 0 #b0612a,0 2px 8px #0006}
.cafe-side .side-menu em{color:#f2c56b}.cafe-side .side-menu a[aria-current] em{color:#b0612a}
.cafe-side .side-visits{background:#0b2150;border:0;border-top:1px solid #ffffff1f;border-radius:0 0 12px 12px;margin:6px -10px -12px;color:#c6d0e6}
.cafe-side .side-visits b{color:#fff}
.cafe-main{background:#fffdf8;border-color:#e8dcc6;box-shadow:0 8px 24px #0f2a5c12}
.board-head{border-bottom:2px solid #b0612a}
/* 자유게시판 목록: 표 대신 홈페이지 카드 줄 */
.flist{list-style:none;margin:6px 0 0;padding:0;display:grid;gap:8px}
.flist a{display:grid;grid-template-columns:auto 1fr;gap:2px 14px;align-items:center;padding:12px 14px;border:1px solid #efe4d0;border-radius:12px;background:#fff;text-decoration:none;transition:border-color .18s,box-shadow .18s,transform .12s}
.flist a:hover{border-color:#d9a76a;box-shadow:0 4px 14px #b0612a22}
.flist .n{grid-row:1/3;font-family:SBAggro,Pretendard,sans-serif;color:#b0612a;font-size:18px;min-width:28px;text-align:center}
.flist b{font-size:15px;font-weight:600;color:var(--ink);line-height:1.45;word-break:break-word}
.flist b em{font-style:normal;color:#b0612a;font-size:12px;font-weight:700;margin-left:8px}
.flist small{color:var(--muted);font-size:12px}
.flist li.new b::after{content:"NEW";display:inline-block;margin-left:6px;background:#c8312c;color:#fff;font-size:10px;font-weight:800;border-radius:4px;padding:0 5px;line-height:16px;vertical-align:1px}
@media(max-width:820px){.cafe-home img{height:40px}.cafe-side{padding:8px}.cafe-side .side-menu{border-top:0}.cafe-side .side-info{display:none}}
/* 맨 위 얇은 설명 띠 (2026-10-13): 게시판마다 그림과 이름이 바뀜 */
#strip img{height:128px;transition:opacity .2s}
#strip[data-b="intro"] img{object-position:50% 62%}
#strip[data-b="dev"] img{object-position:50% 40%}
#strip[data-b="free"] img{object-position:50% 45%}
#strip>div{inset:0 auto 0 0;width:min(560px,70%);padding:18px 26px;display:flex;flex-direction:column;justify-content:center;background:linear-gradient(90deg,#0f2a5ce6 0%,#0f2a5cb3 60%,transparent)}
#strip h1{font-size:30px;margin:0}
#strip p{font-size:13.5px}
#strip::after{content:"";position:absolute;left:0;right:0;bottom:0;height:3px;background:linear-gradient(90deg,#b0612a,#f2c56b,#b0612a)}
@media(max-width:820px){#strip img{height:104px}#strip>div{width:88%;padding:12px 16px}#strip h1{font-size:23px}#strip p{font-size:12px}}
.board-head h2 em{font-style:normal;font-family:Pretendard,sans-serif;font-size:16px;font-weight:700;color:#b0612a;vertical-align:3px}
/* 폰·앱: 띠 그림(strips/m)의 오른쪽 아이·등대가 잘리지 않게 오른쪽에 맞춤 (대표님 2026-10-13 「앱에서도 잘 볼 수 있게 최적화」) */
@media (max-width:799px) and (hover:none),(max-width:799px) and (pointer:coarse){.cafe-banner img{object-position:100% 50%}}