/* =========================================================
   쓱싹 — 디자인 토큰 (CLAUDE.md 디자인 규칙, docs/DESIGN.md)
   밝은 화면 하나만. 표에 없는 색은 새로 만들지 않는다.
   11/3 디자인 2판 (팀 요청: "글씨 가독성이 떨어져, 동글동글하면서 볼드체로", "너무 AI티 나, 모던하고 안전한 느낌",
   "쓱싹 로고는 특별하게, 약간 입체적으로"): 나눔스퀘어라운드, 믿음 가는 파랑 주 버튼, 둥근 모서리, 진한 회색 글자, 입체 로고.
   예전 값은 각 줄 주석에 남겼다.
   ========================================================= */
/* 나눔스퀘어라운드 (NAVER, OFL-1.1, public/fonts/OFL.txt). 보통 400 · 굵게 700 · 아주 굵게 800 */
@font-face{font-family:"NanumSquareRound";src:url(/fonts/NanumSquareRoundR.woff2) format("woff2");font-weight:400;font-display:swap}
@font-face{font-family:"NanumSquareRound";src:url(/fonts/NanumSquareRoundB.woff2) format("woff2");font-weight:700;font-display:swap}
@font-face{font-family:"NanumSquareRound";src:url(/fonts/NanumSquareRoundEB.woff2) format("woff2");font-weight:800;font-display:swap}
:root{
  /* 11/3 디자인 3판 (팀 요청: "AI스러운 파란색은 쓰지 말아줘, 차라리 검은색 흰색으로"): 파랑을 모두 검정·흰색·회색으로.
     2판 값: --bg-alt #F4F7FB, --text-2 #333D4B, --line #E3E8EF, --primary #1B64DA / hover #1652B8, --accent #1B64DA / soft #EAF2FE,
     --brand-1 #2E78F0 · --brand-2 #1652B8 · --brand-3 #0F3E8F, --brand-hover #3B84F5, --line-soft #E6EBF2, --hl #D6E6FD, --seg-bg #EAEFF5 */
  /* 11/10 디자인 4판 (본선, 팀 요청: "cream, ink black, burnt orange 세 가지 색을 메인으로, 편안하면서도 강렬한 인상"):
     바탕은 크림, 글자와 고른 표시는 잉크 블랙, 주 버튼·포커스·밑줄은 번트 오렌지.
     3판 값: --bg #FFFFFF, --bg-alt #F5F6F8, --text #191F28, --text-2 #262D38, --text-3 #404955, --line #E2E5E9,
     --primary #191F28 / hover #333D4B, --accent #191F28, --accent-soft #F0F2F4, --line-soft #E2E5E9, --seg-bg #EEF0F3 */
  /* 11/10 밤 (팀: "크림색이 너무 칙칙해, 좀 더 밝으면서도 부드럽게"): 회색 기 도는 크림을 살구빛 도는 밝은 아이보리로.
     첫 값: --cream #F6F0E4, --bg #FFFCF6, --bg-alt #EEE6D6, --line #E2D8C5, --line-strong #CDBFA6, --line-soft #E6DDCB, --seg-bg #EAE1CF, --accent-soft #EFE7D7 */
  /* 11/10 밤 다시 (팀: "아직도 크림이 너무 어둡고 그냥 회색 같잖아, 웜톤 느낌이 확 들면서도 밝아야지"): #FBF7F1은 색 기운(가장 큰 값 − 가장 작은 값)이
     10뿐이라 회색처럼 보였다. 빨강 값을 255로 올리고 색 기운을 25로 키운 밝은 웜 크림으로.
     두 번째 값: --cream #FBF7F1, --bg #FFFEFB, --bg-alt #F5EDE3, --line #EBE1D3, --line-strong #D9CAB7, --line-soft #EAE0D2, --seg-bg #F2E9DD, --accent-soft #F5EDE3 */
  /* 11/11 디자인 5판 (팀: "우리가 청결해지는 사이트 이런 느낌이니깐 흰색 배경에 민트? 파랑? 청록? 이런 색으로 바꿔서 디자인을 적용해주라"):
     크림·잉크·주황을 흰 바탕 · 맑은 잉크 · 청록 · 민트로. 모양은 참고 사이트(relevovinco)의 6px 모서리, 점선 구분선, 눌리는 입체 버튼.
     4판 값: --cream(이제 --page) #FFF5E6, --bg #FFFDF9, --bg-alt #FDEBD2, --text #1D1A16, --text-2 #2B2620, --text-3 #4A4338,
     --line #F1E1C9, --line-strong #E2C9A6, --primary #E0560F / hover #E86624 / 글자 #1D1A16, --accent #E0560F, --accent-soft #FDEBD2,
     --orange-soft(이제 --teal-soft) #FFE3CF, --orange-ink(이제 --teal-ink) #B34000, --line-soft #EFDFC6, --seg-bg #F9E7CE */
  /* 11/11 오후 다시 (팀: "너무 초록색이어서 좀 더 파란색이 들어가게 좀 더 푸르게"): 청록(색상각 177°)을 물빛 파랑(197°)으로.
     첫 5판 값: --bg-alt #EEF8F6, --line #DCEBE8, --line-strong #B3D4CE, --line-dash #7FA8A2(이제 잉크), --primary #0E7C76 / hover #0A6E69,
     --accent #0E7C76, --accent-soft #E3F5F0, --teal-soft(이제 --tint) #DDF3EE, --teal-ink(이제 --tint-ink) #0A6E69,
     --mint(이제 --soft-btn) #CDEFE7 / hover #BDE9DE, --line-soft #E1EEEB, --seg-bg #E8F4F1 */
  /* 11/11 오후 또 다시 (팀: "좀 더 쨍한 파란색이면 좋겠어 밝고"): 물빛 파랑 #0B7DAB(197°)를 쨍한 파랑 #0675E3(210°)으로.
     흰 글자가 4.5:1을 넘는 가장 밝은 쪽. 물빛 파랑 값: --bg-alt #F1F8FB, --line #DCE9EF, --line-strong #B3CFDC, --primary #0B7DAB / hover #0A719A,
     --accent #0B7DAB, --accent-soft #E8F4F9, --tint #E2F2F8, --tint-ink #08698F, --soft-btn #CFE8F2 / hover #C1DFEB, --line-soft #E1EDF2, --seg-bg #E6F1F6 */
  /* 11/11 오후 한 번 더 (팀 승민: "좀 더 쨍한 파란색으로"): #0675E3(210°, 채도 95%)을 채도 100%인 #006BFF(215°)로.
     흰 글자 4.5:1을 지키면서 낼 수 있는 가장 쨍한 파랑이다. 쨍한 파랑 #0675E3 때 값: --bg-alt #F0F8FE, --line #D8E9F5, --line-strong #A9CFEA,
     --primary #0675E3 / hover #0566C5, --accent #0675E3, --accent-soft #E8F5FE, --tint #DFF1FD, --tint-ink #0868B0,
     --soft-btn #D4EEFC / hover #C3E6FA, --line-soft #DFEEF8, --seg-bg #E5F2FB */
  --page:#FFFFFF;                                           /* 5판: 페이지·상단 메뉴 바탕 (흰색) */
  --bg:#FFFFFF; --bg-alt:#F0F7FF;                           /* 카드·입력칸 바탕 · 번갈아 쓰는 아주 연한 하늘색 */
  --text:#13252B; --text-2:#2C3E44; --text-3:#4A5C62;       /* 맑은 잉크 (흰 바탕 15.8 · 9.9 이상 · 7.0:1, 연한 하늘색 위 text-3 6.5:1) */
  --line:#D6E6F7; --line-strong:#A7C8F0;                    /* 테두리 · 사진 넣는 칸 점선 */
  --line-dash:var(--text);                                  /* 점선 구분선: 참고 사이트처럼 글자색(잉크) 1px 점선. 약속 목록에만 쓴다 */
  /* 11/10 밤 팀 "이런 칙칙한 주황색 말고 아이폰 17 프로의 그 주황색처럼 강렬하게": 번트 오렌지 → 코스믹 오렌지 느낌의 쨍한 주황.
     쨍한 주황 위 흰 글자는 대비가 2.9:1뿐이라 주 버튼 글자는 잉크로 바꿨다.
     첫 값(번트 오렌지): --primary #B94A10 / hover #9C3C08 / 글자 #FFFCF6, --accent #B94A10, --orange-soft #F7E3D3, --orange-ink #9C3C08 */
  /* 11/10 밤 다시 (팀: "이건 너무 쨍해서 약간 가벼운 느낌, 좀 더 진정성이 느껴지는 주황"): 쨍한 #FF6B1A(hover #F05A00, 선 #E85D04)와
     번트 #B94A10 사이의 깊고 선명한 주황으로 */
  --primary:#006BFF; --primary-hover:#005FE6; --on-primary:#FFFFFF;   /* 5판: 주 버튼 가장 쨍한 파랑 + 흰 글자 (4.6:1, 올리면 조금 진하게 5.6:1) */
  --accent:#006BFF; --accent-soft:#E8F2FF;                  /* 포커스·탭 밑줄·제목 낱말 (흰 바탕 4.6:1, 연한 하늘색 위 4.3:1, 선과 큰 글자에만) · 고른 칸 바탕 */
  --tint:#E0EEFF; --tint-ink:#0057D1;                       /* 연한 하늘색 바탕 · 작은 파란 글자와 링크 (흰 바탕 6.4:1, 연한 하늘색 위 5.4:1) */
  --soft-btn:#D6E8FF; --soft-btn-hover:#C6DEFF;             /* 보조 버튼 연한 하늘색 (잉크 글자 12.7:1 · 11.5:1) */
  --line-soft:#DDEBFA; --seg-bg:#E5EFFC;                    /* 카드 테두리 · 분할 버튼 바탕 */
  --danger:#B42318;
  --ok:#12A594;
  /* 수준 색: 선(상자, 고리) / 칩 배경 / 칩 글자 */
  /* 11/3 다섯 칸: 0 알기 어려움 · 1 도시 · 2 구 · 3 동네 · 4 핀
     (예전 네 칸: lv0 도시 #B0B8C1 · lv1 구 #F5C518 · lv2 동네 #F28C28/#FFF0E3/#A04F00 · lv3 핀 #E5484D) */
  --lv0:#B0B8C1; --lv0-bg:#F2F4F6; --lv0-ink:#4E5968;
  --lv1:#F5C518; --lv1-bg:#FFF8DB; --lv1-ink:#8A6A00;
  --lv2:#F7A21B; --lv2-bg:#FFF1DC; --lv2-ink:#8F5200;
  --lv3:#EE7430; --lv3-bg:#FFEDE3; --lv3-ink:#A53F06;
  --lv4:#E5484D; --lv4-bg:#FDECEC; --lv4-ink:#B42318;
  --lvid:#1F9D55; --lvid-bg:#E7F6EC; --lvid-ink:#11743C;   /* 11/3: 개인 정보 초록 (예전 #12A594 / #E3F7F4 / #08695E) */
  --r-card:6px; --r-control:6px; --r-pill:999px; --r-box:4px;   /* 5판: 참고 사이트처럼 버튼·입력칸·카드·사진 틀 모두 6px (첫 5판 카드 10px, 4판 20px / 12px, 예전 12px / 8px) */
  /* 4판: 잉크 색으로 옅게 (3판 0 1px 3px rgba(16,24,40,.06),0 1px 2px rgba(16,24,40,.04) / 떠 있는 것 0 8px 24px rgba(0,0,0,.12)) */
  /* 5판: 맑은 잉크 색으로 (4판 0 1px 2px rgba(29,26,22,.05),0 6px 18px -10px rgba(29,26,22,.18) / 떠 있는 것 0 14px 32px -10px rgba(29,26,22,.28)) */
  --shadow-card:1px 1px 0 rgba(19,37,43,.05),6px 10px 24px -12px rgba(19,37,43,.18);   /* 5판 다시: 오른쪽 아래로 (첫 5판 0 1px 2px rgba(19,37,43,.05),0 6px 18px -10px rgba(19,37,43,.16)) */
  --shadow-float:0 14px 32px -10px rgba(19,37,43,.26);
  /* 5판 입체 그림자: 참고 사이트처럼 빛이 왼쪽 위에서 온다 (밝은 1px은 왼쪽 위, 그림자는 오른쪽 아래).
     참고 사이트 값을 흰 바탕에 맞게 옅게 줄였다 (그 사이트 .2 · .26 · 안쪽 .38 · .72).
     첫 5판 값(위아래로만): 버튼 inset 0 1px 0 rgba(255,255,255,.28), inset 0 -2px 0 rgba(6,48,46,.24), 0 1px 2px …, 0 3px 6px -2px …
     / 누름 inset 0 2px 5px rgba(6,48,46,.32), inset 0 1px 1px rgba(6,48,46,.22) */
  --shadow-btn:inset 1px 1px 0 rgba(255,255,255,.3),-1px -1px 0 rgba(255,255,255,.8),1px 1px 0 rgba(19,37,43,.22),3px 5px 6px rgba(19,37,43,.14),8px 12px 22px -6px rgba(19,37,43,.18);   /* 튀어나온 버튼 */
  --shadow-btn-soft:inset 1px 1px 0 rgba(255,255,255,.8),-1px -1px 0 rgba(255,255,255,.8),1px 1px 0 rgba(19,37,43,.16),3px 5px 6px rgba(19,37,43,.10),8px 12px 22px -6px rgba(19,37,43,.12);   /* 튀어나온 보조 버튼 */
  --shadow-btn-in:inset 4px 6px 10px rgba(19,37,43,.26),inset 1px 1px 2px rgba(19,37,43,.28),inset -1px -1px 0 rgba(255,255,255,.6);   /* 눌린 버튼 */
  --shadow-small:1px 1px 1px rgba(19,37,43,.14),2px 3px 5px rgba(19,37,43,.14);   /* 작게 튀어나온 것: 고른 분할 버튼 칸, 고른 로고 타일 */
  --shadow-carve:inset 3px 4px 8px rgba(19,37,43,.10),inset 1px 1px 2px rgba(19,37,43,.12),1px 1px 0 rgba(255,255,255,.9);   /* 파인 것: 입력칸, 분할 버튼 바탕, 사진 넣는 칸 */
  --font:"NanumSquareRound","나눔스퀘어라운드","Pretendard Variable",Pretendard,-apple-system,"Apple SD Gothic Neo","Malgun Gothic",sans-serif;   /* 예전 Pretendard가 처음 */
  /* 모션 토큰 (JS의 MOTION과 같은 값) */
  --motion-fast:200ms; --motion-base:300ms; --motion-slow:600ms;
  --ease:cubic-bezier(.22,1,.36,1);
  --z-nav:50; --z-toast:80; --z-modal:90;
  --nav-h:68px;   /* 예전 64px */
  --gutter:32px;
}

/* ---------- 기본 ---------- */
*,*::before,*::after{box-sizing:border-box}
html{scroll-behavior:smooth;-webkit-text-size-adjust:100%;scroll-padding-top:calc(var(--nav-h) + 16px)}
body{margin:0;background:var(--bg);color:var(--text);font-family:var(--font);font-size:17px;line-height:1.75;font-weight:700;letter-spacing:-.01em;word-break:keep-all;overflow-wrap:break-word;-webkit-font-smoothing:antialiased}
img,canvas,svg{max-width:100%}
a{color:var(--accent);text-underline-offset:3px}
h1,h2,h3,h4{margin:0;letter-spacing:-.02em}
h1{font-size:42px;line-height:1.3;font-weight:800}
h2{font-size:32px;line-height:1.35;font-weight:800}
h3{font-size:20px;line-height:1.5;font-weight:700}
p{margin:0}
/* 11/4 (팀 요청: "사이트에 좌우로 빈 공간이 너무 많아, 좀 넓게 넓게 써도 되잖아"): 본문 최대 폭 1080px → 1600px,
   1280px 넘는 화면은 좌우 여백 32px → 48px. 글만 있는 문단은 따로 정한 폭(680px 등)을 그대로 둔다 */
.wrap{max-width:calc(1600px + var(--gutter) * 2);margin:0 auto;padding:0 var(--gutter)}   /* 예전 calc(1080px + var(--gutter) * 2) */
@media (min-width:1280px){:root{--gutter:48px}}
.sec{padding:96px 0}
.sr-only{position:absolute!important;width:1px;height:1px;padding:0;margin:-1px;overflow:hidden;clip:rect(0,0,0,0);white-space:nowrap;border:0}
.skip{position:absolute;left:12px;top:-64px;z-index:100;background:var(--primary);color:var(--bg);padding:10px 14px;border-radius:var(--r-control);text-decoration:none;font-weight:700}
.skip:focus{top:12px}
:focus-visible{outline:3px solid var(--accent);outline-offset:4px}
@media (max-width:767px){
  :root{--gutter:20px}
  body{font-size:16px}
  h1{font-size:30px} h2{font-size:24px} h3{font-size:18px}
  .sec{padding:64px 0}
}

/* ---------- 버튼 · 칩 · 분할 버튼 ---------- */
.btn{display:inline-flex;align-items:center;justify-content:center;gap:8px;min-height:48px;padding:0 22px;border-radius:var(--r-control);border:1px solid transparent;font:700 16px/1.2 var(--font);text-decoration:none;cursor:pointer;white-space:nowrap;transition:background-color var(--motion-fast) var(--ease),border-color var(--motion-fast) var(--ease),color var(--motion-fast) var(--ease),transform var(--motion-fast) var(--ease)}
.btn:active{transform:scale(.98)}
.btn:disabled,.btn[aria-disabled="true"]{opacity:.4;cursor:not-allowed;transform:none}
.btn-sm{min-height:44px;padding:0 16px;font-size:15px}
.btn-xs{min-height:44px;padding:0 12px;font-size:15px}
.btn-primary{background:var(--primary);color:#FFFFFF;box-shadow:inset 0 -2px 0 rgba(0,0,0,.14)}
.btn-primary:hover:not(:disabled){background:var(--primary-hover)}
.btn-quiet,.btn-ghost{background:var(--bg);color:var(--text);border-color:var(--line)}
.btn-quiet:hover:not(:disabled),.btn-ghost:hover:not(:disabled){background:var(--accent-soft);border-color:#C9DBFA}
.btn-quiet[aria-pressed="true"]{background:var(--accent-soft);border-color:var(--accent)}
.link-btn{display:inline-flex;align-items:center;justify-content:center;gap:6px;min-height:44px;min-width:44px;padding:4px 2px;border:0;background:none;color:var(--accent);font:700 15px/1.3 var(--font);text-decoration:none;cursor:pointer}
.link-btn:hover:not(:disabled){text-decoration:underline;text-underline-offset:3px}
.link-btn:disabled{opacity:.4;cursor:not-allowed}
.link-danger{color:var(--danger)}
.spin{width:16px;height:16px;border:2px solid currentColor;border-right-color:transparent;border-radius:50%;animation:spin calc(var(--motion-slow) * 1.5) linear infinite;flex:none}
@keyframes spin{to{transform:rotate(360deg)}}
.chip{display:inline-flex;align-items:center;gap:4px;height:24px;padding:0 10px;border-radius:var(--r-pill);font:700 14px/1 var(--font);background:var(--chip-bg,var(--lv0-bg));color:var(--chip-ink,var(--lv0-ink));white-space:nowrap;vertical-align:middle}
.chip.lv0{--chip-bg:var(--lv0-bg);--chip-ink:var(--lv0-ink)}
.chip.lv1{--chip-bg:var(--lv1-bg);--chip-ink:var(--lv1-ink)}
.chip.lv2{--chip-bg:var(--lv2-bg);--chip-ink:var(--lv2-ink)}
.chip.lv3{--chip-bg:var(--lv3-bg);--chip-ink:var(--lv3-ink)}
.chip.lv4{--chip-bg:var(--lv4-bg);--chip-ink:var(--lv4-ink)}
.chip.lvid{--chip-bg:var(--lvid-bg);--chip-ink:var(--lvid-ink)}
.chip-sm{height:22px;padding:0 8px;font-size:13px}
.chip-lg{height:32px;padding:0 14px;font-size:16px}
.seg{display:inline-flex;flex-wrap:wrap;gap:4px;padding:4px;border:0;border-radius:14px;overflow:hidden;background:var(--seg-bg)}   /* 11/3: 회색 바탕 위 흰 알약 */
.seg-btn{min-height:40px;padding:0 14px;border:0;border-radius:10px;background:transparent;color:var(--text-2);font:700 15px/1.2 var(--font);cursor:pointer;transition:background-color var(--motion-fast) var(--ease),color var(--motion-fast) var(--ease)}
.seg-btn:first-child{border-left:0}
.seg-btn:hover{background:rgba(255,255,255,.6);color:var(--text)}
.seg-btn[aria-pressed="true"],.seg-btn[aria-checked="true"]{background:var(--bg);color:var(--accent);box-shadow:0 1px 3px rgba(16,24,40,.12)}
.seg-btn:focus-visible{outline-offset:-3px}
.seg-wide{display:flex}
.seg-wide .seg-btn{flex:1 1 0}
.row{display:flex;flex-wrap:wrap;gap:8px 12px;align-items:center}
.fine{margin-top:8px;font-size:15px;line-height:1.6;color:var(--text-3)}
.field-label{margin:0 0 8px;font-size:15px;font-weight:700}
select{min-height:44px;padding:0 10px;border:1px solid var(--line);border-radius:var(--r-control);background:var(--bg);color:var(--text);font:700 15px/1.3 var(--font)}
input[type="checkbox"]{width:20px;height:20px;accent-color:var(--primary);flex:none;margin:0}

/* ---------- 상단 메뉴 ---------- */
.nav{position:sticky;top:0;z-index:var(--z-nav);background:var(--bg);border-bottom:1px solid var(--line)}
.nav-inner{height:var(--nav-h);display:flex;align-items:center;gap:32px}
.brand{display:inline-flex;align-items:center;gap:8px;min-height:44px;color:var(--text);text-decoration:none;font-weight:800;font-size:22px;letter-spacing:-.02em}
.brand svg{width:24px;height:24px;flex:none}
.nav-links{display:flex;gap:6px;margin-left:auto}
.nav-links a{display:inline-flex;align-items:center;justify-content:center;min-height:40px;min-width:44px;color:var(--text-2);text-decoration:none;font-size:15px;font-weight:700;padding:0 14px;border-radius:var(--r-pill)}
.nav-links a:hover{color:var(--text);background:var(--bg-alt)}
.nav-links a[aria-current="page"]{color:var(--accent);background:var(--accent-soft);font-weight:800}
.nav-cta{min-height:44px}
/* 휴대폰: 메뉴를 로고 아래 한 줄로 (위에 붙이지 않음) */
@media (max-width:767px){.nav{position:relative}.nav-inner{height:auto;flex-wrap:wrap;gap:0 16px;padding-top:8px}.brand{min-height:44px}.nav-cta{display:none}.nav-links{order:3;width:100%;margin-left:0;gap:20px;overflow-x:auto;scrollbar-width:none}.nav-links a{white-space:nowrap;font-size:15px}}

/* ---------- 히어로 ---------- */
.hero{padding:64px 0 96px}
.hero-grid{display:grid;grid-template-columns:5fr 7fr;gap:48px;align-items:center}
.lead{margin-top:24px;max-width:31em;color:var(--text-2)}
.hero-actions{display:flex;flex-wrap:wrap;gap:12px;margin-top:32px}
.hero-note{margin-top:24px;font-size:15px;color:var(--text-3)}
.post{margin:0;width:100%;background:var(--bg);border:1px solid var(--line);border-radius:var(--r-card);box-shadow:var(--shadow-card);overflow:hidden}
.post-head{display:flex;align-items:center;gap:10px;padding:12px 16px;border-bottom:1px solid var(--line)}
.post-avatar{width:28px;height:28px;border-radius:50%;background:var(--line)}
.post-bar{width:96px;height:10px;border-radius:var(--r-pill);background:var(--line)}
.photo{position:relative;aspect-ratio:4/3;overflow:hidden;background:var(--bg-alt)}
.photo canvas{display:block;width:100%;height:100%}
.post-alert{display:grid;grid-template-columns:56px 1fr auto;gap:12px 16px;align-items:center;padding:16px;border-top:1px solid var(--line);opacity:0;transform:translateY(8px);transition:opacity var(--motion-base) var(--ease),transform var(--motion-base) var(--ease)}
.post-alert.on{opacity:1;transform:none}
.alert-text{display:grid;gap:2px;font-size:15px;line-height:1.5}
.alert-text strong{font-size:16px}
@media (max-width:1023px){.hero-grid{grid-template-columns:1fr}}
@media (max-width:767px){.hero{padding:40px 0 64px}.hero-actions .btn{flex:1 1 100%}.post-alert{grid-template-columns:48px 1fr}.post-alert .btn{grid-column:1/-1}}

/* ---------- 사진 위 단서 상자 ---------- */
.boxes{position:absolute;inset:0}
.box{position:absolute;border:3.5px solid var(--c,var(--lv0));border-radius:var(--r-box);box-shadow:0 0 0 2px #FFFFFF,inset 0 0 0 1.5px #FFFFFF;opacity:0;transform:scale(.96);pointer-events:none;transition:opacity var(--motion-base) var(--ease),transform var(--motion-base) var(--ease),border-color var(--motion-base) var(--ease)}
.box.on{opacity:1;transform:none}
.badge{position:absolute;left:-3px;top:-3px;transform:translate(-35%,-62%);min-width:22px;height:22px;padding:0 6px;border-radius:var(--r-pill);background:var(--cb,var(--c));color:var(--ct,var(--text));font:700 13px/22px var(--font);text-align:center;box-shadow:0 0 0 1.5px var(--bg)}

/* ---------- 범위 고리 ---------- */
.rings{display:block;width:100%;height:auto;overflow:visible}
/* 11/3 팀 요청 "글씨가 너무 안 보이고 핀이 너무 크고 점선 원이 삐뚤빠뚤해": 그림을 248px 실제 크기로 (예전 112px로 줄여 이름표 글씨가 5px쯤).
   예전 이름표 글씨 700 11.5px var(--text-2), 점선 stroke-dasharray 5 5 + 크기 줄이기(scale) */
.rings .guide{fill:none;stroke:var(--line);stroke-width:1.5;vector-effect:non-scaling-stroke}
.rings .focus{fill:var(--lv0-bg);stroke:var(--lv0);stroke-width:2;vector-effect:non-scaling-stroke;transform-box:fill-box;transform-origin:center;transition:transform var(--motion-base) var(--ease),fill var(--motion-base) var(--ease),stroke var(--motion-base) var(--ease)}
.rings.live .focus{transition:fill var(--motion-base) var(--ease),stroke var(--motion-base) var(--ease)}
.rings .before{fill:none;stroke-width:2.5;stroke-linecap:round;opacity:0;transition:opacity var(--motion-fast) var(--ease)}
.rings .tag rect{fill:var(--bg);stroke:#D1D6DB;stroke-width:1;transition:fill var(--motion-fast) var(--ease),stroke var(--motion-fast) var(--ease)}
.rings .tag text{font:800 14px var(--font);letter-spacing:-.01em;fill:var(--text);transition:fill var(--motion-fast) var(--ease)}
.rings .tag.on rect{fill:var(--text);stroke:var(--text)}
.rings .tag.on text{fill:#FFFFFF}
/* 이름표 없는 작은 그림(여러 장, 88px): 핀만 조금 키운다 */
.rings.mini .pin{transform-box:fill-box;transform-origin:center;transform:scale(1.5)}
/* 11/3: 가장 안쪽은 지도 핀 (수준이 '핀'이면 빨갛게) */
.rings .pin-shape{fill:var(--bg);stroke:var(--text-3);stroke-width:2;stroke-linejoin:round;vector-effect:non-scaling-stroke;transition:fill var(--motion-base) var(--ease),stroke var(--motion-base) var(--ease)}
.rings .pin-hole{fill:var(--text-3);transition:fill var(--motion-base) var(--ease)}
.rings.at-pin .pin-shape{fill:var(--lv4);stroke:var(--lv4-ink)}
.rings.at-pin .pin-hole{fill:#FFFFFF}

/* ---------- 문제: 좁혀지는 범위 ---------- */
.story{background:var(--bg-alt)}
.story-intro{max-width:680px}
.story-intro p{margin-top:24px;color:var(--text-2)}
.story-intro sup a{display:inline-block;min-width:24px;padding:4px 6px;margin:-4px -4px -4px -2px;text-align:center;font-size:13px;text-decoration:none;font-weight:700}
.story-stage{display:grid;grid-template-columns:minmax(0,7fr) minmax(260px,5fr);gap:48px;align-items:center;margin-top:48px}
.frame{border-radius:var(--r-card);border:1px solid var(--line);box-shadow:var(--shadow-card);background:var(--bg)}
.story-side{display:grid;gap:24px;align-content:center}
.story-rings{display:flex;flex-wrap:wrap;gap:16px 24px;align-items:center}   /* 11/3: 예전 160px 그림 + 글 두 칸 */
#storyRings{flex:none;width:248px;max-width:100%;margin-inline:auto}
.story-rings .rings-note{flex:1 1 220px;min-width:0}
.rings-note{font-size:15px;color:var(--text-3);line-height:1.6}
.story-steps{list-style:none;margin:0;padding:0;display:grid;gap:8px}
.story-step{border-left:3px solid var(--line);padding:8px 0 8px 16px;opacity:.55;transition:border-color var(--motion-base) var(--ease),opacity var(--motion-base) var(--ease)}
.story-step.is-done{opacity:.8}
.story-step.is-active{opacity:1;border-color:var(--c)}
.story-step button{display:flex;align-items:center;gap:10px;min-height:44px;padding:0;border:0;background:none;color:var(--text);font:700 17px/1.4 var(--font);text-align:left;cursor:pointer}
.story-step p{margin-top:4px;font-size:15px;color:var(--text-2)}
.story.is-static .story-step{opacity:1}
@media (max-width:959px){.story-stage{grid-template-columns:1fr;gap:32px}}

/* ---------- 원리: 평면 4단계 ---------- */
.how-steps{list-style:none;margin:48px 0 0;padding:0;display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:32px}
.how-step{position:relative}
.how-step+.how-step::before{content:"";position:absolute;left:-26px;top:calc(37.5% - 1px);width:20px;height:1.5px;background:var(--text-3)}
.how-step+.how-step::after{content:"";position:absolute;left:-12px;top:calc(37.5% - 4px);width:6px;height:6px;border-top:1.5px solid var(--text-3);border-right:1.5px solid var(--text-3);transform:rotate(45deg)}
.how-pic{position:relative;aspect-ratio:4/3;border-radius:var(--r-card);border:1px solid var(--line);overflow:hidden;background:var(--bg-alt)}
.how-pic canvas{display:block;width:100%;height:100%}
.how-cap{margin-top:8px;font-size:14px;line-height:1.5;color:var(--text-3)}
.how-step h3{display:flex;align-items:center;gap:8px;margin-top:16px}
.how-no{width:28px;height:28px;border-radius:9px;background:var(--accent-soft);color:var(--accent);display:grid;place-items:center;font:800 14px/1 var(--font);flex:none}
.how-step p{margin-top:8px;font-size:15px;line-height:1.6;color:var(--text-2)}
.how-step p strong{color:var(--text);font-weight:700}
@media (max-width:959px){
  .how-steps{grid-template-columns:repeat(2,minmax(0,1fr))}
  .how-step::before,.how-step::after{display:none}
}
@media (max-width:767px){.how-steps{grid-template-columns:1fr;gap:40px}}

/* ---------- 점검 도구 ---------- */
.tool{background:var(--bg-alt)}
.tool-card{background:var(--bg);border:1px solid var(--line);border-radius:var(--r-card);box-shadow:var(--shadow-card);padding:32px}
.tool-head{display:grid;gap:24px}
.tool-head p{margin-top:12px;max-width:680px;color:var(--text-2)}
.tabs{display:flex;gap:24px;border-bottom:1px solid var(--line)}
.tab{display:inline-flex;align-items:center;gap:8px;min-height:50px;padding:0 2px;margin-bottom:-1px;border:0;border-bottom:3px solid transparent;background:none;color:var(--text-3);font:700 17px/1.2 var(--font);cursor:pointer}
.tab:hover{color:var(--text)}
.tab[aria-selected="true"]{color:var(--text);font-weight:800;border-bottom-color:var(--accent)}
.tab:focus-visible{outline-offset:2px}
.count{min-width:22px;height:22px;padding:0 6px;border-radius:var(--r-pill);background:var(--bg-alt);color:var(--text-2);font-size:13px;line-height:22px;text-align:center}
.workbench{display:grid;grid-template-columns:minmax(0,7fr) minmax(0,5fr);gap:32px;align-items:start;margin-top:32px}
.bench-view{position:sticky;top:calc(var(--nav-h) + 16px)}
.view-bar{display:flex;flex-wrap:wrap;justify-content:space-between;align-items:center;gap:8px;margin-bottom:12px}
.view-frame{position:relative;aspect-ratio:4/3;border-radius:var(--r-card);overflow:hidden;background:var(--bg-alt);border:1px solid var(--line);width:min(100%, calc((100vh - var(--nav-h) - 170px) * var(--ar, 1.3333)));margin-inline:auto}   /* 11/3: 세로 사진도 스크롤 없이 한 화면에 */
.view-frame canvas{display:block;width:100%;height:100%}
.overlay{position:absolute;inset:0}
.overlay.drawing{cursor:crosshair;touch-action:none;box-shadow:inset 0 0 0 3px var(--accent)}
.tbox{pointer-events:auto;cursor:grab;background:transparent;padding:0;font:inherit;color:inherit;touch-action:none;box-sizing:content-box;margin:-3.5px}   /* 11/3: 테두리는 상자 바깥에 (글자를 가리지 않게) */
.tbox.moving{cursor:grabbing;background:rgba(255,255,255,.25)}
/* 꼭짓점 손잡이 (11/3, 예전 오른쪽 아래 크기 손잡이 .grip 대신): 끌면 그 꼭짓점만 움직인다. 마우스면 상자에 올렸을 때만 보인다 */
.tbox .corner{position:absolute;width:14px;height:14px;margin:-7px 0 0 -7px;border-radius:50%;background:#fff;border:3px solid var(--c,var(--lv0));box-sizing:border-box;cursor:crosshair;box-shadow:0 0 0 1px rgba(0,0,0,.35);z-index:2;transition:opacity .12s ease}
.tbox .corner::after{content:'';position:absolute;inset:-11px;border-radius:50%}
.tbox .badge{transform:translate(-55%,-118%);z-index:3}   /* 왼쪽 위 꼭짓점 손잡이를 가리지 않게 조금 더 위로 */
.tbox.k-both .corner{border-color:var(--lvid)}
.tbox .corner{opacity:0;pointer-events:none}   /* 손잡이는 고른(포커스된) 상자에만: 작은 상자가 많을 때 점투성이가 되지 않게 */
.tbox:focus .corner,.tbox.moving .corner{opacity:1;pointer-events:auto}
@media (hover:hover) and (pointer:fine){
  .tbox:hover .corner{opacity:1;pointer-events:auto}
}
.save-row .btn{flex:1 1 0;min-width:0;padding-inline:12px}   /* 11/3: 저장 칸 버튼 3개를 한 줄에 */
.tbox:hover{background:rgba(255,255,255,.2)}
.tbox:focus-visible{outline-offset:2px}
.tbox.is-hidden{border-style:dashed;background:repeating-linear-gradient(135deg,rgba(255,255,255,.66) 0 6px,rgba(255,255,255,.2) 6px 12px)}
.overlay.drawing .tbox{pointer-events:none}
.draft{position:absolute;border:2px dashed var(--accent);background:rgba(255,255,255,.25);pointer-events:none}
.draft.band{border:1.5px dashed var(--accent);background:rgba(25,31,40,.06)}   /* 11/3: 빈 곳 끌어서 여러 상자 고르기 */
.bulk{display:flex;flex-wrap:wrap;align-items:center;gap:6px 8px;margin:4px 0 10px}
.bulk .check{margin:0 6px 0 0}
.bulk-count{margin-left:auto;font-size:14px;color:var(--text-3)}
/* 11/4 팀 "이 부분의 디자인이 너무 별로냐 뭔가 너무 정신사나워": 고르기 글자 버튼 둘을 작은 알약 버튼으로 (글자는 그대로) */
.bulk .link-btn{min-height:32px;min-width:0;padding:0 12px;border:1px solid var(--line);border-radius:var(--r-pill);background:var(--bg);color:var(--text-2);font-size:14px}
.bulk .link-btn:hover:not(:disabled){text-decoration:none;border-color:var(--text-3);color:var(--text)}
/* 지우개: 흰색 + 강조 파랑 두 색 (단색 경계는 그림용이라 괜찮음) */
.eraser{position:absolute;left:0;top:0;width:54px;height:28px;border-radius:7px;border:2px solid var(--text);background:linear-gradient(90deg,var(--bg) 0 44%,var(--accent) 44% 100%);box-shadow:var(--shadow-card);opacity:0;pointer-events:none;transition:opacity var(--motion-fast) var(--ease)}
.view-hint{margin-top:12px;font-size:15px;color:var(--text-3)}
.legend{display:flex;flex-wrap:wrap;gap:8px;margin:12px 0 0;padding:0;list-style:none}
/* 11/3: 상자 색 = 종류 (위치 빨강, 개인 정보 초록, 둘 다면 빨간 선 양옆에 초록) */
.legend.kinds{gap:6px 16px;font-size:15px;color:var(--text-2)}
.legend.kinds li{display:inline-flex;align-items:center;gap:6px}
.kind-mark{display:inline-block;width:18px;height:12px;border-radius:3px;border:3px solid #E5484D}
.kind-mark.k-per{border-color:var(--lvid)}
.kind-mark.k-both{box-shadow:0 0 0 2px var(--lvid),inset 0 0 0 2px var(--lvid)}
.tbox.k-both{box-shadow:0 0 0 3px var(--lvid),inset 0 0 0 3px var(--lvid)}
.tbox.k-both .badge,.clue.k-both .clue-no{background:linear-gradient(90deg,#B42318 50%,#11743C 50%);color:#FFFFFF}
.bench-side{display:grid;gap:16px}
.step{background:var(--bg);border:1px solid var(--line);border-radius:var(--r-card);padding:24px}
.step>h3,.step-head>h3{display:flex;align-items:center;gap:10px;margin-bottom:16px;font-size:19px;font-weight:800}
.step-head{display:flex;align-items:center;justify-content:space-between;gap:12px;margin-bottom:16px}   /* 11/3: 제목 오른쪽 '다시 분석' */
.step-head>h3{margin-bottom:0}
.step-no{width:28px;height:28px;border-radius:9px;background:var(--accent-soft);color:var(--accent);display:grid;place-items:center;font:800 14px/1 var(--font);flex:none}   /* 예전 검은 동그라미 */
.dropzone{display:grid;justify-items:center;align-content:center;gap:6px;width:100%;min-height:148px;padding:20px;border:2px dashed #C9D6EA;border-radius:16px;background:#F8FBFF;color:var(--text);font:inherit;text-align:center;cursor:pointer;transition:border-color var(--motion-fast) var(--ease),background-color var(--motion-fast) var(--ease)}
.dropzone:hover{border-color:var(--accent);background:var(--accent-soft)}
.dropzone svg{color:var(--accent)}
.dz-main{font-size:17px;font-weight:800}
.dz-sub{font-size:14px;line-height:1.5;color:var(--text-3)}
#demoBtn{margin-top:8px}
.dropping .dropzone,.dropping .shots{border-color:var(--accent);background:var(--accent-soft)}
.dropping .dropzone{border-style:solid}
.dropping .view-frame{outline:3px solid var(--accent);outline-offset:4px}
.exif{margin:16px 0 0;display:grid}
.exif div{display:flex;justify-content:space-between;gap:12px;padding:8px 0;border-bottom:1px solid var(--line);font-size:15px}
.exif dt{color:var(--text-2)}
.exif dd{margin:0;font-weight:700;text-align:right}
.exif .warn{background:var(--lv3-bg);color:var(--lv3-ink);padding:0 8px;border-radius:6px}
.clues{list-style:none;margin:12px 0 0;padding:0;border-top:1px solid var(--line)}
/* 11/4 팀 "너무 정신사나워": 한 줄에 번호 · 이름 · 칩 하나 · 지우기만. 이름 고르기 상자는 테두리 없이(올리거나 누를 때만 보임),
   같은 설명은 처음 한 번만, 삭제는 줄에 올리거나 고를 때만 보이는 ✕. 예전: 테두리 상자 + 칩 둘 + 빨간 '삭제' 글자, 위아래 16px */
.clue{display:grid;grid-template-columns:24px minmax(0,1fr) auto;gap:0 12px;align-items:start;padding:10px 0;border-bottom:1px solid var(--line-soft)}
.clue-no{width:24px;height:24px;align-self:start;margin-top:10px;border-radius:50%;background:var(--cb,var(--c));color:var(--ct,var(--text));font:700 13px/24px var(--font);text-align:center}
select.clue-label{appearance:none;-webkit-appearance:none;min-height:44px;margin-left:-8px;padding:0 26px 0 8px;border:1px solid transparent;border-radius:10px;background:transparent url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='12' viewBox='0 0 12 12'%3E%3Cpath d='M3 4.5l3 3 3-3' fill='none' stroke='%23404955' stroke-width='1.6' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E") no-repeat right 8px center;font:700 16px/1.3 var(--font);color:var(--text);cursor:pointer;text-overflow:ellipsis;field-sizing:content;max-width:100%}   /* field-sizing: 고른 이름 길이만큼만 (긴 이름 목록 때문에 칩이 멀리 밀리지 않게) */
select.clue-label:hover,select.clue-label:focus-visible{border-color:var(--line);background-color:var(--bg-alt)}
.chip-id{margin-left:4px;color:var(--lvid-ink)}
.chip-id::before{content:"·";margin-right:4px;color:var(--text-3)}
.clue-del{display:inline-grid;place-items:center;width:44px;height:44px;margin-right:-10px;border:0;border-radius:10px;background:none;color:var(--text-3);cursor:pointer;opacity:0;transition:opacity var(--motion-fast) var(--ease),color var(--motion-fast) var(--ease)}
.clue:hover .clue-del,.clue:focus-within .clue-del{opacity:1}
.clue-del:hover{color:var(--danger);background:var(--bg-alt)}
.clue-del:focus-visible{opacity:1}
@media (hover:none){.clue-del{opacity:.6}}
/* 좁은 화면: 지우기 아래에 ✕ (이름 칸을 넓게), 이름은 15px */
@media (max-width:520px){
  .clue{gap:0 8px}
  .clue-actions{flex-direction:column;align-items:flex-end;gap:0}
  .clue-del{margin:-8px -10px -6px 0}
  select.clue-label{font-size:15px;padding-right:22px;background-position:right 6px center}
}
.clue.is-hidden .clue-main{opacity:.8}   /* 11/3 3판: 지울 단서도 읽히게 (예전 .55) */
.clue-top{display:flex;flex-wrap:wrap;align-items:center;gap:2px 6px}
.clue-label{max-width:100%;font-weight:700}
.clue-note{margin:-2px 0 4px;font-size:14px;line-height:1.5;color:var(--text-3)}   /* 11/4: 예전 15px · --text-2 */
.clue-text{display:inline-block;margin-top:6px;padding:2px 8px;border-radius:6px;background:var(--bg-alt);font-size:14px}
.clue-actions{display:flex;align-items:center;gap:2px;align-self:start;padding-top:0}   /* 11/4: 예전 위아래 두 줄 */
.hide-toggle,.check{display:inline-flex;align-items:center;gap:8px;font-size:15px;cursor:pointer}
.hide-toggle{font-weight:700;white-space:nowrap;min-height:44px}
.check{margin-top:16px;color:var(--text-2)}
.empty{margin-top:12px;padding:16px;border-radius:var(--r-card);border:1px dashed var(--line);font-size:15px;color:var(--text-2)}
.notice{padding:12px 16px;border-radius:var(--r-card);background:var(--bg-alt);border:1px solid var(--line);font-size:15px;line-height:1.6;color:var(--text)}
.notice.err{color:var(--danger);font-weight:700}
.notice.busy{display:flex;align-items:center;gap:10px}
.notice[hidden]{display:none}
.ai-box{background:var(--bg);border:1px solid var(--line);border-radius:var(--r-card);padding:0 24px}
.ai-box summary{display:flex;align-items:center;gap:10px;min-height:56px;font-size:16px;font-weight:700;cursor:pointer;list-style:none}
.ai-box summary::-webkit-details-marker{display:none}
.ai-box summary::after{content:"";margin-left:8px;width:8px;height:8px;border-right:1.5px solid var(--text-2);border-bottom:1.5px solid var(--text-2);transform:rotate(45deg) translateY(-2px);transition:transform var(--motion-fast) var(--ease)}
.ai-box[open] summary::after{transform:rotate(-135deg) translateY(-2px)}
.ai-dot{width:8px;height:8px;border-radius:50%;background:var(--lv0);flex:none}
.ai-dot.on{background:var(--ok)}
.ai-dot.err{background:var(--danger)}
.ai-pill{margin-left:auto;font-size:14px;font-weight:700;color:var(--text-3)}
.ai-body{display:grid;gap:12px;padding-bottom:20px}
.ai-status{margin:0;font-size:15px;line-height:1.6;color:var(--text)}
.ai-status.err{color:var(--danger)}
.ai-note{font-size:14px;line-height:1.5;color:var(--text-3)}
.ai-links{display:flex;flex-wrap:wrap;gap:4px 16px}
#bundleStatus{margin-top:16px;padding:12px 16px;border-radius:var(--r-card);background:var(--bg-alt);border:1px solid var(--line);font-size:15px}
#bundleStatus.err{color:var(--danger);font-weight:700}
/* 11/3: 고리 그림이 248px라 칸이 좁으면 그림을 가운데 위에, 글은 그 아래로 (예전 112px 그림 + 글 두 칸 나란히) */
.risk{display:flex;flex-wrap:wrap;gap:16px 24px;align-items:center}
#toolRings{flex:none;width:248px;max-width:100%;margin-inline:auto}
.risk-body{flex:1 1 240px;min-width:0}
.risk-sentence{margin-top:8px;font-weight:800;line-height:1.5}
.reasons{margin:16px 0 0;padding-left:20px;display:grid;gap:6px;font-size:15px;color:var(--text-2)}
.identity{margin-top:12px;padding:10px 12px;border-radius:var(--r-control);background:var(--lvid-bg);color:var(--lvid-ink);font-size:15px}
/* 11/4 밤 팀 "사이즈가 너무 큰거같아 조금만 줄이면": 15px → 13px → 12px(팀이 8px 대신 12px를 고름: 읽을 수 있는 가장 작은 크기),
   위 여백 16 → 12px, 선 위아래 12 → 10px (예전 값: margin-top 16px, padding-top 12px, 15px) */
.caution{margin-top:12px;padding-top:10px;border-top:1px solid var(--line);font-size:12px;line-height:1.5;color:var(--text-3)}
/* 11/4 저녁: 지우기 칸을 한 덩어리로 (추천 설명 → 어떻게 지울까요 → 지우기 버튼 → AI 상태 한 줄).
   예전(11/4 낮): '① 무엇을 / ② 어떻게' 두 덩어리(.sub-block, 사이에 선) */
.erase-row{margin-top:16px}
.ai-edit{display:flex;flex-wrap:wrap;align-items:center;gap:0 10px;margin-top:8px}
.ai-edit .fine{display:inline-flex;align-items:center;gap:8px;margin:0}
.ai-edit .link-btn{min-height:40px;font-size:14px}
.ai-edit[hidden],.ai-edit .link-btn[hidden]{display:none}
.plan{margin-top:16px;padding:12px 16px;border-radius:var(--r-card);background:var(--accent-soft);font-size:15px;line-height:1.7}
.plan:empty{display:none}
.plan .calc{color:var(--text-2);font-size:14px}
p.fine:empty{display:none}   /* 11/3 문장 정리: 비운 안내 줄은 자리도 차지하지 않게 */
@media (max-width:1023px){.workbench{grid-template-columns:1fr}.bench-view{position:static}}
@media (max-width:767px){.tool-card{padding:20px}.step{padding:20px}.dropzone{min-height:120px}}

/* ---------- 여러 장 점검 ---------- */
.bundle-head{display:grid;gap:16px;margin-top:32px}
.bundle-head p{max-width:680px;color:var(--text-2)}
.bundle-drop{margin-top:20px;min-height:132px}
.bundle-drop:disabled{cursor:progress;opacity:.6}
#bundleBody{display:grid;grid-template-columns:minmax(0,7fr) minmax(0,5fr);gap:32px;align-items:start;margin-top:24px}
#bundleBody[hidden]{display:none}
.shots{list-style:none;margin:0;padding:0;display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:16px;border-radius:var(--r-card)}
.shot{display:flex;flex-direction:column;background:var(--bg);border:1px solid var(--line);border-radius:var(--r-card);box-shadow:var(--shadow-card);overflow:hidden;transition:opacity var(--motion-base) var(--ease)}
.shot.is-dropped{opacity:.55}
.shot-photo{position:relative;aspect-ratio:4/3;background:var(--bg-alt)}
.shot-photo canvas{display:block;width:100%;height:100%;object-fit:contain}
.shot.is-dropped .shot-photo::after{content:"빼고 올려요";position:absolute;right:10px;bottom:10px;padding:5px 10px;border-radius:var(--r-pill);background:var(--primary);color:var(--bg);font:700 13px/1.2 var(--font)}
.shot-body{display:grid;gap:10px;padding:16px}
.shot-top{display:flex;flex-wrap:wrap;align-items:center;gap:6px 8px}
.shot-title{font-weight:700}
.shot-alone{display:inline-flex;align-items:center;gap:6px;font-size:14px;color:var(--text-2)}
.shot-state{font-size:14px;color:var(--text-3)}
.shot-state.err{color:var(--danger);font-weight:700}
.shot-clues{list-style:none;margin:0;padding:0;display:grid;gap:8px;font-size:15px}
.shot-clues label,.shot-opts label{display:flex;align-items:center;gap:8px;cursor:pointer;min-height:28px}
.mini-no{width:18px;height:18px;border-radius:50%;background:var(--c);color:var(--text);font:700 10.5px/18px var(--font);text-align:center;flex:none}
.shot-none{font-size:15px;color:var(--text-3)}
.shot-opts{display:flex;flex-wrap:wrap;align-items:center;gap:6px 16px;padding-top:10px;border-top:1px solid var(--line);font-size:15px}
.ba{display:grid;gap:16px;position:sticky;top:calc(var(--nav-h) + 16px)}
.ba>div{background:var(--bg);border:1px solid var(--line);border-radius:var(--r-card);padding:20px}
.ba h3{font-size:17px;margin-bottom:12px}
.ba-now-row{display:grid;grid-template-columns:88px minmax(0,1fr);gap:16px;align-items:center}
.ba-level{display:grid;gap:6px;font-weight:700;line-height:1.5}
.loo{width:100%;border-collapse:collapse;font-size:15px}
.loo th{padding:8px 6px;border-bottom:1px solid var(--line);text-align:left;font-size:14px;font-weight:700;color:var(--text-2)}
.loo td{padding:10px 6px;border-bottom:1px solid var(--line)}
.loo td:nth-child(n+2),.loo th:nth-child(n+2){white-space:nowrap}
.loo tr.ok td{background:var(--accent-soft)}
.loo .naive{display:block;font-size:13px;color:var(--text-3)}
.mark{display:inline-flex;align-items:center;gap:4px;font-weight:700;color:var(--accent)}
.mark::before{content:"";width:10px;height:5px;border-left:2px solid currentColor;border-bottom:2px solid currentColor;transform:rotate(-45deg) translateY(-2px)}
#bPlan ol{margin:0 0 8px;padding-left:20px;display:grid;gap:4px;font-size:15px}
#bPlan p{font-size:15px}
#bApply{margin-top:12px}
@media (max-width:1023px){#bundleBody{grid-template-columns:1fr}.ba{position:static}}
@media (max-width:767px){.shots{grid-template-columns:1fr}}

/* ---------- 약속 · 규칙 ---------- */
.promise-grid{display:grid;grid-template-columns:minmax(0,4fr) minmax(0,8fr);gap:48px;align-items:start}
.promise-lead{margin-top:16px;color:var(--text-2);max-width:22em}
.promise-list{margin:0;padding:0;list-style:none;counter-reset:pr;border-top:1px solid var(--line)}
.promise-list li{counter-increment:pr;position:relative;padding:20px 0 20px 44px;border-bottom:1px solid var(--line)}
.promise-list li::before{content:counter(pr);position:absolute;left:0;top:22px;width:28px;height:28px;border-radius:9px;background:var(--accent-soft);display:grid;place-items:center;font:800 14px/1 var(--font);color:var(--accent)}
.promise-list h3{font-size:18px;font-weight:800}
.promise-list p{margin-top:4px;color:var(--text-2);font-size:16px}
.rules{margin-top:32px;padding:0 20px;border:1px solid var(--line);border-radius:var(--r-card);background:var(--bg)}
.rules summary{display:flex;align-items:center;min-height:52px;font-weight:700;cursor:pointer}
.rules h4{margin:20px 0 8px;font-size:16px}
.rules table{width:100%;border-collapse:collapse;font-size:15px}
.rules th,.rules td{padding:10px 8px;border-top:1px solid var(--line);text-align:left;vertical-align:top}
.rules th{font-weight:700;color:var(--text-2)}
.rules td:nth-child(2){white-space:nowrap}   /* 11/3: '알기 어려움'이 두 줄로 갈라지지 않게 */
.rules ul{margin:0 0 20px;padding-left:20px;display:grid;gap:4px;font-size:15px;color:var(--text-2)}
.sources{margin-top:32px;font-size:14px;color:var(--text-3)}
.sources a{color:inherit}
@media (max-width:959px){.promise-grid{grid-template-columns:1fr;gap:32px}}

/* ---------- 마지막 안내 · 바닥글 ---------- */
.cta{background:var(--bg-alt);border-top:1px solid var(--line);padding:96px 0}
.cta-inner{display:flex;flex-wrap:wrap;justify-content:space-between;align-items:flex-end;gap:32px}
.cta-line{font-weight:800;font-size:32px;line-height:1.35;letter-spacing:-.02em}
.foot{background:var(--bg-alt);border-top:1px solid var(--line);padding:32px 0 48px;font-size:14px;line-height:1.5;color:var(--text-3)}
.foot p+p{margin-top:4px}
@media (max-width:767px){.cta{padding:64px 0}.cta-line{font-size:24px}.cta .btn{width:100%}}

/* ---------- 알림 · 동의 창 ---------- */
.toast{position:fixed;left:50%;bottom:24px;z-index:var(--z-toast);max-width:calc(100% - 32px);padding:13px 20px;border-radius:16px;background:var(--text);color:var(--bg);font-size:15px;font-weight:700;box-shadow:var(--shadow-float);opacity:0;transform:translate(-50%,16px);pointer-events:none;transition:opacity var(--motion-fast) var(--ease),transform var(--motion-fast) var(--ease)}
.toast.on{opacity:1;transform:translate(-50%,0)}
.modal{position:fixed;inset:0;z-index:var(--z-modal);display:none;place-items:center;padding:20px;background:rgba(25,31,40,.4)}
.modal.on{display:grid}
.modal-card{width:100%;max-width:480px;max-height:calc(100vh - 40px);overflow:auto;padding:28px;border-radius:var(--r-card);background:var(--bg);box-shadow:var(--shadow-float)}
.consent-card p{margin-top:12px;color:var(--text-2);font-size:16px}
.consent-card .row{margin-top:24px}
@media (max-width:767px){.consent-card .btn{width:100%}}

/* ---------- 분석 중 진행 막대 (사진 맨 위 가장자리에만) ---------- */
.progress{position:absolute;left:0;right:0;top:0;height:3px;overflow:hidden;pointer-events:none}
.progress[hidden]{display:none}
.progress::before{content:"";position:absolute;top:0;bottom:0;left:0;width:30%;background:var(--accent);animation:progress calc(var(--motion-slow) * 2) var(--ease) infinite}
@keyframes progress{from{transform:translateX(-100%)}to{transform:translateX(340%)}}

/* ---------- 움직임 줄이기: 완성된 상태로 ---------- */
@media (prefers-reduced-motion: reduce){
  html{scroll-behavior:auto}
  *,*::before,*::after{transition-duration:.01ms!important;animation-duration:.01ms!important;animation-iteration-count:1!important}
  .progress::before{animation:none;width:100%;opacity:.5}
}

/* 좁은 화면: 지우는 방식 4개는 2×2로 */
/* 지우는 방식 5개: 위 3칸, 아래 2칸 (선은 1px 간격으로) */
#methodSeg{display:grid;grid-template-columns:repeat(2,1fr);gap:4px;background:var(--seg-bg)}   /* 11/3: 여섯 칸 → 두 칸 */
#methodSeg .seg-btn{border-left:0;padding:0 8px}

/* 첫 화면: 점검 도구가 바로 보이게 */
.tool-main{padding-top:40px}
.tool-intro{margin-bottom:24px}
.tool-intro p{margin-top:8px;max-width:720px;color:var(--text-2)}
.tool-intro .fine{margin-top:4px}
.tool-main .tool-head{display:block}
@media (max-width:767px){.tool-main{padding-top:24px}}
/* 더 알아보기: 다른 페이지로 가는 글자 링크 줄 */
.more{border-top:1px solid var(--line);padding:32px 0 48px}
.more-inner{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:0}
.more-link{display:grid;gap:4px;min-height:44px;padding:12px 16px 12px 0;color:var(--text);text-decoration:none;border-left:0}
.more-link+.more-link{padding-left:16px;border-left:1px solid var(--line)}
.more-k{font-weight:800;font-size:16px}
.more-k::after{content:" →";color:var(--text-3)}
.more-d{font-size:15px;color:var(--text-2)}
.more-link:hover .more-k{text-decoration:underline;text-underline-offset:3px}
@media (max-width:767px){.more-inner{grid-template-columns:1fr}.more-link+.more-link{padding-left:0;border-left:0;border-top:1px solid var(--line)}}

/* 실험 모드(?lab=1)에서만 보이는 칸 */
.lab-tag{display:inline-block;margin-left:6px;padding:2px 8px;border-radius:var(--r-pill);background:var(--bg-alt);color:var(--text-2);font-size:13px;font-weight:700;vertical-align:middle}
.lab-fields{display:grid;grid-template-columns:1fr 1fr;gap:12px;margin:12px 0}
.lab-field{display:grid;gap:6px;font-size:15px;color:var(--text-2)}
.lab-field input{min-height:44px;padding:0 12px;border:1px solid var(--line);border-radius:var(--r-control);background:var(--bg);color:var(--text);font:700 15px/1.3 var(--font)}
.lab-field input:focus-visible{border-color:var(--accent)}
@media (max-width:440px){.lab-fields{grid-template-columns:1fr}}
/* 붙일 로고 고르기 */
.sticker-pick{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:8px}   /* 11/3: 로고 다섯 → 넷 */
.sticker-btn{display:flex;flex-direction:column;align-items:center;gap:2px;min-height:44px;padding:6px 4px 8px;border:1px solid var(--line);border-radius:var(--r-control);background:var(--bg);color:var(--text-2);font:700 14px/1.2 var(--font);cursor:pointer;transition:background-color var(--motion-fast) var(--ease),border-color var(--motion-fast) var(--ease)}
.sticker-btn canvas{width:100%;max-width:84px;height:auto}
.sticker-btn:hover{background:var(--bg-alt);color:var(--text)}
.sticker-btn[aria-checked="true"]{border-color:var(--accent);background:var(--accent-soft);color:var(--text);box-shadow:inset 0 0 0 1px var(--accent)}
/* AI 채우기 표시 (TASK 6단계 3번) */
.ai-badge{position:absolute;right:10px;bottom:10px;margin:0;padding:4px 10px;border-radius:999px;background:rgba(25,31,40,.78);color:#fff;font:700 14px/1.4 var(--font);pointer-events:none}
.ai-badge[hidden]{display:none}
/* 비스듬한 상자 (11/3): 감싸는 상자 테두리는 감추고 안쪽 네모만 그린다 */
.tbox.quad,.tbox.quad.k-both{border-color:transparent;box-shadow:none;border-radius:0}
.tbox.quad.k-both .q-out{stroke:var(--lvid);stroke-width:10}
.tbox.quad:hover,.tbox.quad.moving,.tbox.quad.is-hidden{background:transparent}
.qsvg{position:absolute;inset:0;width:100%;height:100%;overflow:visible;pointer-events:none}
.qsvg polygon{vector-effect:non-scaling-stroke;stroke-linejoin:round}
.qsvg .q-out{fill:none;stroke:#FFFFFF;stroke-width:6.5}
.qsvg .q-in{fill:transparent;stroke:var(--c,var(--lv0));stroke-width:3.5}
.tbox.quad:hover .q-in,.tbox.quad.moving .q-in{fill:rgba(255,255,255,.22)}
.tbox.quad.is-hidden .q-in{stroke-dasharray:9 6;fill:rgba(255,255,255,.5)}

/* =========================================================
   11/3 디자인 2판: 로고 · 안심 줄 · 카드 다듬기 (3판에서 입체·형광펜·파랑을 뺐다)
   ========================================================= */
/* 로고 (11/3 3판, 팀 요청 "입체감 맘에 안 들어, 그림자 때문에 글씨가 잘 안 보여"): 그림자·두께·들뜸을 모두 빼고
   검정 타일 아이콘 + 검정 아주 굵은 글자. 2판은 파란 타일 + 흰 1px·진한 파랑 3px 겹그림자 글자였다 */
/* 11/3 3판 고침 (팀: "입체는 빼라고 한 적 없어, 예쁘게"): 흰 글자 + 검정 테두리 + 검정 돌출(오른쪽 아래 3px)의 '스티커 글자'.
   번진 그림자가 아니라 글자에 붙은 단색 두께라 글자 모양이 또렷하다. 아이콘 타일도 아래로 3px 두께.
   (2판의 파란 겹그림자는 진한 파랑이 글자와 섞여 흐려 보였다) */
.brand{gap:12px;font-size:30px;letter-spacing:-.01em}
.brand-mark{display:grid;place-items:center;width:34px;height:34px;border-radius:10px;background:var(--text);color:#FFFFFF;box-shadow:0 3px 0 #4E5968;transform:translateY(-1.5px);flex:none}
.brand-mark svg{width:22px;height:22px;--bg:var(--text)}
.brand-mark svg path:last-child{stroke:#FFFFFF;opacity:.6}
.brand-word{color:#FFFFFF;font-weight:800;line-height:1;-webkit-text-stroke:4px var(--text);paint-order:stroke fill;   /* 테두리 4px(바깥으로 2px 보임). 팀: "아웃라인이 너무 연해" (처음 2px) */
  text-shadow:1px 1px 0 var(--text),2px 2px 0 var(--text),3px 3px 0 var(--text),3.5px 3.5px 0 var(--text);transform:translateY(-1.5px)}
.brand:hover .brand-word{color:#EEF0F3}
@media (max-width:767px){.brand{font-size:25px;gap:10px}.brand-mark{width:30px;height:30px;border-radius:9px}.brand-mark svg{width:20px;height:20px}
  .brand-word{-webkit-text-stroke-width:3.4px;text-shadow:1px 1px 0 var(--text),2px 2px 0 var(--text),3px 3px 0 var(--text)}}   /* 처음 1.8px */
/* 안심 줄: 사이트가 지키는 것 세 가지 */
.trust{display:flex;flex-wrap:wrap;gap:8px;margin:16px 0 0;padding:0;list-style:none}
.trust li{display:inline-flex;align-items:center;gap:7px;min-height:36px;padding:6px 14px 6px 10px;border-radius:var(--r-pill);background:var(--bg);border:1px solid var(--line);font-size:15px;font-weight:700;line-height:1.4;color:var(--text-2)}
.trust svg{width:18px;height:18px;flex:none;color:var(--accent)}
/* 도구 카드와 단계 카드 */
.tool-card{border-color:var(--line-soft);border-radius:24px;box-shadow:0 2px 8px rgba(16,24,40,.05),0 1px 2px rgba(16,24,40,.04)}
.step{border-radius:18px;border-color:var(--line-soft)}
.notice{border-radius:14px}
.plan{border-radius:14px}
.modal-card{border-radius:22px}
.view-frame{border-radius:18px}
.tool-intro h1{font-size:40px}
@media (max-width:767px){.tool-intro h1{font-size:28px}.trust li{font-size:14px}}

/* =========================================================
   11/10 디자인 4판 (본선): 크림 · 잉크 블랙 · 번트 오렌지
   팀 요청: "이 디자인(dontboardme.com)을 그대로 하는 게 아니라 이런 느낌이 우리 사이트에 녹아들게,
   cream · ink black · burnt orange 세 가지 색을 메인으로, 편안하면서도 강렬한 인상".
   가져온 느낌: 크림 바탕 + 잉크 글자 + 강한 한 색의 주 버튼, 알약 모양 버튼, 크고 꽉 찬 제목, 옅은 그림자.
   가져오지 않은 것: 그 사이트의 글꼴(Bayon · Neue Montreal), 세리프 제목, 64px 넘는 거대한 글자, 검은 띠, 많은 색.
   3판 값은 위쪽 원래 줄에 그대로 있고, 여기서 덮어쓴다.
   ========================================================= */
body,.nav{background:var(--page)}
.tool,.story{background:var(--page)}   /* 3판: --bg-alt */
/* 버튼: 알약 모양 (3판 모서리 12px), 주 버튼은 오렌지 바탕 + 따뜻한 흰 글자 (3판 검정 + 아래 안쪽 그림자) */
.btn{border-radius:var(--r-pill)}
.btn-primary{color:var(--on-primary);box-shadow:none}
.btn-quiet:hover:not(:disabled),.btn-ghost:hover:not(:disabled){border-color:var(--line-strong)}   /* 3판 #C9DBFA */
/* 다른 페이지 메뉴의 '사진 점검하기': 잉크 알약, 올리면 오렌지 (3판: 흰 바탕 + 회색 테두리) */
.nav-cta{background:var(--text);border-color:var(--text);color:var(--bg)}
.nav-cta:hover:not(:disabled){background:var(--primary);border-color:var(--primary);color:var(--on-primary)}
/* 글자 버튼은 잉크 글자, 올리면 오렌지 밑줄 (오렌지 글자가 빨간 '삭제'·'동의 취소'와 헷갈리지 않게) */
.link-btn{color:var(--text)}
.link-btn:hover:not(:disabled){text-decoration-color:var(--accent);text-decoration-thickness:2px}
.link-danger{color:var(--danger)}
/* 글 속 링크와 작은 주황 글자는 진한 주황 (쨍한 주황은 작은 글자로 읽기 어려워서) */
a,.mark{color:var(--tint-ink)}
.skip,.shot.is-dropped .shot-photo::after{color:var(--on-primary)}
/* 분할 버튼: 알약, 고른 칸은 잉크 바탕 + 크림 글자 (3판: 흰 바탕 + 검은 글자 + 그림자, 모서리 14px / 10px) */
.seg,#methodSeg{border-radius:var(--r-pill)}
.seg-btn{border-radius:var(--r-pill)}
.seg-btn[aria-pressed="true"],.seg-btn[aria-checked="true"]{background:var(--text);color:var(--bg);box-shadow:none}
.seg-btn[aria-pressed="true"]:hover,.seg-btn[aria-checked="true"]:hover{background:var(--text);color:var(--bg)}
/* 메뉴: 지금 페이지는 연한 오렌지 바탕 + 오렌지 글자 (3판: 연한 회색 + 검정) */
.nav-links a[aria-current="page"]{color:var(--tint-ink);background:var(--tint)}
/* 단계 번호: 잉크 네모 + 크림 숫자 (3판: 연한 회색 네모 + 검은 숫자) */
.step-no,.how-no,.promise-list li::before{background:var(--text);color:var(--bg)}
/* 로고: 주황 타일 + 잉크 그림 + 잉크 두께, 글자는 따뜻한 흰색 (3판: 검정 타일 + 흰 그림 + 회색 #4E5968 두께, 흰 글자.
   11/10 첫 값은 번트 오렌지 타일 + 흰 그림: 쨍한 주황 위 흰 그림은 흐려서 잉크로) */
.brand-mark{background:var(--primary);color:var(--text);box-shadow:0 3px 0 var(--text)}
.brand-mark svg{--bg:var(--primary)}
.brand-mark svg path:last-child{stroke:var(--text);opacity:.55}
.brand-word{color:var(--bg)}
.brand:hover .brand-word{color:var(--tint)}   /* 3판 #EEF0F3 */
/* 제목: 더 크고 꽉 차게 (3판: 첫 화면 40px, 다른 페이지 42px, 마지막 안내 32px, 자간 -.02em, 줄간격 1.3) */
h1,.tool-intro h1{font-size:54px;line-height:1.18;letter-spacing:-.035em}
.cta-line{font-size:44px;line-height:1.25;letter-spacing:-.035em}
.hl{color:var(--accent)}   /* 제목 속 한 낱말만 오렌지 (문장은 그대로, 글자 대비 4.6:1) */
@media (max-width:767px){h1,.tool-intro h1{font-size:34px}.cta-line{font-size:28px}}   /* 3판 모바일 28 · 30 · 24px */
/* 카드와 틀: 따뜻한 흰 바탕 + 잉크 색 옅은 그림자 (3판 그림자 rgba(16,24,40,…)) */
.tool-card{box-shadow:var(--shadow-card)}
.step{box-shadow:0 1px 2px rgba(29,26,22,.04)}
/* 사진 넣는 칸: 크림 + 따뜻한 점선, 올리거나 끌어다 놓으면 연한 오렌지 (3판 #F8FBFF · #C9D6EA) */
.dropzone{border-color:var(--line-strong);background:var(--page)}
.dropzone:hover,.dropping .dropzone,.dropping .shots{border-color:var(--accent);background:var(--tint)}
/* 그 밖의 차가운 회색을 따뜻한 잉크로 (3판 값: rgba(25,31,40,.4) · #D1D6DB · #FFFFFF · rgba(25,31,40,.78) · rgba(25,31,40,.06)) */
.modal{background:rgba(29,26,22,.45)}
.rings .tag rect{stroke:var(--line-strong)}
.rings .tag.on text{fill:var(--bg)}
.ai-badge{background:rgba(29,26,22,.8)}
.draft.band{background:rgba(29,26,22,.06)}
select.clue-label{background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='12' viewBox='0 0 12 12'%3E%3Cpath d='M3 4.5l3 3 3-3' fill='none' stroke='%234A4338' stroke-width='1.6' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E")}

/* =========================================================
   11/11 디자인 5판 (본선): 흰 바탕 · 맑은 잉크 · 청록 · 민트 + 참고 사이트 모양
   팀 요청 1: 참고 사이트(relevovinco.com)의 디자인 요소를 쓰기. 가져온 것: 6px 모서리, 1px 점선 구분선,
   눌리는 듯한 입체 버튼(위는 밝게, 아래는 어둡게, 누르면 안으로 들어감).
   팀 요청 2: "우리가 청결해지는 사이트 이런 느낌이니깐 흰색 배경에 민트? 파랑? 청록?": 참고 사이트의 모래색·갈색 대신
   흰 바탕, 주 버튼 청록, 보조 버튼과 띠는 민트.
   가져오지 않은 것: 그 사이트의 글꼴(Gabarito · Instrument Sans, 영어 전용이라 한글에 안 맞고 내려받아야 함),
   64px 넘는 거대한 글자, 그라데이션, 흔들리는 움직임, box-shadow 애니메이션(움직임은 transform만).
   4판 값은 위쪽 줄에 그대로 있고, 여기서 덮어쓴다.
   ========================================================= */
/* 버튼: 6px 모서리 + 입체 (4판: 알약, 그림자 없음, 누르면 scale(.98)) */
.btn{border-radius:var(--r-control)}
.btn-primary{box-shadow:var(--shadow-btn)}
.btn-quiet,.btn-ghost{background:var(--soft-btn);border-color:transparent;color:var(--text);box-shadow:var(--shadow-btn-soft)}   /* 4판: 따뜻한 흰 바탕 + 선 */
.btn-quiet:hover:not(:disabled),.btn-ghost:hover:not(:disabled){background:var(--soft-btn-hover);border-color:transparent}
.btn-quiet[aria-pressed="true"]{background:var(--soft-btn-hover);border-color:var(--accent);box-shadow:var(--shadow-btn-in)}
.btn:hover:not(:disabled){transform:translateY(-1px)}
.btn:active:not(:disabled){transform:translateY(1px);box-shadow:var(--shadow-btn-in)}
.btn:disabled,.btn[aria-disabled="true"]{box-shadow:none}
/* 다른 페이지 메뉴의 '사진 점검하기': 청록 주 버튼과 같게 (4판: 잉크 알약, 올리면 주황) */
.nav-cta{background:var(--primary);border-color:transparent;color:var(--on-primary);box-shadow:var(--shadow-btn)}
.nav-cta:hover:not(:disabled){background:var(--primary-hover);border-color:transparent;color:var(--on-primary)}
/* 분할 버튼·메뉴·입력칸: 알약 → 6px (분할 버튼 바깥 8px) */
.seg,#methodSeg{border-radius:8px}
.seg-btn,.nav-links a,select.clue-label,.clue-del{border-radius:var(--r-control)}
/* 카드와 틀: 4판 뒤쪽에서 따로 정한 24 · 18 · 14 · 22 · 16px를 카드 모서리 하나로 */
.tool-card,.step,.notice,.plan,.modal-card,.view-frame,.dropzone,.toast{border-radius:var(--r-card)}
.step-no,.how-no,.promise-list li::before{border-radius:var(--r-control)}   /* 4판 9px */
/* 점선 구분선: 약속 목록에만 (팀: "쓸데없는 점선들이 너무 많아").
   나머지는 원래의 옅은 1px 실선으로 돌아간다. 처음 5판은 메뉴 아래, 탭 아래, 숨은 정보·단서·규칙 줄 사이, 주의 문구, 여러 장 사진 칸,
   더 알아보기, 마지막 안내 띠, 바닥글에도 점선을 썼다:
   .nav · .tabs · .exif div · .clue · .loo th/td{border-bottom:1px dashed} / .clues · .rules th/td · .caution · .shot-opts · .more · .cta · .foot{border-top:1px dashed}
   / .more-link+.more-link{border-left:1px dashed} */
.promise-list li{border-bottom:1px dashed var(--line-dash)}
.promise-list{border-top:1px dashed var(--line-dash)}
/* 로고: 청록 타일 + 흰 그림 + 잉크 두께 (4판: 주황 타일 + 잉크 그림) */
.brand-mark{color:#FFFFFF}
.brand-mark svg path:last-child{stroke:#FFFFFF;opacity:.6}
/* 사진 넣는 칸: 연한 민트 + 점선 (4판: 크림) */
.dropzone{background:var(--bg-alt)}
/* 그 밖의 따뜻한 잉크를 맑은 잉크로 (4판 rgba(29,26,22,…) · 화살표 #4A4338) */
.modal{background:rgba(19,37,43,.45)}
.ai-badge{background:rgba(19,37,43,.8)}
.draft.band{background:rgba(19,37,43,.06)}
.step{box-shadow:0 1px 2px rgba(19,37,43,.04)}
select.clue-label{background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='12' viewBox='0 0 12 12'%3E%3Cpath d='M3 4.5l3 3 3-3' fill='none' stroke='%234A5C62' stroke-width='1.6' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E")}

/* ---------- 11/11 오후 5판 다시: 참고 사이트의 모양을 더 닮게 ----------
   팀: "색 말고 디자인적 요소들도 내가 보내준 사이트처럼 만들어줄 수 있어?"
   참고 사이트에서 가져온 것: 모든 상자·사진 틀·작은 이름표 6px, 글자색(잉크) 1px 점선, 빛이 왼쪽 위에서 오는 입체감
   (버튼은 튀어나오고, 입력칸·분할 버튼 바탕·사진 넣는 칸은 파임), 버튼 좌우 여백 26px, 입력칸 여백 14 · 16px,
   큰 설명 글씨(그 사이트 본문 21px → 우리 첫 설명 20px), 링크 밑줄이 왼쪽에서 그어지는 움직임(0.25초, transform으로).
   가져오지 않은 것: 64px 넘는 거대한 제목(CLAUDE.md 규칙), 그라데이션, 흔들리는 첫 화면 그림, 영어 글꼴. */
/* 작은 이름표도 6px (첫 5판: 알약) */
.chip,.count,.lab-tag,.trust li,.ai-badge,.bulk .link-btn,.shot.is-dropped .shot-photo::after{border-radius:var(--r-control)}
.how-pic,.post,.frame,.shot,.ba>div,.rules,.ai-box,.empty,#bundleStatus,.identity,.clue-text{border-radius:var(--r-card)}
/* 버튼 좌우 여백 26px (첫 5판 22px). 작은 버튼과 저장 칸 버튼은 그대로 */
.btn:where(:not(.btn-sm,.btn-xs)){padding:0 26px}
/* 파인 것: 분할 버튼 바탕, 입력칸, 사진 넣는 칸 */
.seg,#methodSeg{box-shadow:var(--shadow-carve)}
.seg-btn[aria-pressed="true"],.seg-btn[aria-checked="true"]{box-shadow:var(--shadow-small)}
select:not(.clue-label),.lab-field input{box-shadow:var(--shadow-carve)}
select:not(.clue-label){padding:0 14px}
.lab-field input{padding:14px 16px}
.dropzone{box-shadow:var(--shadow-carve)}
/* 붙일 로고 타일: 작게 튀어나왔다가, 고르면 파임 */
.sticker-btn{box-shadow:var(--shadow-small);transition:background-color var(--motion-fast) var(--ease),border-color var(--motion-fast) var(--ease),transform var(--motion-fast) var(--ease)}
.sticker-btn:hover{transform:translateY(-1px)}
.sticker-btn[aria-checked="true"]{box-shadow:inset 0 0 0 1px var(--accent),var(--shadow-carve);transform:none}
/* 첫 설명 글씨 크게 (17px → 20px, 휴대폰 17px) */
h1+p,.tool-intro h1+p,.promise-lead{font-size:20px;line-height:1.6}
@media (max-width:767px){h1+p,.tool-intro h1+p,.promise-lead{font-size:17px}}
/* 더 알아보기 링크: 밑줄이 왼쪽에서 그어지고 화살표가 살짝 나아감 (첫 5판: 올리면 바로 밑줄) */
.more-link:hover .more-k{text-decoration:none}
.more-k{position:relative;align-self:start;justify-self:start}
.more-k::before{content:"";position:absolute;left:0;right:0;bottom:-2px;height:2px;background:currentColor;transform:scaleX(0);transform-origin:left;transition:transform 250ms var(--ease)}
.more-k::after{content:"→";display:inline-block;margin-left:.3em;transition:transform 250ms var(--ease)}
.more-link:hover .more-k::before,.more-link:focus-visible .more-k::before{transform:scaleX(1)}
.more-link:hover .more-k::after,.more-link:focus-visible .more-k::after{transform:translateX(4px)}
/* 로고 두께도 오른쪽 아래로 (첫 5판: 아래로 3px) */
.brand-mark{box-shadow:2px 3px 0 var(--text)}

/* ---------- 11/11 첫 화면 정리 ----------
   팀: "이게 열자마자 이렇게 큰 공간을 차지하면서까지 있을 이유는 없는 거 같아. 공유하기 전에 위치부터 지워요는 쓱싹 메인 로고 오른쪽에 적고,
   사진을 왼쪽에 두고, 그 오른쪽에 있는 것들이 너무 스크롤을 많이 해야 돼서 정신이 사나운 거 같아".
   ① 첫 화면 제목(h1)을 메뉴의 로고 오른쪽으로 (예전: 도구 위 54px 제목 + 소개 문장 + 약속 알약, 높이 약 160px)
   ② 소개 문장과 약속 알약은 사진 아래로 (문장은 그대로)
   ③ 오른쪽 1~4단계는 제목을 눌러 펴고 접는다. 한 번에 하나만 펴지고, 접혀도 단서 개수와 위험 수준 칩이 제목 줄에 보인다 (steps.js).
      예전에는 다섯 단계가 모두 펴져 있어서 오른쪽 높이가 약 2,900px였다 */
.nav .nav-title{margin:0;font-size:20px;line-height:1.3;letter-spacing:-.02em;font-weight:800;color:var(--text);white-space:nowrap}
.nav-inner:has(.nav-title){gap:24px}
@media (max-width:1199px){.nav .nav-title{font-size:17px}}
@media (max-width:1023px){
  .nav-inner:has(.nav-title){height:auto;flex-wrap:wrap;gap:0 16px;padding-top:8px}
  .nav-inner:has(.nav-title) .nav-links{order:3;width:100%;margin-left:0}
  /* 메뉴가 두 줄(약 93px)이 되므로 안쪽 링크로 갈 때 제목이 메뉴 밑에 숨지 않게 */
  html:has(.nav-title){scroll-padding-top:calc(var(--nav-h) + 40px)}
}
@media (max-width:767px){.nav .nav-title{font-size:16px;white-space:normal;flex:1 1 0;min-width:0}}
/* 11/11 제목 글꼴 (팀: "공유하기 전에, 위치부터 지워요 이거 폰트도 너무 이상해"): 비교 그림 A~D 중 C '부제처럼 조용하게'.
   가장 굵게(800) 20px · 자간 -0.02em · 잉크색 → 굵게(700) 18px · 자간 0 · 진한 회색 + 로고와 사이에 세로선. 글꼴은 같은 나눔스퀘어라운드.
   (예전: 20px / 1199px 이하 17px / 휴대폰 16px, 모두 800) */
.nav .nav-title{font-weight:700;font-size:18px;letter-spacing:0;color:var(--text-2);padding-left:24px;border-left:1px solid var(--line-strong)}
@media (max-width:1199px){.nav .nav-title{font-size:17px;padding-left:20px}}
@media (max-width:767px){.nav .nav-title{font-size:15px;padding-left:12px}}
.tool-main{padding-top:24px}
@media (max-width:767px){.tool-main{padding-top:16px}}
/* 사진 아래 소개 문장과 약속 알약 */
.tool-about{margin-top:20px;padding-top:16px;border-top:1px solid var(--line)}
.tool-lead{font-size:15px;line-height:1.6;color:var(--text-2)}
.tool-about .trust{margin-top:10px;gap:6px}
.tool-about .trust li{min-height:32px;padding:4px 12px 4px 8px;font-size:14px}
/* 단계 접기 */
.step-head>h3{flex:1 1 auto;min-width:0}
.step-toggle{display:flex;align-items:center;gap:10px;width:100%;min-height:44px;margin:-6px 0;padding:0;border:0;border-radius:var(--r-control);background:none;color:inherit;font:inherit;letter-spacing:inherit;text-align:left;cursor:pointer}
.step-toggle::after{content:"";flex:none;margin-left:auto;margin-right:4px;width:9px;height:9px;border-right:2px solid var(--text-2);border-bottom:2px solid var(--text-2);transform:translateY(-3px) rotate(45deg);transition:transform var(--motion-fast) var(--ease)}
.step-toggle[aria-expanded="true"]::after{transform:translateY(2px) rotate(-135deg)}
.step-toggle:hover{color:var(--tint-ink)}
.step-sum:empty,.step-sum[hidden]{display:none}
[data-fold="2"] .step-sum{min-width:26px;height:24px;padding:0 8px;border-radius:var(--r-control);background:var(--bg-alt);color:var(--text-2);font-size:14px;line-height:24px;text-align:center}
.step.is-closed{padding-top:14px;padding-bottom:14px}
.step.is-closed>h3,.step.is-closed .step-head{margin-bottom:0}
.step-body[hidden]{display:none}
/* 1 사진 칸을 조금 낮게 (사진 넣는 칸 148 → 112px, 숨은 정보 줄 위아래 8 → 6px) */
.bench-side .dropzone{min-height:112px;padding:16px}
.bench-side .exif div{padding:6px 0}

/* ---------- 11/11 탭 위 여백 줄이기 · 로고 그림 ----------
   팀: "이쪽이 여백이 너무 많아 전체적으로 위로 좀만 올려도 될 거 같아"
   메뉴 아래 → 탭 글자까지 약 73px → 약 45px. (예전: 도구 위 24px, 카드 위 안쪽 32px, 탭 높이 50px, 탭 아래 32px) */
.tool-main{padding-top:16px}
.tool-main .tool-card{padding-top:12px}
.tool-main .tab{min-height:44px}
.tool-main .workbench{margin-top:20px}
@media (max-width:767px){.tool-main{padding-top:12px}.tool-main .tool-card{padding-top:8px}.tool-main .workbench{margin-top:16px}}
/* 팀: "메인 쓱싹 글씨를 이걸로 바꿔주라" → 메뉴의 '쓱싹' 글자 대신 팀이 준 로고 그림 (public/logo-ssukssak.png).
   이어서 "메인 로고는 저것만 있게 해주라, 그리고 굳이 파란 배경이 없어도 돼" → 왼쪽 로고 타일을 빼고, 그림의 파란 바탕(#0153E2)을 지운 뒤
   흰 바탕에서도 보이게 파란 테두리(--primary) + 오른쪽 아래 잉크 돌출(--text)을 둘렀다 (비교 그림 A~E 중 D). 306×146, 높이 48px(휴대폰 40px).
   (바로 전: 파란 바탕 그대로 289×132, 높이 40px · 휴대폰 34px, 모서리 6px + 잉크 그림자 2px 3px, 옆에 34px 로고 타일) */
.brand-logo{display:block;flex:none;height:48px;width:auto}
@media (max-width:767px){.brand-logo{height:40px}}
/* 11/11 팀: "로고가 너무 ai같아 좀만 더 자연스럽게, 그리고 막 겹쳐지는 픽셀이 있는거같아 또렷하지가 않어"
   → 위 PNG(.brand-logo) 대신 같은 구성(흰 글자 + 파란 테두리 + 잉크 돌출, 왼쪽 아래 연필, 오른쪽 위 지우개)을 사이트 글꼴과 단색 도형으로 다시 그린 SVG.
   빗금 선, 반짝이는 지우개, 휙 지나가는 흰 줄은 작은 크기에서 픽셀이 겹쳐 보여서 뺐다. 비교 그림 A(지금 PNG) · B(이것) · C(파란 글자) 중 B.
   .brand svg{24px} 규칙보다 세게 하려고 .brand .brand-svg.
   11/11 팀 "이런 귀여운 로고가 하나 어딘가에 들어갔으면 좋겠어" → 오른쪽 위 지우개를 쓱싹이(지우개 스티커와 같은 얼굴 + 노란 반짝이 둘)로 (예전: 얼굴 없는 지우개 + 움직임 줄 둘) */
/* 11/11 팀 "아니 로고에 붙이라는게 아니라, 그냥 로고 옆에 귀엽게 배치해달라는거였어, 로고는 내가 아까 보내준 사진 느낌을 유지하고"
   → 위 SVG(.brand-svg, 예전 규칙: 높이 48px · 휴대폰 40px, 가로세로 262:100)를 뺐다. 로고는 /logo.svg: 받은 그림에서 글자 모양을 그대로 딴 파란 글자 + 연필 · 지우개.
     그림으로 넣어서 위 .brand-logo 규칙(높이 48px · 휴대폰 40px)을 다시 쓴다. 가로세로 1654:744.
   → 쓱싹이 /ssukssagi.svg는 로고 옆에 따로 (.brand-buddy). 로고보다 작게, 살짝 위로 올려 로고 글자 옆에서 내다보는 자리 */
.brand .brand-buddy{display:block;flex:none;height:34px;width:auto;margin-left:-6px;align-self:flex-start;margin-top:2px}
@media (max-width:767px){.brand .brand-buddy{height:28px;margin-left:-4px;margin-top:4px}
  .nav .nav-title{text-wrap:balance}}   /* 쓱싹이가 들어가며 휴대폰에서 제목이 두 줄이 돼서, '지워요'만 혼자 내려가지 않게 두 줄 길이를 맞춘다 */

/* ---------- 11/14 버튼: 평소엔 모두 하늘색, 마우스를 올리면 파랑 ----------
   팀: "사이트에서 저장, AI바로 고치기 처럼 이미 파란색이 있는데, 원래는 다른것들처럼 하늘색이다가, 버튼에 마우스를 갔다대면 그게 파란색으로 바뀌게 해주라"
   이어서 팀: "아니 그리고 저장이랑 그 버튼만 파란색으로 바뀌면 어떡해 모든 복사나, 다시검사 이런거에 가갔다대도 바뀌게 해줘야지"
   평소: 주 버튼(.btn-primary)과 다른 페이지 메뉴의 '사진 점검하기'(.nav-cta)도 보조 버튼과 같은 하늘색 --soft-btn + 잉크 글자 (12.7:1) + --shadow-btn-soft.
   모든 버튼(.btn: 저장 · 복사 · 다시 검사 · 놓친 단서 직접 표시 등)은 올리거나 키보드로 고르면 파랑 --primary + 흰 글자 (4.6:1) + --shadow-btn,
   누르면 진한 파랑 --primary-hover (5.6:1) + --shadow-btn-in.
   예전(11/11 5판): 주 버튼은 늘 파랑 + 흰 글자(올리면 --primary-hover), 보조 버튼은 하늘색(올리면 조금 진한 하늘색 --soft-btn-hover).
   11/14 첫 값: 주 버튼만 올리면 파랑이었다. 분할 버튼(단서 보기 · 지운 결과)과 글자 버튼(다시 분석, 예시 사진으로 해 보기)은 그대로. */
.btn-primary,.nav-cta{background:var(--soft-btn);border-color:transparent;color:var(--text);box-shadow:var(--shadow-btn-soft)}
.btn:hover:not(:disabled),.btn:focus-visible{background:var(--primary);border-color:transparent;color:var(--on-primary);box-shadow:var(--shadow-btn)}
.btn:active:not(:disabled){background:var(--primary-hover);border-color:transparent;color:var(--on-primary);box-shadow:var(--shadow-btn-in)}
.btn-primary:disabled,.btn-primary[aria-disabled="true"]{box-shadow:none}

/* ---------- 11/14 휴대폰 · 태블릿(1023px 이하, 한 줄로 쌓일 때): 사진 아래 안내 · 색 안내 · 소개 문장 · 약속 알약은 맨 아래로 ----------
   팀: "이게 폰으로 들어가면 비율이 좀 이상해져서 비율좀 맞게 수정해주고, 내가 보낸 사진이 맨 아래쪽에서 나오게 해주라, 노트북에서는 아래쪽에 나와서 안 거슬리는데, 폰으로 보면 우리가 사진 붙여넣는 곳 위에 이게 떠서 불편핟러고"
   PC는 예전처럼 사진 바로 아래. HTML 순서는 그대로 두고, 쌓일 때만 .bench-view를 풀어서(display: contents) 보이는 순서(order)만 바꾼다.
   옮기는 것들에는 누르는 것이 없어서 Tab 순서는 그대로다.
   예전 순서: 사진 → 안내 · 색 안내 · 소개 문장 · 약속 알약 → 1 사진(넣는 칸) … 5 저장 · AI 연결 정보.
   새 순서: 사진 → 1 사진(넣는 칸) … 5 저장 · AI 연결 정보 → 안내 · 색 안내 · 소개 문장 · 약속 알약.
   휴대폰(767px 이하)에서는 약속 알약 셋의 폭이 제각각이라 셋 다 한 줄 꽉 차게 맞춘다 (예전: 글자 길이만큼). */
@media (max-width:1023px){
  .workbench{display:flex;flex-direction:column;align-items:stretch;gap:0}
  .bench-view{display:contents}
  .bench-side{order:1;margin-top:24px}
  .bench-view>.view-hint,.bench-view>.legend,.bench-view>.tool-about{order:2}
  .bench-view>.view-hint{margin-top:28px}
}
@media (max-width:767px){
  .tool-about .trust li{flex:1 1 100%}
}