/*
 * 달쉼 디자인 CSS — 원본: 달쉼로그 화면 아티팩트 (b7978f42) + 컴포넌트 갤러리 (e0eaf3f6)
 * 규약: 원본 셀렉터·값을 그대로 보존한다. 디자인 수정은 갤러리에서 먼저 하고 여기로 재이식.
 * 제외: .reviewbar (검수용, 제품 아님)
 * 디자인 토큰(:root 커스텀 프로퍼티)은 tokens.css가 단일 정의처다(이슈 #11) — 이 파일에서는
 * 새로 정의하지 않고 var(--토큰)으로만 참조한다. tokens.css가 이 파일보다 먼저 로드되도록
 * functions.php의 wp_enqueue_style deps로 순서를 강제한다.
 */

*{box-sizing:border-box}
html{-webkit-text-size-adjust:100%}
body{
  margin:0; background:var(--bg); color:var(--ink);
  font-family:"Pretendard","Apple SD Gothic Neo","Malgun Gothic","Noto Sans KR",system-ui,sans-serif;
  font-size:16px; line-height:1.6; letter-spacing:-.01em; -webkit-font-smoothing:antialiased;
}
body::before{
  content:""; position:fixed; inset:0; pointer-events:none; z-index:0; opacity:var(--grain);
  background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='140' height='140'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.9' numOctaves='2'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)'/%3E%3C/svg%3E");
  mix-blend-mode:multiply;
}
.mono{font-family:"JetBrains Mono","SF Mono","Roboto Mono",ui-monospace,"Consolas",monospace}
a{color:inherit; text-decoration:none}
button{font-family:inherit}

/* 한글 줄바꿈: 어절 중간 잘림 방지 */
body,h1,h2,h3,p,li,td,th,summary,span,a,label{word-break:keep-all;overflow-wrap:break-word}

.toptape{height:12px; background:repeating-linear-gradient(-45deg,var(--tape-a) 0 14px,var(--tape-b) 14px 28px); position:relative; z-index:60}
nav{position:sticky; top:0; z-index:50; background:var(--navbg); backdrop-filter:blur(8px); border-bottom:2.5px solid var(--ink)}
.nav-in{max-width:1000px; margin:0 auto; display:flex; align-items:center; gap:18px; padding:12px 18px}
.logo{font-weight:900; letter-spacing:-.05em; font-size:26px; line-height:1; flex:none}
.logo b{color:var(--action)}
.menu{display:flex; gap:2px; flex:1; overflow-x:auto; scrollbar-width:none}
.menu::-webkit-scrollbar{display:none}
.menu a{font-size:14px; font-weight:700; padding:7px 11px; border-radius:3px; white-space:nowrap; color:var(--muted); transition:color .15s, background .15s}
.menu a.on{color:var(--ink); background:var(--bg-2)}
.menu a:hover{color:var(--action)}
.btn{font-weight:800; font-size:13px; padding:8px 14px; border-radius:3px; cursor:pointer; border:2px solid var(--ink); background:transparent; color:var(--ink); transition:transform .15s, box-shadow .15s}
.btn.solid{background:var(--action); border-color:var(--action); color:var(--cream); box-shadow:2px 2px 0 var(--shadow)}
.btn:hover{transform:translate(-1px,-1px); box-shadow:3px 3px 0 var(--shadow)}
.btn.ghost{border-color:var(--card-line); color:var(--muted)}
.btn.ghost:hover{border-color:var(--action); color:var(--action)}

main{position:relative; z-index:1; max-width:1000px; margin:0 auto; padding:24px 18px 70px}
[hidden]{display:none!important}

/* 페이지 헤더 */
.phead{display:flex; align-items:flex-end; justify-content:space-between; gap:16px; border-bottom:3px solid var(--ink); padding-bottom:14px; margin-bottom:18px; flex-wrap:wrap}
.phead .stencil{font-family:"JetBrains Mono",monospace; font-size:11px; font-weight:800; letter-spacing:2px; padding:3px 9px; border-radius:2px; color:var(--cream); display:inline-block; margin-bottom:8px}
.st-log{background:var(--petrol)} .st-beong{background:var(--amber); color:var(--on-amber-ink)}
.phead h1{margin:0; font-weight:900; letter-spacing:-.04em; font-size:32px}
.phead .sub{margin:4px 0 0; font-size:14px; color:var(--muted)}

.tabs{display:flex; gap:6px; margin-bottom:18px; flex-wrap:wrap}
/* 탭이 button → a 로 바뀌면서(실동작 링크) 셀렉터를 a 도 함께 잡도록 보완. 시각은 그대로. */
.tabs button, .tabs a{
  font-family:"JetBrains Mono",monospace; font-size:12px; font-weight:800; letter-spacing:1px;
  padding:7px 13px; border:2px solid var(--line); border-radius:3px; background:var(--bg-2); color:var(--muted); cursor:pointer; transition:all .15s;
  display:inline-block; text-decoration:none; line-height:1.4;
}
.tabs button[aria-selected="true"], .tabs a[aria-selected="true"]{background:var(--ink); border-color:var(--ink); color:var(--bg)}
.tabs button:hover, .tabs a:hover{border-color:var(--action)}
.tabs .cnt{color:var(--action)}
/* 활성 탭은 배경이 --ink(차콜)로 반전되므로 그 안의 카운트가 --action(진한 바이올렛)이면
 * 어두운색 위 어두운색이 된다(팔레트 전환 후 사용자 QA — 예정된 벙 숫자 안 보임).
 * 어두운 바탕 전용 강조 글자 토큰 --amber-ink로 올려 양 테마 모두 판독 가능하게 한다. */
.tabs button[aria-selected="true"] .cnt, .tabs a[aria-selected="true"] .cnt{color:var(--on-ink-accent)}

/* ===== 달쉼로그 피드 ===== */
.feed{display:flex; flex-direction:column; gap:16px}
.post{background:var(--card); border:2px solid var(--ink); border-radius:5px; box-shadow:5px 5px 0 var(--shadow); overflow:hidden}
.p-top{display:flex; align-items:center; gap:11px; padding:13px 14px}
.ava{
  font-family:"JetBrains Mono",monospace; font-weight:800; font-size:13px; letter-spacing:0;
  border:2px solid var(--ink); border-radius:4px; padding:7px 8px; background:var(--plate-bg); color:var(--plate-ink); flex:none;
}
.p-who b{display:block; font-size:14px; font-weight:800}
.p-who span{font-family:"JetBrains Mono",monospace; font-size:11px; color:var(--muted)}
.p-more{margin-left:auto; color:var(--muted); font-weight:800; letter-spacing:1px; background:none; border:none; cursor:pointer; font-size:16px}
.p-body{padding:0 14px 12px; font-size:15px; line-height:1.62}
.p-body .tags{margin-top:8px; display:flex; gap:6px; flex-wrap:wrap}
.p-body .tags span{font-family:"JetBrains Mono",monospace; font-size:11px; font-weight:700; color:var(--petrol-ink); border:1.5px solid var(--card-line); padding:2px 7px; border-radius:2px}

.shots{display:grid; gap:3px; border-top:2px solid var(--ink); border-bottom:2px solid var(--ink)}
.shots.g3{grid-template-columns:2fr 1fr; grid-template-rows:1fr 1fr}
.shots.g3 .s:first-child{grid-row:span 2}
.shots.g2{grid-template-columns:1fr 1fr} /* 2장 = 반반. g3 재활용 시 우하단 빈 구멍 (2026-07-17) */
.shots.g1{grid-template-columns:1fr}
/* feed-card.php 가 인라인 background-image 로 사진을 얹으므로 cover 지정 필수 —
   없으면 원본 크기로 타일 반복된다 (2026-07-17 운영 1장 글 3x3 반복 현상).
   ★ 자리표시 그라데이션은 반드시 background-image 롱핸드로 쓸 것 — background: 축약형은
   size/repeat/position 을 초기값으로 리셋해서, 우선순위 높은 :nth-child 규칙이 축약형이면
   2·3번 셀만 cover 가 풀려 바둑판 반복이 재발한다 (2026-07-17 운영 2번 셀 반복 현상). */
.s{aspect-ratio:4/3; background-image:linear-gradient(150deg,var(--warmgrey),var(--oil)); background-size:cover; background-position:center; background-repeat:no-repeat; position:relative}
.shots.g3 .s:first-child{aspect-ratio:auto; min-height:230px}
.shots.g1 .s{aspect-ratio:16/10}
.s:nth-child(2){background-image:linear-gradient(150deg,var(--petrol),var(--oil))}
.s:nth-child(3){background-image:linear-gradient(150deg,var(--rust),var(--oil))}
.s .cap{position:absolute; left:8px; bottom:8px; font-family:"JetBrains Mono",monospace; font-size:10px; font-weight:800; color:var(--kraft); background:rgba(15,12,9,.7); padding:2px 6px; border-radius:2px}

/* SNS 링크 카드 (영상 업로드 X — 링크 공유) */
.snslink{margin:0 14px 12px; display:flex; gap:12px; align-items:center; border:2px solid var(--card-line); border-radius:4px; padding:10px; background:var(--bg-2)}
.snslink .th{width:96px; aspect-ratio:16/9; flex:none; border-radius:3px; background:linear-gradient(135deg,var(--rust),var(--oil)); display:flex; align-items:center; justify-content:center}
.snslink .th .play{width:28px; height:28px; border-radius:50%; background:rgba(192,138,46,.95); display:flex; align-items:center; justify-content:center}
.snslink .info b{display:block; font-size:14px; font-weight:800; line-height:1.35}
.snslink .info span{font-family:"JetBrains Mono",monospace; font-size:11px; color:var(--muted); display:block; margin-top:4px}
.snslink .src{margin-left:auto; font-family:"JetBrains Mono",monospace; font-size:10px; font-weight:800; letter-spacing:1px; color:var(--action); border:1.5px solid var(--action); padding:3px 6px; border-radius:2px; flex:none}

.p-act{display:flex; align-items:center; gap:6px; padding:9px 10px; border-top:1px solid var(--line)}
.act{display:flex; align-items:center; gap:6px; font-family:"JetBrains Mono",monospace; font-weight:800; font-size:13px; color:var(--muted); background:none; border:2px solid transparent; border-radius:3px; padding:6px 10px; cursor:pointer; transition:all .15s; min-height:40px}
.act svg{width:18px; height:18px}
.act:hover{color:var(--action); border-color:var(--card-line)}
.act.liked{color:var(--action)}
.p-act .time{margin-left:auto; font-family:"JetBrains Mono",monospace; font-size:11px; color:var(--muted); padding-right:6px}

/* 글 상세 수정·삭제 진입점 — 카드(.p-act) 바로 아래 별도 행. 버튼 자체는 기존 .btn 재사용, 새 토큰 없음 */
.log-actions{display:flex; align-items:center; gap:8px; margin-top:8px}
.log-actions-row{display:flex; align-items:center; gap:8px}
.log-actions-confirm-text{font-size:13px; font-weight:700; color:var(--muted)}

/* 페이지네이션 (무한스크롤 대신 — 이미지 트래픽 절감) */
.pager{display:flex; justify-content:center; align-items:center; gap:6px; margin-top:24px}
.pager a,.pager span{
  font-family:"JetBrains Mono",monospace; font-weight:800; font-size:13px; min-width:40px; min-height:40px;
  display:flex; align-items:center; justify-content:center; border:2px solid var(--card-line); border-radius:3px; color:var(--muted); transition:all .15s;
}
.pager a:hover{border-color:var(--action); color:var(--action)}
.pager .cur{background:var(--ink); border-color:var(--ink); color:var(--bg)}

/* ===== 달쉼벙 (조각 이후 사용) ===== */
.adminnote{display:flex; align-items:center; gap:9px; background:var(--bg-2); border:2px dashed var(--line); border-radius:4px; padding:10px 13px; font-size:13px; color:var(--muted); margin-bottom:18px}
.adminnote b{color:var(--ink)}

.beong{background:var(--card); border:2.5px solid var(--ink); border-radius:5px; box-shadow:7px 7px 0 var(--shadow); overflow:hidden; position:relative; margin-bottom:18px}
.beong.past{opacity:.86; box-shadow:5px 5px 0 var(--shadow)}
.b-tape{height:14px; background:repeating-linear-gradient(-45deg,var(--tape-a) 0 12px,var(--tape-b) 12px 24px)}
.beong.past .b-tape{background:repeating-linear-gradient(-45deg,var(--warmgrey) 0 12px,var(--oil) 12px 24px)}
.b-in{padding:20px 18px}
.stamp{
  position:absolute; top:34px; right:14px; transform:rotate(9deg);
  border:3px solid var(--action); color:var(--action); font-family:"JetBrains Mono",monospace;
  font-weight:800; font-size:14px; letter-spacing:2px; padding:5px 11px; border-radius:5px; opacity:.92;
}
.stamp.closed{border-color:var(--muted); color:var(--muted)}
.b-head{display:flex; gap:14px; align-items:flex-start; margin-bottom:14px}
.datebox{
  flex:none; text-align:center; border:2.5px solid var(--ink); border-radius:5px; background:var(--plate-bg); padding:8px 12px; min-width:78px;
}
.datebox .m{font-family:"JetBrains Mono",monospace; font-size:11px; font-weight:800; color:var(--action); letter-spacing:1px}
.datebox .d{font-family:"JetBrains Mono",monospace; font-size:28px; font-weight:800; line-height:1.05; color:var(--plate-ink)}
.datebox .w{font-family:"JetBrains Mono",monospace; font-size:10px; font-weight:700; color:var(--muted); letter-spacing:2px}
.b-title h2{margin:0 0 6px; font-weight:900; letter-spacing:-.03em; font-size:26px; max-width:22ch}
.b-meta{display:flex; flex-direction:column; gap:3px; font-family:"JetBrains Mono",monospace; font-size:12.5px; color:var(--muted)}
.b-meta i{font-style:normal; color:var(--action); font-weight:800; margin-right:5px}

.b-desc{font-size:14.5px; line-height:1.65; color:var(--ink); border-top:1px dashed var(--line); border-bottom:1px dashed var(--line); padding:14px 0; margin-bottom:16px}

.rsvp{display:grid; grid-template-columns:1fr auto; gap:16px; align-items:center; margin-bottom:16px}
.gauge .lab{display:flex; justify-content:space-between; font-family:"JetBrains Mono",monospace; font-size:12px; font-weight:800; margin-bottom:6px}
.gauge .lab .now{color:var(--action)}
.bar{height:12px; border-radius:6px; background:var(--bg-2); border:2px solid var(--ink); overflow:hidden}
.bar i{display:block; height:100%; width:80%; background:repeating-linear-gradient(-45deg,var(--amber) 0 8px,var(--amber-deep) 8px 16px)}
.rsvp .acts{display:flex; gap:8px; flex:none}
.rsvp .btn{min-height:44px; padding:10px 18px}

.members{border-top:1px dashed var(--line); padding-top:14px}
.m-lbl{font-family:"JetBrains Mono",monospace; font-size:11px; font-weight:800; letter-spacing:1.5px; color:var(--action); margin-bottom:10px}
.m-grid{display:flex; flex-wrap:wrap; gap:7px}
.m{font-family:"JetBrains Mono",monospace; font-size:11px; font-weight:800; border:2px solid var(--card-line); border-radius:3px; padding:5px 8px; color:var(--muted); background:var(--bg-2)}
.m.host{border-color:var(--action); color:var(--action)}
.m.rest{border-style:dashed}

/* 댓글 */
.cmts{background:var(--card); border:2px solid var(--ink); border-radius:5px; box-shadow:5px 5px 0 var(--shadow); overflow:hidden}
.c-head{font-family:"JetBrains Mono",monospace; font-weight:800; font-size:12px; letter-spacing:1.5px; padding:10px 14px; background:var(--oil); color:var(--amber-ink)}
.c-list{padding:4px 14px}
.c{display:flex; gap:11px; padding:12px 0; border-bottom:1px dashed var(--line)}
.c:last-child{border-bottom:none}
.c .ava{padding:5px 7px; font-size:11px}
.c .cb b{font-size:13px; font-weight:800; margin-right:7px}
.c .cb time{font-family:"JetBrains Mono",monospace; font-size:10px; color:var(--muted)}
.c .cb p{margin:3px 0 0; font-size:14px; line-height:1.5}
.c-write{display:flex; gap:8px; padding:12px 14px; border-top:2px solid var(--ink); background:var(--bg-2)}
.c-write input{
  flex:1; font-family:inherit; font-size:14px; padding:11px 12px; border:2px solid var(--card-line); border-radius:3px;
  background:var(--surface); color:var(--ink); min-height:44px;
}
.c-write input::placeholder{color:var(--muted)}
.c-write input:focus{outline:3px solid var(--action); outline-offset:1px; border-color:var(--action)}
.c-write .btn{min-height:44px}

footer{position:relative; z-index:1; border-top:3px solid var(--ink); background:var(--bg-2); margin-top:44px}
.foot-in{max-width:1000px; margin:0 auto; padding:24px 18px; display:flex; justify-content:space-between; flex-wrap:wrap; gap:12px; align-items:center}
.foot-in .fl{font-weight:900; font-size:22px; letter-spacing:-.04em}
.foot-in .fl b{color:var(--action)}
.foot-in .fm{font-family:"JetBrains Mono",monospace; font-size:11px; color:var(--muted)}

:focus-visible{outline:3px solid var(--action); outline-offset:2px}

@media(max-width:720px){
  .menu{display:none}
  .phead h1{font-size:26px}
  .rsvp{grid-template-columns:1fr}
  .rsvp .acts{width:100%}
  .rsvp .acts .btn{flex:1}
  .b-head{flex-direction:column}
  .stamp{top:26px; right:10px; font-size:12px}
  .b-title h2{font-size:22px}
  .shots.g3{grid-template-columns:1fr 1fr; grid-template-rows:auto}
  .shots.g3 .s:first-child{grid-row:auto; grid-column:span 2; min-height:180px}
}
@media (prefers-reduced-motion:reduce){*{transition:none!important}}

/* ===== 갤러리 파트 보정 (컴포넌트 갤러리 원본) =====
 * feed-card 파트(진실원)는 .avatar 를 쓴다. 화면 데모의 .ava 와 동일 스타일. */
.avatar{font-family:"JetBrains Mono",monospace; font-weight:800; font-size:13px; border:2px solid var(--ink); border-radius:4px; padding:7px 9px; background:var(--plate-bg); color:var(--plate-ink); display:inline-block}

/* composer 파트(갤러리 data-part="composer" 원본 그대로 이식). cinput 은 comment-thread 파트와 공유하는 범용 입력행. */
.composer{background:var(--surface); border:2px solid var(--ink); border-radius:5px; overflow:hidden; width:100%}
.composer .ctop{display:flex; align-items:center; gap:10px; padding:11px 13px; border-bottom:2px solid var(--line)}
.composer textarea{width:100%; border:none; background:transparent; color:var(--ink); font-family:inherit; font-size:14px; padding:13px; min-height:80px; resize:vertical}
.composer textarea:focus{outline:none}
.ctool{display:flex; align-items:center; gap:8px; padding:9px 13px; border-top:1px solid var(--line)}
.ctool .ic{width:34px; height:34px; border-radius:4px; border:2px solid var(--card-line); display:flex; align-items:center; justify-content:center; color:var(--muted); cursor:pointer}
.ctool .ct-r{margin-left:auto; display:flex; gap:8px; align-items:center}
.ctool .cnt{font-family:"JetBrains Mono",monospace; font-size:11px; color:var(--muted)}
.cinput{display:flex; gap:8px; padding:11px 13px; border-top:2px solid var(--ink); background:var(--bg-2)}
.cinput input{flex:1; font-family:inherit; font-size:14px; padding:10px 12px; border:2px solid var(--card-line); border-radius:3px; background:var(--surface); color:var(--ink); min-height:42px}
.cinput input::placeholder{color:var(--muted)}
.cinput input:focus{outline:3px solid var(--action); outline-offset:1px; border-color:var(--action)}

/* 글쓰기 폼 사진 미리보기 — 새 토큰 발명 대신 기존 카드 테두리·버튼 색을 재사용 */
.cshots{display:flex; flex-wrap:wrap; gap:8px; padding:11px 13px; border-top:2px solid var(--ink); background:var(--bg-2)}
.cshots .cs{position:relative; width:76px; height:76px; flex:none; border-radius:4px; border:2px solid var(--card-line); background-size:cover; background-position:center}
.cshots .cs button{
  position:absolute; top:-7px; right:-7px; width:22px; height:22px; border-radius:50%;
  border:2px solid var(--ink); background:var(--action); color:var(--cream); font-weight:800; font-size:13px; line-height:1;
  cursor:pointer; display:flex; align-items:center; justify-content:center; padding:0;
}

/* empty/error/no-permission 상태 파트(갤러리 data-part="state-empty|state-error|state-perm" 원본 그대로 이식) */
.empty,.errbox,.perm{text-align:center; padding:34px 18px; border:2px dashed var(--line); border-radius:5px; background:var(--card); width:100%}
.empty .ico,.errbox .ico,.perm .ico{width:48px; height:48px; margin:0 auto 12px; display:flex; align-items:center; justify-content:center; border:2.5px solid var(--muted); border-radius:50%; color:var(--muted)}
.errbox .ico{border-color:var(--rust); color:var(--rust)}
.empty h4,.errbox h4,.perm h4{margin:0 0 5px; font-weight:900; font-size:16px}
.empty p,.errbox p,.perm p{margin:0 0 14px; font-size:13px; color:var(--muted)}

/* 글쓰기 폼 에러 메시지 — 새 토큰 발명 대신 action 색상 재사용 */
.write-err{margin:0 0 14px; font-size:13.5px; font-weight:700; color:var(--action)}

/* notification-item 파트(갤러리 data-part="notification-item" 원본 그대로 이식) */
.noti{display:flex; gap:10px; align-items:center; padding:11px 12px; border:2px solid var(--card-line); border-radius:4px; background:var(--surface); width:100%}
.noti.unread{border-left:6px solid var(--action)}
.noti .ni{width:34px; height:34px; border-radius:4px; flex:none; display:flex; align-items:center; justify-content:center; background:var(--bg-2); color:var(--action)}
.noti .nt{flex:1; font-size:13px} .noti .nt b{font-weight:800} .noti time{font-family:"JetBrains Mono",monospace; font-size:10px; color:var(--muted)}

/* ===== 알림 벨 (내비게이션) — 갤러리에 벨 자체 부품은 없어 기존 토큰으로 최소 구성 ===== */
.noti-wrap{position:relative; display:flex; align-items:center; flex:none}
.noti-bell{position:relative; display:flex; align-items:center; justify-content:center; width:38px; height:38px; padding:0; border-radius:3px; border:2px solid var(--card-line); background:transparent; color:var(--ink); cursor:pointer; transition:border-color .15s, color .15s}
.noti-bell:hover{border-color:var(--action); color:var(--action)}
.noti-bell svg{width:20px; height:20px}
.noti-badge{position:absolute; top:-6px; right:-6px; min-width:16px; height:16px; padding:0 4px; border-radius:8px; background:var(--action); color:var(--cream); font-family:"JetBrains Mono",monospace; font-weight:800; font-size:10px; line-height:16px; text-align:center}

.noti-dropdown{position:absolute; top:calc(100% + 8px); right:0; width:320px; max-width:calc(100vw - 32px); background:var(--card); border:2px solid var(--ink); border-radius:5px; box-shadow:5px 5px 0 var(--shadow); overflow:hidden; z-index:70}
.noti-dd-head{display:flex; align-items:center; justify-content:space-between; padding:10px 13px; border-bottom:2px solid var(--line); font-weight:800; font-size:13px}
.noti-read-all{font-family:"JetBrains Mono",monospace; font-size:11px; font-weight:700; color:var(--muted); background:none; border:none; cursor:pointer; padding:4px 6px}
.noti-read-all:hover{color:var(--action)}
.noti-list{max-height:360px; overflow-y:auto; padding:8px; display:flex; flex-direction:column; gap:8px}
.noti-list .noti.is-clickable{cursor:pointer}
.noti-empty{margin:0; padding:26px 13px; text-align:center; color:var(--muted); font-size:13px}

@media(max-width:640px){ .noti-dropdown{position:fixed; top:auto; right:10px; left:10px; width:auto; max-width:none} }

/* ===== 홈 대시보드 (front-page.php, 모듈 3 조각 1). 원본: 홈 대시보드 아티팩트 ===== */

/* 히어로 today 패널. 공지 보드가 없어 grid는 1열만 쓴다(의도적 차이, front-page.php 주석 참조). */
.hero{display:grid; grid-template-columns:1fr; gap:18px; margin-bottom:28px}
.today{background:var(--card); border:2.5px solid var(--ink); border-radius:6px; box-shadow:7px 7px 0 var(--shadow); padding:22px 22px 20px}
.today .cap{font-family:"JetBrains Mono",monospace; font-size:11px; font-weight:800; letter-spacing:2px; color:var(--action)}
.today .greet{font-size:22px; font-weight:800; letter-spacing:-.02em; margin:10px 0 18px}
.today .greet b{color:var(--action)}
.stat-row{display:flex; border-top:1px dashed var(--line); padding-top:16px}
.stat{flex:1; text-align:center}
.stat + .stat{border-left:1px dashed var(--line)}
.stat .n{font-family:"JetBrains Mono",monospace; font-size:24px; font-weight:900; color:var(--ink); line-height:1.1}
.stat .k{font-size:12px; color:var(--muted); margin-top:4px}

/* 본문 2컬럼: 메인(HOT·NEW 보드) + 사이드바. */
.cols{display:grid; grid-template-columns:1fr 300px; gap:24px; align-items:start}
.cols section + section{margin-top:24px}

/* 섹션 헤더. .phead .stencil과 속성은 같지만 <h2> 안에 인라인으로 들어가는 맥락이 달라
   margin-bottom 대신 margin-right로 옆 텍스트와 간격을 준다(겹치는 스타일이라 값은 재사용). */
.sec-head{display:flex; align-items:center; justify-content:space-between; gap:12px; margin-bottom:12px}
.sec-head h2{margin:0; font-size:19px; font-weight:900; letter-spacing:-.02em; display:flex; align-items:center}
.sec-head .stencil{font-family:"JetBrains Mono",monospace; font-size:11px; font-weight:800; letter-spacing:2px; padding:3px 9px; border-radius:2px; color:var(--cream); display:inline-block; margin-right:8px}
.st-spot{background:var(--rust)}
.sec-head .more{font-family:"JetBrains Mono",monospace; font-size:12px; font-weight:700; color:var(--muted); flex:none}
.sec-head .more:hover{color:var(--action)}

/* HOT·NEW 보드 행 */
.board{display:flex; flex-direction:column}
.row{display:flex; align-items:center; gap:10px; padding:11px 4px; border-bottom:1px dashed var(--line); transition:background .15s}
.row:last-child{border-bottom:none}
.row:hover{background:var(--bg-2)}
.rank{font-family:"JetBrains Mono",monospace; font-weight:900; font-size:14px; color:var(--action); width:16px; flex:none; text-align:center}
.cat{font-family:"JetBrains Mono",monospace; font-size:10px; font-weight:800; letter-spacing:.5px; padding:2px 6px; border-radius:2px; color:var(--cream); flex:none}
.cat.log{background:var(--petrol)}
.ttl{flex:1; min-width:0; font-size:14px; font-weight:700; color:var(--ink); white-space:nowrap; overflow:hidden; text-overflow:ellipsis}
.cmt{font-family:"JetBrains Mono",monospace; font-size:12px; color:var(--muted); flex:none}
.meta{display:flex; align-items:center; gap:8px; font-family:"JetBrains Mono",monospace; font-size:11px; color:var(--muted); flex:none}
.meta .au{color:var(--ink); font-weight:700}

/* 사이드바 */
aside{display:flex; flex-direction:column; gap:20px}
.panel{background:var(--card); border:2px solid var(--ink); border-radius:5px; box-shadow:5px 5px 0 var(--shadow); overflow:hidden}
.p-head{font-weight:800; font-size:14px; padding:12px 14px; border-bottom:2px solid var(--line); background:var(--bg-2)}
/* .p-body는 이미 feed-card.php가 다른 값(패딩)으로 쓰고 있어(위 100번대 줄) 전역 재정의 대신
   .panel 스코프로 좁혀 충돌을 피한다. 지금 마크업엔 쓰이지 않지만(beong-card가 패딩을 직접
   가짐) 다음 패널이 생길 때를 대비해 이식해 둔다. */
.panel .p-body{padding:14px}

/* "내 예정 벙" 패널(모듈 3 조각 2). 아티팩트의 .mybeong 마크업 1:1 이식 — 단 클릭으로 벙 상세로
   이동해야 해서 front-page.php에서는 div 대신 a로 쓴다(의도적 차이, 셀렉터는 클래스라 영향 없음). */
.mybeong{display:flex; gap:11px; align-items:center}
.mybeong .plate{font-family:"JetBrains Mono",monospace; font-weight:800; font-size:13px; letter-spacing:1px; border:2px solid var(--ink); border-radius:4px; padding:8px 9px; background:var(--plate-bg); color:var(--plate-ink); flex:none}
.mybeong .info b{display:block; font-size:14px; font-weight:800}
.mybeong .info span{font-size:12px; color:var(--muted)}
.mybeong .dday{margin-left:auto; font-family:"JetBrains Mono",monospace; font-weight:800; color:var(--action); flex:none}

/* 참여신청 받는 벙 카드(사이드 버전). .beong(목록/상세용)과 다른 컴팩트 전용 클래스.
   .stamp는 원래 .beong 안에서 absolute+rotate로 배치되므로, 좁은 사이드 카드에서는
   정적 배치로 오버라이드한다(값 재사용, 포지셔닝만 다르게). */
.beong-card{padding:14px; position:relative}
.beong-card .stamp{position:static; display:inline-block; transform:none; font-size:11px; padding:3px 9px; margin-bottom:10px}
.beong-card h4{margin:0 0 8px; font-size:17px; font-weight:900; letter-spacing:-.02em; line-height:1.35}
.beong-card .when{font-size:12px; color:var(--muted); margin-bottom:12px}
.joinbar{display:flex; align-items:center; gap:10px; margin-bottom:14px}
.joinbar .bar{flex:1; height:8px}
.joinbar .cnt{font-family:"JetBrains Mono",monospace; font-weight:800; font-size:12px; color:var(--muted); flex:none}
.btn.full{display:block; width:100%; text-align:center}

@media(max-width:900px){
  .cols{grid-template-columns:1fr}
}

/* ===== 개러지 미니홈피 공개뷰 (모듈 4 조각 1, single-dalshim_garage.php)
 * 원본: 개러지 아티팩트(17625bfa). 제외: .owner-only/.owner-only-b의 body.owner CSS 토글 —
 * 소유자 전용 요소는 hidden 속성으로만 숨기고, 노출 여부는 로그인 후 JS 아일랜드가 판단한다
 * (캐시 안전 규약, single-dalshim_log.php의 log-actions와 동일 처리).
 * --priv 토큰은 tokens.css로 이동했다(이슈 #11, 토큰 단일소스화). */

/* 헤더 */
.ghead{background:var(--oil); color:var(--kraft); border-radius:0 0 6px 6px; padding:22px 20px; box-shadow:0 6px 0 var(--action); position:relative; overflow:hidden}
.ghead .row{display:flex; gap:16px; align-items:center; flex-wrap:wrap}
.bigplate{font-family:"JetBrains Mono",monospace; font-weight:800; font-size:22px; letter-spacing:3px; border:3px solid var(--amber-ink); border-radius:8px; padding:10px 16px; background:var(--plate-deep); color:var(--amber-ink); flex:none}
.ghead .who b{font-size:22px; font-weight:900; letter-spacing:-.03em; display:block}
.ghead .who span{font-family:"JetBrains Mono",monospace; font-size:12px; color:var(--oil-muted)}
.ghead .manage{margin-left:auto; display:flex; gap:8px}

/* .btn 크기·색 변형 — 기존 .btn/.btn.solid/.btn.ghost엔 없던 modifier, 개러지 아티팩트에서 이식 */
.btn.lite{border-color:var(--oil-edge); color:var(--amber-ink); background:transparent}
.btn.sm{font-size:12px; padding:6px 11px; min-height:34px}

/* 다차량 탭. .th 배경은 실사진(인라인 background-image)으로 덮이므로 반드시 background-image
 * 롱핸드 + size/position/repeat 명시 — background: 축약형을 쓰면 인라인으로 이미지만 덮었을 때
 * 축약형이 리셋한 초기값(auto/repeat)이 그대로 남아 바둑판처럼 반복된다(위 .s 규칙과 동일 사유,
 * 2026-07-17 운영 장애 재발 방지 원칙 적용). 아래 .cover·.album .ph도 동일 이유로 롱핸드. */
.cartabs{display:flex; gap:8px; margin:18px 0 20px; flex-wrap:wrap}
.cartab{display:flex; align-items:center; gap:8px; border:2px solid var(--card-line); border-radius:5px; padding:8px 12px; background:var(--card); cursor:pointer; box-shadow:2px 2px 0 var(--shadow); text-decoration:none; color:inherit}
.cartab[aria-selected="true"]{border-color:var(--ink); box-shadow:3px 3px 0 var(--action)}
.cartab .th{width:34px; height:26px; border-radius:3px; background-image:linear-gradient(135deg,var(--petrol),var(--oil)); background-size:cover; background-position:center; background-repeat:no-repeat; flex:none; border:1.5px solid var(--ink)}
.cartab b{font-size:13px; font-weight:800}
.cartab.add{border-style:dashed; color:var(--muted); font-weight:800; font-size:13px}

/* 대표 차량 프로필 */
.st-car{background:var(--petrol)}
.profile{display:grid; grid-template-columns:1.4fr 1fr; gap:16px}
.cover{aspect-ratio:16/10; border:2.5px solid var(--ink); border-radius:5px; background-image:linear-gradient(150deg,var(--petrol),var(--oil)); background-size:cover; background-position:center; background-repeat:no-repeat; box-shadow:4px 4px 0 var(--shadow); position:relative}
.cover .heart{position:absolute; bottom:10px; right:10px; display:flex; align-items:center; gap:6px; font-family:"JetBrains Mono",monospace; font-weight:800; font-size:12px; background:rgba(15,12,9,.75); color:var(--amber-ink); padding:5px 9px; border-radius:3px}
.spec{background:var(--card); border:2px solid var(--ink); border-radius:5px; padding:15px; box-shadow:4px 4px 0 var(--shadow)}
.spec .nm{font-weight:900; font-size:18px; letter-spacing:-.02em; margin:0 0 8px}
.spec .r{display:flex; justify-content:space-between; font-size:13px; padding:5px 0; border-bottom:1px dashed var(--line)}
.spec .r span:first-child{font-family:"JetBrains Mono",monospace; font-size:11px; color:var(--muted)}
.spec .r span:last-child{font-weight:700}
.spec .intro{margin:10px 0 0; font-size:13.5px; color:var(--ink); font-style:italic}
.spec .tags{margin-top:10px; display:flex; gap:6px; flex-wrap:wrap}
.spec .tags span{font-family:"JetBrains Mono",monospace; font-size:11px; font-weight:700; color:var(--petrol-ink); border:1.5px solid var(--card-line); padding:2px 7px; border-radius:2px}

/* 사진첩 */
.st-album{background:var(--warmgrey); color:var(--oil)}
.album{display:grid; grid-template-columns:repeat(5,1fr); gap:7px}
.album .ph{aspect-ratio:1; border-radius:4px; border:2px solid var(--ink); background-image:linear-gradient(160deg,var(--warmgrey),var(--oil)); background-size:cover; background-position:center; background-repeat:no-repeat; box-shadow:2px 2px 0 var(--shadow)}
.album .cap{grid-column:1/-1; font-family:"JetBrains Mono",monospace; font-size:11px; color:var(--muted); margin-top:2px}

/* 기타 기록(공개/비공개). .rec.private·.lock은 지금 서버렌더엔 절대 나오지 않는다(비공개는
 * single-dalshim_garage.php 쿼리 단계에서부터 제외 — 캐시 안전 규약). 다음 조각에서 소유자 전용
 * JS 아일랜드가 REST로 비공개 기록을 채울 걸 대비해 스타일만 미리 이식해 둔다. */
.recs{display:flex; flex-direction:column; gap:8px}
.rec{display:flex; align-items:center; gap:11px; border:2px solid var(--card-line); border-radius:4px; padding:11px 13px; background:var(--card)}
.rec.private{border-left:6px solid var(--priv); background:repeating-linear-gradient(-45deg,var(--card) 0 10px,var(--bg-2) 10px 20px)}
.rec .rtype{font-family:"JetBrains Mono",monospace; font-size:10px; font-weight:800; letter-spacing:.5px; padding:3px 7px; border-radius:2px; background:var(--oil); color:var(--amber-ink); flex:none; width:52px; text-align:center}
.rec .rbody{flex:1}
.rec .rbody b{font-size:14px; font-weight:800; display:block}
.rec .rbody span{font-family:"JetBrains Mono",monospace; font-size:11px; color:var(--muted)}
.rec .lock{font-family:"JetBrains Mono",monospace; font-size:10px; font-weight:800; color:var(--priv); border:1.5px solid var(--priv); padding:2px 6px; border-radius:2px; flex:none; display:flex; align-items:center; gap:4px}
.rec .rcost{font-family:"JetBrains Mono",monospace; font-weight:800; font-size:13px; color:var(--action); flex:none}
.hiddennote{font-family:"JetBrains Mono",monospace; font-size:11.5px; color:var(--muted); padding:11px 13px; border:2px dashed var(--line); border-radius:4px; text-align:center}

/* 댓글(TALK). .cmt는 홈 대시보드 보드행의 댓글수 배지(위 .row .cmt, "달쉼로그 피드" 구간)와
 * 클래스명이 우연히 겹친다 — 전역 재정의 대신 #comments로 스코프를 좁혀 충돌을 피했다
 * (.panel .p-body를 좁힌 전례와 동일 처리, 위 "사이드바" 주석 참고). */
.st-talk{background:var(--rust)}
#comments .cmt{display:flex; gap:10px; padding:10px 0; border-bottom:1px dashed var(--line)}
#comments .cmt:last-child{border-bottom:none}
#comments .cmt .av{font-family:"JetBrains Mono",monospace; font-weight:800; font-size:11px; border:2px solid var(--ink); border-radius:4px; padding:5px 7px; background:var(--plate-bg); color:var(--plate-ink); flex:none}
#comments .cmt .cb b{font-size:13px; margin-right:6px}
#comments .cmt .cb time{font-family:"JetBrains Mono",monospace; font-size:10px; color:var(--muted)}
#comments .cmt .cb p{margin:2px 0 0; font-size:14px}

@media(max-width:640px){
  .profile{grid-template-columns:1fr}
  .album{grid-template-columns:repeat(4,1fr)}
}

/* 사진첩 관리 오버레이(모듈 4 조각 4, garage-island.js) — "개러지 관리" 패널이 열려 있는 동안만
 * .ph 위에 뜬다. .ph는 실사진을 인라인 background-image로 받는 요소라 절대 배경 축약형을 쓰지
 * 않는다(위 378번대 줄 주석과 동일 규칙) — 이 오버레이 자체는 배경이 전부 단색이라 그 규칙과
 * 무관하지만, 위치 기준(position:relative)만 .ph에 보태 쓴다(기존 .album .ph 선언은 그대로 두고
 * 별도 규칙으로 얹는다). */
.album .ph{position:relative}
.ph-del{position:absolute; top:6px; right:6px; display:flex; align-items:center; gap:5px; z-index:1}
.ph-del button{
  width:22px; height:22px; border-radius:50%; border:2px solid var(--ink); background-color:var(--action);
  color:var(--cream); font-weight:800; font-size:13px; line-height:1; cursor:pointer; padding:0;
  display:flex; align-items:center; justify-content:center;
}
.ph-del-confirm{display:flex; gap:4px}
.ph-del-confirm button{
  width:auto; height:auto; border-radius:3px; font-family:"JetBrains Mono",monospace; font-size:10px;
  font-weight:800; padding:4px 7px;
}
.ph-del-confirm button:last-child{background-color:var(--card); color:var(--ink); border-color:var(--card-line)}

/* 기록 삭제 버튼(모듈 4 조각 4, garage-island.js) — 소유자 모드 동안 .rec 끝에 상시 노출(사진
 * 삭제와 달리 관리 패널 토글에 종속되지 않는다, 위 .ph-del 주석 참고). .rec의 기존 flex 레이아웃에
 * 자연스럽게 마지막 항목으로 붙는다. */
.rec-del{display:flex; align-items:center; gap:5px; flex:none}
.rec-del button{
  font-family:"JetBrains Mono",monospace; font-weight:800; cursor:pointer; border-radius:3px;
  border:2px solid var(--card-line); background-color:var(--card); color:var(--muted);
}
.rec-del > button{width:22px; height:22px; font-size:12px; padding:0; display:flex; align-items:center; justify-content:center}
.rec-del-confirm{display:flex; gap:4px}
.rec-del-confirm button{font-size:11px; padding:4px 8px}
.rec-del-confirm button:first-child{background-color:var(--action); border-color:var(--action); color:var(--cream)}

/* ===== 협력업체 미니홈피 공개뷰 (모듈 5 조각 1, single-dalshim_partner.php)
 * 원본: 협력업체 아티팩트(fdede320). 제외: .banner-demo(배너는 다음 조각), .adminnote/.devnote/
 * footer(프로토타입 데모 장치), "리뷰 쓰기" 토글 버튼(폼을 개러지·달쉼로그처럼 항상 렌더 — 위
 * single-dalshim_partner.php 상단 docblock 참고).
 *
 * 스코프 규칙: 이 섹션의 셀렉터는 전부 #screen-partner-detail 로 좁힌다. 이유:
 *  - .phead 는 이미 페이지 타이틀 헤더(달쉼로그 목록·글쓰기·마이페이지·벙 목록 — 위 82번대 줄)로
 *    전역 사용 중이라 이름이 겹친다. 아티팩트 마크업 계약을 지키려 클래스명은 그대로 .phead를 쓰되,
 *    ID 스코프로 특이도를 올려 다른 화면엔 전혀 영향 없이 이 화면에서만 새 스타일이 이긴다.
 *    (겹치는 속성 중 display/border-bottom/padding-bottom은 명시적으로 재선언해 리셋했다 — 더 높은
 *    특이도의 셀렉터라도 실제로 다시 선언한 속성만 덮어쓰고 나머지는 그대로 상속되기 때문에,
 *    빠뜨리면 예:.phead가 display:flex로 남아 .cover/.pinfo가 세로가 아니라 가로로 배치되는 사고가 난다.)
 *  - .cover/.album은 개러지 섹션(위 378번대 줄)에 이미 있다(다른 비율·열수) — 동일한 이유로 스코프
 *    하고, 겹치는 border/box-shadow도 함께 재선언해 리셋했다.
 *  - #comments .cmt를 스코프로 충돌을 피한 전례(위 441번대 줄 주석)와 동일 처리. */

#screen-partner-detail .phead{
  display:block; background:var(--oil); color:var(--kraft); padding:0; border-radius:0 0 6px 6px;
  box-shadow:0 6px 0 var(--action); overflow:hidden; margin-bottom:18px;
  border-bottom:none; padding-bottom:0;
}
#screen-partner-detail .cover{
  aspect-ratio:21/7; background-image:linear-gradient(135deg,var(--petrol),var(--oil));
  background-size:cover; background-position:center; background-repeat:no-repeat;
  position:relative; display:flex; align-items:flex-end; padding:16px;
  border:none; border-radius:0; box-shadow:none;
}
#screen-partner-detail .cover .pick{position:absolute; top:12px; right:12px; font-family:"JetBrains Mono",monospace; font-weight:800; font-size:10px; letter-spacing:1px; background:var(--amber); color:var(--on-amber-ink); padding:4px 9px; border-radius:2px}
#screen-partner-detail .cover .cat{font-family:"JetBrains Mono",monospace; font-weight:800; font-size:11px; letter-spacing:1px; background:var(--rust); color:var(--cream); padding:4px 10px; border-radius:2px}
#screen-partner-detail .pinfo{padding:16px 18px; display:flex; gap:14px; align-items:center; flex-wrap:wrap}
#screen-partner-detail .pinfo .nm{font-size:24px; font-weight:900; letter-spacing:-.03em}
#screen-partner-detail .pinfo .stars{font-family:"JetBrains Mono",monospace; font-size:12px; color:var(--amber-ink)}
#screen-partner-detail .pinfo .cta{margin-left:auto; display:flex; gap:8px}

#screen-partner-detail section{margin-bottom:24px}
#screen-partner-detail .about{background:var(--card); border:2px solid var(--ink); border-radius:5px; padding:15px; box-shadow:4px 4px 0 var(--shadow)}
#screen-partner-detail .about p{margin:0 0 12px; font-size:14px}
#screen-partner-detail .biz .r{display:flex; gap:8px; font-size:13px; padding:6px 0; border-bottom:1px dashed var(--line)}
#screen-partner-detail .biz .r:last-child{border-bottom:none}
#screen-partner-detail .biz .r .k{font-family:"JetBrains Mono",monospace; font-size:11px; color:var(--muted); width:56px; flex:none}
#screen-partner-detail .biz .r .v{font-weight:600}
/* 네이버 브랜드 고정색 — 팔레트 전환과 무관해야 한다(이슈 #11 범위 밖). #03C75A는 네이버 브랜드
   그린, #fff는 그 위에 얹는 대비 텍스트로 항상 짝을 이루는 고정 조합이라 함께 하드코딩 유지. */
#screen-partner-detail .naver{display:flex; align-items:center; justify-content:center; gap:8px; margin-top:12px; background:#03C75A; color:#fff; font-weight:800; font-size:13px; padding:11px; border-radius:4px}

/* 사진첩(작업 사진). 개러지 .album(5열·10장 최대)과 다른 4열·8장 레이아웃이라 스코프 필수(위 스코프
 * 규칙 참고). 배경은 실사진 인라인 background-image로 덮이므로 롱핸드 필수(개러지 섹션 주석과
 * 동일 사유 — 축약형은 size/repeat/position을 리셋해 바둑판 반복을 재발시킨다). */
#screen-partner-detail .album{display:grid; grid-template-columns:repeat(4,1fr); gap:7px}
#screen-partner-detail .album .ph{aspect-ratio:1; border-radius:4px; border:2px solid var(--ink); background-image:linear-gradient(160deg,var(--warmgrey),var(--oil)); background-size:cover; background-position:center; background-repeat:no-repeat; box-shadow:2px 2px 0 var(--shadow)}
#screen-partner-detail .album .ph:nth-child(3n){background-image:linear-gradient(160deg,var(--petrol),var(--oil))}
#screen-partner-detail .album .ph:nth-child(2n){background-image:linear-gradient(160deg,var(--rust),var(--oil))}

/* 소식 */
#screen-partner-detail .news{display:flex; flex-direction:column; gap:8px}
#screen-partner-detail .nrow{display:flex; gap:11px; align-items:center; border:2px solid var(--card-line); border-radius:4px; padding:10px 13px; background:var(--card)}
#screen-partner-detail .nrow .tag{font-family:"JetBrains Mono",monospace; font-size:9px; font-weight:800; padding:3px 7px; border-radius:2px; background:var(--amber); color:var(--on-amber-ink); flex:none}
#screen-partner-detail .nrow b{font-size:14px; font-weight:700; flex:1}
#screen-partner-detail .nrow time{font-family:"JetBrains Mono",monospace; font-size:11px; color:var(--muted)}

/* 리뷰. PHOTO/NEWS/REVIEW 스텐실은 공용 .sec-head .stencil(위 325번대 줄)을 재사용하고 배경색만
 * 새 modifier .st-partner로 얹는다 — 기존 .st-car 등과 같은 방식(전역 선언, 스코프 불필요: 이름이
 * 새로 만든 것이라 충돌 없음). 아티팩트는 세 섹션 전부 동일한 petrol 배경이라 개러지처럼 섹션별로
 * 색을 나눌 필요가 없어 --petrol 토큰을 그대로 재사용했다(새 토큰 없음). */
.st-partner{background:var(--petrol)}
#screen-partner-detail .rev{display:flex; gap:10px; padding:11px 0; border-bottom:1px dashed var(--line)}
#screen-partner-detail .rev .av{font-family:"JetBrains Mono",monospace; font-weight:800; font-size:11px; border:2px solid var(--ink); border-radius:4px; padding:5px 7px; background:var(--plate-bg); color:var(--plate-ink); flex:none}
#screen-partner-detail .rev .rb b{font-size:13px; margin-right:6px}
#screen-partner-detail .rev .rb .st{color:var(--action); font-size:12px}
#screen-partner-detail .rev .rb p{margin:3px 0 0; font-size:14px}

@media(max-width:640px){
  #screen-partner-detail .album{grid-template-columns:repeat(3,1fr)}
}

/* 협력업체 홈 배너(front-page.php #dalshim-banner-slot, 모듈 5 조각 2). 원본: 협력업체
 * 아티팩트(fdede320)의 .banner 컴포넌트만 이식 — .banner-demo 래퍼·.bstats(노출/클릭/CTR
 * 데모)·.bnote는 이식하지 않는다(관리자 통계 화면은 후속 조각, 상단 front-page.php/
 * class-partner-controller.php docblock 참고).
 *
 * 스코프 규칙: #dalshim-banner-slot으로 좁힌다 — 위 #screen-partner-detail 전례와 동일 이유로,
 * .banner라는 이름 자체는 지금 이 파일 어디에도 없어 충돌은 없지만(상단 확인) 후속 화면에서
 * 같은 이름을 재사용할 여지를 남겨두기 위해 처음부터 스코프를 건다.
 *
 * 그라데이션 배경은 롱핸드로 쓴다(개러지·협력업체 사진첩 섹션과 동일 관례) — .banner는 배경이
 * 항상 그라데이션 고정이라 실사진으로 덮일 일은 없지만, 이 파일 전체의 배경 축약형 금지 관례를
 * 신규 코드에도 동일하게 적용한다. */
#dalshim-banner-slot .banner{
  border:2.5px solid var(--amber); border-radius:5px; overflow:hidden;
  background-image:linear-gradient(120deg,var(--rust),var(--oil)); background-size:cover; background-position:center; background-repeat:no-repeat;
  /* 상단 패딩 30px: 아티팩트 원값(16px)은 절대배치 .btag(top 6px + 높이 약 15px)가 제목과 겹친다 —
   * 사이드바 실장 후 사용자 확인으로 드러난 원본 시안의 잠복 결함이라 의도적으로 보정(2026-07-18). */
  display:flex; align-items:center; gap:14px; padding:30px 18px 14px; position:relative;
}
#dalshim-banner-slot .banner .btag{position:absolute; top:6px; left:8px; font-family:"JetBrains Mono",monospace; font-size:8px; font-weight:800; letter-spacing:1px; background-color:rgba(15,12,9,.6); color:var(--amber-ink); padding:2px 6px; border-radius:2px}
#dalshim-banner-slot .banner .btx b{display:block; font-size:18px; font-weight:900; color:var(--cream); letter-spacing:-.02em}
#dalshim-banner-slot .banner .btx span{font-size:13px; color:rgba(232,222,200,.8)}
#dalshim-banner-slot .banner .bgo{margin-left:auto; font-weight:800; font-size:13px; color:var(--amber-ink); border:2px solid var(--amber-ink); padding:8px 14px; border-radius:3px; flex:none}

/* 소유자 인라인 폼(모듈 4 조각 2, garage-island.js) — 차량 수정/추가 폼과 기록 추가 폼이 공용으로
 * 쓰는 컨테이너. 새 색상 토큰 발명 없이 .spec과 동일한 card/ink/shadow 토큰, .c-write input과
 * 동일한 입력 스타일을 재사용한다. 배경은 항상 단색이라(인라인 background-image가 절대 얹히지
 * 않음) 축약형을 써도 안전하지만, 이 파일의 배경 축약형 금지 관례(위 .s/.cartab .th 주석 참고)를
 * 신규 코드에도 동일하게 적용해 longhand(background-color)만 쓴다. */
.gform{background-color:var(--card); border:2px solid var(--card-line); border-radius:5px; box-shadow:4px 4px 0 var(--shadow); padding:15px; margin-bottom:14px; display:flex; flex-direction:column; gap:12px}
.gform label{display:flex; flex-direction:column; gap:5px; font-size:12px; font-weight:700; color:var(--muted)}
.gform input,.gform select{
  font-family:inherit; font-size:14px; padding:10px 11px; border:2px solid var(--card-line); border-radius:3px;
  background-color:var(--surface); color:var(--ink); min-height:42px;
}
.gform input::placeholder{color:var(--muted)}
.gform input:focus,.gform select:focus{outline:3px solid var(--action); outline-offset:1px; border-color:var(--action)}
.gform .f-grid{display:grid; grid-template-columns:1fr 1fr; gap:12px}
.gform label.gform-check{flex-direction:row; align-items:center; gap:8px; font-size:13px; color:var(--ink)}
.gform label.gform-check input{min-height:auto; width:16px; height:16px; padding:0; flex:none}
.gform-err{margin:0; font-size:13.5px; font-weight:700; color:var(--action)}
.gform-actions{display:flex; gap:8px; justify-content:flex-end}

@media(max-width:640px){
  .gform .f-grid{grid-template-columns:1fr}
}

/* 마이페이지 "내 개러지"(모듈 4 조각 3, my-island.js) 목록 전용 썸네일. "내 글"·"참여한 벙"과
 * 같은 board .row를 재사용하지만 그 두 목록의 .row에는 카테고리 배지(.cat)만 있고 썸네일 슬롯이
 * 없어 최소 추가했다. 시각 규격(크기·배경 처리)은 다차량 탭(.cartab .th, 위 396행대)과 동일하게
 * 맞춘다 — 썸네일 없으면 같은 그라디언트 폴백, 있으면 실사진(위 .gform 주석과 동일 이유로 배경
 * 축약형 대신 longhand만 사용). 셀렉터를 이 목록의 컨테이너 id로 좁혀 다른 .row(내 글·참여한 벙)
 * 에는 영향이 없게 한다(#comments .cmt 스코프 전례와 동일 방식, 위 444행대 참고). */
#dalshim-my-garages .th{width:34px; height:26px; border-radius:3px; background-image:linear-gradient(135deg,var(--petrol),var(--oil)); background-size:cover; background-position:center; background-repeat:no-repeat; flex:none; border:1.5px solid var(--ink)}

/* ===== 출석 체크인 (page-checkin.php, 모듈 6 조각 1~2). 원본: 출석 체크인 아티팩트 =====
 * 전부 #screen-checkin 하위로 스코프해서 이식한다 — 특히 .btn은 전역 .btn(외곽선 스타일)이
 * 이미 있어 그대로 이름이 겹치므로, 이 화면 안에서만 원본의 채워진 액션 버튼 모양으로
 * 오버라이드한다(.btn.done 포함). 아티팩트의 devnote·footer는 이식하지 않는다(데모 전용 문구,
 * page-checkin.php 문서 참조). "내 쿠폰함"(.coupon)은 조각 2에서 아래에 이식했다. */

/* --ok(완료 상태 색) 캐스케이드는 tokens.css로 이동했다(이슈 #11, 토큰 단일소스화 —
   라이트/다크/data-theme 오버라이드 구조는 값 그대로 보존). */

#screen-checkin h1{margin:0 0 4px; font-weight:900; letter-spacing:-.04em; font-size:30px}
#screen-checkin .lede{margin:0 0 22px; color:var(--muted); font-size:14px}

/* streak 히어로 */
#screen-checkin .streak{background:var(--oil); color:var(--kraft); border-radius:6px; padding:22px 20px; box-shadow:7px 7px 0 var(--action); text-align:center; margin-bottom:18px}
#screen-checkin .streak .fire{font-size:44px; line-height:1}
#screen-checkin .streak .n{font-family:"JetBrains Mono",monospace; font-weight:800; font-size:52px; color:var(--amber-ink); line-height:1; letter-spacing:-2px}
#screen-checkin .streak .lbl{font-family:"JetBrains Mono",monospace; font-size:12px; letter-spacing:2px; color:var(--oil-muted); margin-top:4px}
#screen-checkin .streak .btn{margin-top:16px}
#screen-checkin .btn{
  font-weight:800; font-size:14px; padding:12px 20px; border-radius:3px; cursor:pointer;
  border:2px solid var(--action); background:var(--action); color:var(--cream); box-shadow:2px 2px 0 var(--shadow);
  min-height:46px; display:inline-flex; align-items:center; gap:8px;
}
#screen-checkin .btn.done{background:transparent; border-color:var(--oil-edge); color:var(--ok); box-shadow:none; cursor:default}

/* 쿠폰 진행도 */
#screen-checkin .progress{background:var(--card); border:2.5px solid var(--ink); border-radius:6px; padding:18px; box-shadow:5px 5px 0 var(--shadow); margin-bottom:18px}
#screen-checkin .progress .top{display:flex; justify-content:space-between; align-items:baseline; margin-bottom:10px}
#screen-checkin .progress .top b{font-weight:900; font-size:16px}
#screen-checkin .progress .top .cnt{font-family:"JetBrains Mono",monospace; font-weight:800; color:var(--action)}
#screen-checkin .pbar{height:16px; border-radius:8px; background:var(--bg-2); border:2px solid var(--ink); overflow:hidden; position:relative}
/* 줄무늬는 반드시 background-image 롱핸드로(위 feed shots .s 주석과 동일 이유 — background
   축약형을 쓰면 인라인 width 갱신 등 다른 규칙과 얽힐 때 size/repeat이 리셋될 위험이 있다). */
#screen-checkin .pbar i{display:block; height:100%; width:0; background-image:repeating-linear-gradient(-45deg,var(--amber) 0 10px,var(--amber-deep) 10px 20px)}
#screen-checkin .pmsg{margin-top:10px; font-size:13px; color:var(--muted)}
#screen-checkin .pmsg b{color:var(--action)}

/* 달력 — checkin-island.js가 통째로 그린다(날짜 의존 데이터라 서버렌더 불가, page-checkin.php 문서 참조) */
#screen-checkin .cal{background:var(--card); border:2px solid var(--ink); border-radius:6px; padding:16px; box-shadow:4px 4px 0 var(--shadow); margin-bottom:18px}
#screen-checkin .cal .ch{display:flex; justify-content:space-between; align-items:center; margin-bottom:12px}
#screen-checkin .cal .ch b{font-weight:900; font-size:15px}
#screen-checkin .cal .ch span{font-family:"JetBrains Mono",monospace; font-size:11px; color:var(--muted)}
#screen-checkin .cal .grid{display:grid; grid-template-columns:repeat(7,1fr); gap:5px}
#screen-checkin .cal .dow{font-family:"JetBrains Mono",monospace; font-size:10px; color:var(--muted); text-align:center; padding-bottom:3px}
#screen-checkin .day{aspect-ratio:1; border-radius:4px; border:2px solid var(--card-line); display:flex; align-items:center; justify-content:center; font-family:"JetBrains Mono",monospace; font-size:12px; font-weight:700; color:var(--muted); position:relative}
/* 요주의: .stamp는 벙 카드의 "모집중" 고무도장(위 170행대 — absolute+rotate(9deg)+패딩)이 전역으로
 * 이미 쓰는 이름이라, 달력 칸에 같은 클래스를 얹으면 스코프 규칙이 재선언하지 않은 속성(top/right·
 * transform·letter-spacing·padding·opacity)이 그대로 새어 들어와 칸이 기울고 격자를 벗어난다
 * (2026-07-18 사용자 QA에서 발견). .beong-card .stamp의 중화 전례(위 366행대)와 동일하게 유출
 * 속성을 전부 명시적으로 되돌린다. */
#screen-checkin .day.stamp{border-color:var(--action); background:var(--surface); color:var(--ink); top:auto; right:auto; transform:none; letter-spacing:normal; padding:0; opacity:1}
#screen-checkin .day.stamp::after{content:""; position:absolute; inset:3px; border:2px solid var(--action); border-radius:50%; opacity:.55}
#screen-checkin .day.today{border-color:var(--amber); border-width:3px; color:var(--ink); font-weight:900}
#screen-checkin .day.empty{border:none}

/* 내 쿠폰함(모듈 6 조각 2) — checkin-island.js가 쿠폰이 1장이라도 있을 때만 이 섹션을 보여준다
   (빈 배열이면 #dalshim-checkin-coupons가 hidden으로 남는다, page-checkin.php 문서 참조).
   카드 색상·구조는 아티팩트 원본(.coupon) 값을 그대로 이식했다. background는 위 .gform·feed shots
   주석과 같은 이유로 축약형 대신 longhand(background-color)만 쓴다. */
#screen-checkin .coupons{margin-bottom:18px}
#screen-checkin .coupons .sec-h{margin-bottom:10px}
#screen-checkin .coupons .sec-h b{font-weight:900; font-size:15px}
#screen-checkin .coupon{display:flex; align-items:stretch; border:2.5px dashed var(--action); border-radius:6px; overflow:hidden; background-color:var(--surface); box-shadow:4px 4px 0 var(--shadow); margin-bottom:10px}
#screen-checkin .coupon .amt{background-color:var(--action); color:var(--cream); display:flex; flex-direction:column; align-items:center; justify-content:center; padding:0 18px; flex:none}
#screen-checkin .coupon .amt b{font-family:"JetBrains Mono",monospace; font-weight:800; font-size:26px; line-height:1}
#screen-checkin .coupon .amt span{font-size:10px}
#screen-checkin .coupon .cinfo{padding:12px 14px; flex:1}
#screen-checkin .coupon .cinfo b{font-size:15px; font-weight:800; display:block}
#screen-checkin .coupon .cinfo .code{font-family:"JetBrains Mono",monospace; font-size:12px; color:var(--action); margin-top:3px}
#screen-checkin .coupon .cinfo .exp{font-family:"JetBrains Mono",monospace; font-size:11px; color:var(--muted); margin-top:2px}

/* .st-beong 글자색이 .phead .stencil(크림, 특이도 0-2-0)에 덮이는 문제 — 앰버 칩은 반전 글자
 * 토큰을 써야 하므로 더 높은 특이도로 재선언(다크 감사 결함 수정, tokens.css --on-amber-ink 참고). */
.phead .stencil.st-beong, .sec-head .stencil.st-beong{color:var(--on-amber-ink)}