/* 코디 디렉터 공용 스타일 (2026-10 새 디자인: 금융·헬스케어 앱처럼 차분하고 정돈된 느낌). 기능별 스타일은 static/css/<기능>.css 에 둔다(이 파일은 공용). 인라인 style 은 CSP 가 막는다. 차례: 1 글꼴·색 토큰 2 바탕·글자 3 아이콘·로고 4 앱바 5 본문 틀·제목 6 안내 상자 7 버튼 8 칩·보조 탭 9 말풍선·대화 입력 10 카드·목록·상태 격자 11 폼 12 알약·딱지 13 빈 상태·스켈레톤·단계 14 하단 탭 15 토스트 16 표·기타 공용 부품 쓰는 법은 docs 대신 각 절 머리의 주석을 본다. 이전 이름(.btn .btn-primary .btn-quiet .card .notice .field .row .chips .chip .msgs .msg .toast .empty .hub .hub-list .hub-item .tag …)은 그대로 쓰고 모양만 새로 했다. */ /* ───────── 1. 글꼴·색 토큰 ───────── */ @font-face{ font-family:"Pretendard Variable";font-weight:45 920;font-style:normal;font-display:swap; src:url("/static/vendor/pretendard/PretendardVariable.woff2") format("woff2") tech("variations"), url("/static/vendor/pretendard/PretendardVariable.woff2") format("woff2-variations"), url("/static/vendor/pretendard/PretendardVariable.woff2") format("woff2"); } :root{ --bg:#F6F7F9; --surface:#FFFFFF; --border:#E5E8EE; --text:#111827; --text-2:#6B7280; --placeholder:#9CA3AF; --primary:#2457E6; --primary-soft:#EEF3FF; --primary-strong:#1B45BD; --on-primary:#FFFFFF; --success:#15803D; --success-bg:#ECFDF3; --warn:#B45309; --warn-bg:#FFF7E6; --danger:#B91C1C; --danger-bg:#FEF2F2; --info:#0E6E8E; --info-bg:#E8F6FA; --on-success:#FFFFFF; --on-danger:#FFFFFF; /* 성공·오류 색 바탕 위의 글자(어두운 화면에서는 성공·오류 색이 밝아져 검은 글자) */ --toast-bg:#1F2937; --toast-fg:#FFFFFF; --shimmer:rgba(255,255,255,.55); --skeleton:#E5E8EE; --shadow:0 1px 2px rgba(16,24,40,.06); --shadow-md:0 4px 12px rgba(16,24,40,.08); --focus:0 0 0 3px rgba(36,87,230,.22); --r-card:16px; --r-ctl:12px; --r-pill:999px; --s1:4px; --s2:8px; --s3:12px; --s4:16px; --s5:24px; --s6:32px; --navh:60px; --toph:56px; --page-max:680px; --gutter:16px; /* 이전 이름 — 다른 화면의 css 가 아직 쓴다. 새 코드는 위 이름을 쓴다. */ --ground:var(--bg); --ink:var(--text); --muted:var(--text-2); --line:var(--border); --tape:var(--primary); --tape-ink:var(--on-primary); --denim:var(--primary); --denim-ink:var(--on-primary); --ok:var(--success); /* 안내 상자·목록 꺾쇠용 아이콘 (mask 로 그려서 글자색을 따른다. CSP img-src 가 data: 를 허용한다) */ --i-info:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='1.75' stroke-linecap='round' stroke-linejoin='round'%3E%3Ccircle cx='12' cy='12' r='9'/%3E%3Cpath d='M12 11v5M12 8h.01'/%3E%3C/svg%3E"); --i-alert:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='1.75' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M12 3.5 2.8 19.5h18.4z'/%3E%3Cpath d='M12 10v4M12 17.2h.01'/%3E%3C/svg%3E"); --i-check:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Ccircle cx='12' cy='12' r='9'/%3E%3Cpath d='m8.5 12.5 2.5 2.5 4.5-5'/%3E%3C/svg%3E"); --i-lock:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='1.75' stroke-linecap='round' stroke-linejoin='round'%3E%3Crect x='5' y='11' width='14' height='10' rx='2'/%3E%3Cpath d='M8 11V7.5a4 4 0 0 1 8 0V11'/%3E%3C/svg%3E"); --i-chevron:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='1.75' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='m9 6 6 6-6 6'/%3E%3C/svg%3E"); /* 하단 탭·로고용 (base.html 은 를 넣지 않고 이 mask 로 그린다) */ --i-chat:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='1.75' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M4 6.5A2.5 2.5 0 0 1 6.5 4h11A2.5 2.5 0 0 1 20 6.5v8a2.5 2.5 0 0 1-2.5 2.5H9.2L4.8 20.3a.5.5 0 0 1-.8-.4z'/%3E%3C/svg%3E"); --i-camera:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='1.75' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M4 8.5A1.5 1.5 0 0 1 5.5 7H8l1.4-2h5.2L16 7h2.5A1.5 1.5 0 0 1 20 8.5v9a1.5 1.5 0 0 1-1.5 1.5h-13A1.5 1.5 0 0 1 4 17.5z'/%3E%3Ccircle cx='12' cy='13' r='3.5'/%3E%3C/svg%3E"); --i-body:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='1.75' stroke-linecap='round' stroke-linejoin='round'%3E%3Ccircle cx='12' cy='6.5' r='3'/%3E%3Cpath d='M8 21v-5l-2-1 1.5-5A3 3 0 0 1 10.4 8h3.2a3 3 0 0 1 2.9 2l1.5 5-2 1v5'/%3E%3C/svg%3E"); --i-hanger:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='1.75' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M10 5.5a2 2 0 1 1 2 2v2.2'/%3E%3Cpath d='M12 9.7 3.8 15.4a1.4 1.4 0 0 0 .8 2.6h14.8a1.4 1.4 0 0 0 .8-2.6z'/%3E%3C/svg%3E"); --i-more:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='1.75' stroke-linecap='round' stroke-linejoin='round'%3E%3Ccircle cx='5' cy='12' r='1'/%3E%3Ccircle cx='12' cy='12' r='1'/%3E%3Ccircle cx='19' cy='12' r='1'/%3E%3C/svg%3E"); box-sizing:border-box; padding-top:env(safe-area-inset-top,0px); padding-bottom:env(safe-area-inset-bottom,0px); color-scheme:light dark; accent-color:var(--primary); } @media (prefers-color-scheme: dark){ :root:not([data-theme="light"]){ --bg:#0F1420; --surface:#171D2B; --border:#2A3242; --text:#E6E9EF; --text-2:#9AA3B2; --placeholder:#6B7585; --primary:#6B8CFF; --primary-soft:#1C2742; --primary-strong:#8AA4FF; --on-primary:#0B1020; --success:#5CD48C; --success-bg:#13301F; --warn:#F2B35A; --warn-bg:#3A2A12; --danger:#F87171; --danger-bg:#3B1A1A; --info:#5FC3DF; --info-bg:#10303A; --on-success:#0B1020; --on-danger:#0B1020; --toast-bg:#E6E9EF; --toast-fg:#111827; --shimmer:rgba(255,255,255,.08); --skeleton:#2F384B; --shadow:0 1px 2px rgba(0,0,0,.4); --shadow-md:0 4px 12px rgba(0,0,0,.45); --focus:0 0 0 3px rgba(107,140,255,.35); } } :root[data-theme="dark"]{ --bg:#0F1420; --surface:#171D2B; --border:#2A3242; --text:#E6E9EF; --text-2:#9AA3B2; --placeholder:#6B7585; --primary:#6B8CFF; --primary-soft:#1C2742; --primary-strong:#8AA4FF; --on-primary:#0B1020; --success:#5CD48C; --success-bg:#13301F; --warn:#F2B35A; --warn-bg:#3A2A12; --danger:#F87171; --danger-bg:#3B1A1A; --info:#5FC3DF; --info-bg:#10303A; --on-success:#0B1020; --on-danger:#0B1020; --toast-bg:#E6E9EF; --toast-fg:#111827; --shimmer:rgba(255,255,255,.08); --skeleton:#2F384B; --shadow:0 1px 2px rgba(0,0,0,.4); --shadow-md:0 4px 12px rgba(0,0,0,.45); --focus:0 0 0 3px rgba(107,140,255,.35); } :root[data-theme="light"]{color-scheme:light} :root[data-theme="dark"]{color-scheme:dark} /* ───────── 2. 바탕·글자 ───────── */ *,*::before,*::after{box-sizing:inherit} [hidden]{display:none !important} html{background:var(--bg);scroll-padding-top:env(safe-area-inset-top,0px);-webkit-text-size-adjust:100%} body{ margin:0;min-height:100%;background:var(--bg);color:var(--text); font-family:"Pretendard Variable",Pretendard,"Apple SD Gothic Neo","Noto Sans KR",system-ui,sans-serif; font-size:16px;line-height:1.55;word-break:keep-all;overflow-wrap:break-word; -webkit-font-smoothing:antialiased;-moz-osx-font-smoothing:grayscale; } button,input,textarea,select{font:inherit;color:inherit} button{cursor:pointer;-webkit-tap-highlight-color:transparent} a{color:var(--primary)} img{max-width:100%} :focus-visible{outline:2px solid var(--primary);outline-offset:2px} h1{font-size:24px;font-weight:700;line-height:1.3;letter-spacing:-.01em;margin:0 0 8px} h2{font-size:20px;font-weight:700;line-height:1.35;letter-spacing:-.01em;margin:0 0 8px} h3{font-size:17px;font-weight:600;line-height:1.4;margin:0 0 8px} h4{font-size:15px;font-weight:600;line-height:1.4;margin:0 0 6px} p{margin:0 0 12px} .lead{color:var(--text-2);margin:0 0 20px;font-size:15px} .small{font-size:13px} .muted{color:var(--text-2)} .strong{font-weight:600} .center{text-align:center} .eyebrow{display:inline-flex;align-items:center;gap:6px;font-size:13px;font-weight:600;color:var(--primary);margin:0 0 6px;line-height:1.3} /* ───────── 3. 아이콘·로고 ───────── {{ icons.icon('lock') }} → . 크기: .ic-xs 16 · .ic-sm 18 · (기본 24) · .ic-lg 32 {{ icons.icon('camera') }} → 연한 주색 네모 안의 아이콘 (목록·격자·빈 상태 머리용) 변형: .ic-box-ok .ic-box-warn .ic-box-danger .ic-box-info .ic-box-neutral */ .ic{width:24px;height:24px;flex:none;display:inline-block;vertical-align:middle} .ic-xs{width:16px;height:16px}.ic-sm{width:18px;height:18px}.ic-lg{width:32px;height:32px} .ic-box{display:inline-flex;align-items:center;justify-content:center;width:40px;height:40px;border-radius:12px;background:var(--primary-soft);color:var(--primary);flex:none} .ic-box .ic{width:22px;height:22px} .ic-box-ok{background:var(--success-bg);color:var(--success)} .ic-box-warn{background:var(--warn-bg);color:var(--warn)} .ic-box-danger{background:var(--danger-bg);color:var(--danger)} .ic-box-info{background:var(--info-bg);color:var(--info)} .ic-box-neutral{background:var(--bg);color:var(--text-2)} /* 글자색을 따르는 mask 아이콘: (chat camera body hanger more). svg 태그 없이 그린다 */ .ic-mask{display:inline-block;width:24px;height:24px;flex:none;background:currentColor;-webkit-mask:var(--i) center/100% 100% no-repeat;mask:var(--i) center/100% 100% no-repeat} .ic-chat{--i:var(--i-chat)}.ic-camera{--i:var(--i-camera)}.ic-body{--i:var(--i-body)}.ic-hanger{--i:var(--i-hanger)}.ic-more{--i:var(--i-more)} .logo{position:relative;display:inline-flex;align-items:center;justify-content:center;width:30px;height:30px;border-radius:50%;background:var(--primary);flex:none} .logo::before{content:"";width:19px;height:19px;background:#fff;-webkit-mask:var(--i-hanger) center/100% 100% no-repeat;mask:var(--i-hanger) center/100% 100% no-repeat} .logo-lg{width:64px;height:64px} .logo-lg::before{width:38px;height:38px} /* ───────── 4. 앱바 (base.html) ───────── 흰 배경, 아래 1px 선(.tape), sticky. 화면 템플릿에서 {% block appbar_back %} 에 {{ icons.icon('arrow-left') }}, {% block appbar_actions %} 에 을 넣을 수 있다. */ .top{position:sticky;top:env(safe-area-inset-top,0px);z-index:5;background:var(--surface)} .top-row{display:flex;align-items:center;gap:8px;min-height:var(--toph);padding:0 var(--gutter);max-width:var(--page-max);margin:0 auto} .top h1{margin:0;font-size:17px;font-weight:700;letter-spacing:-.01em;line-height:1.2;flex:1;min-width:0;display:flex;align-items:center} .top h1 a{color:inherit;text-decoration:none;display:inline-flex;align-items:center;gap:8px;min-height:40px} .top-back{display:inline-flex;align-items:center;justify-content:center;width:40px;height:40px;margin-left:-8px;border-radius:12px;color:var(--text);text-decoration:none;border:0;background:none} .top-back:hover{background:var(--bg)} .top-actions{display:flex;align-items:center;gap:4px;flex:none} .top-actions .btn{min-height:40px;padding:0 12px} .status{font-size:13px;color:var(--text-2);text-align:right;white-space:nowrap} .status:empty{display:none} .tape{height:1px;background:var(--border)} /* ───────── 5. 본문 틀·제목 ───────── */ main{padding:var(--s4) var(--gutter) calc(var(--navh) + 32px);max-width:var(--page-max);margin:0 auto} main.chat-on{padding-bottom:calc(var(--navh) + 190px)} main.wide{max-width:960px} main.auth{display:flex;flex-direction:column;justify-content:center;min-height:calc(100vh - env(safe-area-inset-top,0px) - env(safe-area-inset-bottom,0px));min-height:calc(100svh - env(safe-area-inset-top,0px) - env(safe-area-inset-bottom,0px));padding:24px var(--gutter) 32px} /* 구역 제목:

저장된 정보

또는

제목

전체 보기
*/ .section-title{display:flex;align-items:center;justify-content:space-between;gap:12px;margin:24px 0 10px;font-size:17px;font-weight:600;line-height:1.4} .section-title > h2,.section-title > h3{margin:0} .section-title:first-child{margin-top:4px} .section-action{font-size:13px;font-weight:600;color:var(--primary);text-decoration:none;margin-left:auto;white-space:nowrap} hr,.divider{border:0;height:1px;background:var(--border);margin:20px 0} .divider-text{display:flex;align-items:center;gap:12px;color:var(--text-2);font-size:13px;margin:20px 0} .divider-text::before,.divider-text::after{content:"";flex:1;height:1px;background:var(--border)} /* ───────── 6. 안내 상자 ─────────
정보
.notice-ok 완료 .notice-warn 주의 .notice-err 오류 .notice-lock : 사진·개인정보 안내용 조용한 정보 상자(자물쇠). 아이콘은 CSS 가 그리므로 마크업에 넣지 않는다. .notice-plain : 아이콘 없음. 안에 제목 을 둘 수 있다. .notice-inline : 바탕·테두리 없이 작은 글과 아이콘만(입력창 밑 한 줄 안내 등). .notice-lock 과 같이 쓸 수 있다. */ .notice{position:relative;display:block;margin:0 0 16px;padding:12px 14px 12px 42px;border:1px solid transparent;border-radius:var(--r-ctl);background:var(--info-bg);color:var(--text);font-size:14px;line-height:1.5} .notice::before{content:"";position:absolute;left:14px;top:12px;width:20px;height:20px;background:var(--info);-webkit-mask:var(--i-info) center/20px 20px no-repeat;mask:var(--i-info) center/20px 20px no-repeat} .notice-ok{background:var(--success-bg)} .notice-ok::before{background:var(--success);-webkit-mask-image:var(--i-check);mask-image:var(--i-check)} .notice-warn{background:var(--warn-bg)} .notice-warn::before{background:var(--warn);-webkit-mask-image:var(--i-alert);mask-image:var(--i-alert)} .notice-err{background:var(--danger-bg);color:var(--danger)} .notice-err::before{background:var(--danger);-webkit-mask-image:var(--i-alert);mask-image:var(--i-alert)} .notice-lock::before{-webkit-mask-image:var(--i-lock);mask-image:var(--i-lock)} .notice-plain{padding-left:14px} .notice-plain::before{display:none} .notice-inline{margin:0;padding:6px 10px 6px 34px;background:transparent;border:0;font-size:12px;line-height:1.4;color:var(--text-2)} .notice-inline::before{left:10px;top:7px;width:18px;height:18px;background:var(--text-2);-webkit-mask-size:18px 18px;mask-size:18px 18px} .notice.small{font-size:13px} .notice p{margin:0 0 6px}.notice p:last-child{margin:0} .notice ul{margin:4px 0 0;padding-left:1.1em} .notice a{color:inherit;font-weight:600} .notice-title{display:block;font-weight:600;margin-bottom:2px} /* ───────── 7. 버튼 ───────── 주 동작 .btn-quiet(=.btn-secondary) 보조 .btn-danger 위험 .btn-link 글자만 .btn-soft 연한 주색 크기: 기본 48px · .btn-sm 40px · .btn-block 가로 꽉 · .btn-icon 아이콘만(정사각). 아이콘: {{ icons.icon('arrow-right') }} 를 안에 넣으면 된다. */ .btn{display:inline-flex;align-items:center;justify-content:center;gap:8px;border:1px solid transparent;border-radius:var(--r-ctl);padding:0 18px;min-height:48px;font-size:15px;font-weight:600;line-height:1.2;text-decoration:none;color:var(--text);background:var(--surface);white-space:nowrap;transition:background-color .15s,border-color .15s,box-shadow .15s,transform .05s;-webkit-tap-highlight-color:transparent} .btn .ic{width:20px;height:20px} .btn-primary{background:var(--primary);color:var(--on-primary);box-shadow:var(--shadow)} .btn-primary:hover{background:var(--primary-strong)} .btn-primary:active{background:var(--primary-strong);transform:translateY(1px)} .btn-quiet,.btn-secondary{background:var(--surface);border-color:var(--border);color:var(--text)} .btn-quiet:hover,.btn-secondary:hover{background:var(--bg)} .btn-soft{background:var(--primary-soft);color:var(--primary)} .btn-soft:hover{border-color:var(--primary)} .btn-danger{background:var(--danger-bg);color:var(--danger)} .btn-danger:hover{border-color:var(--danger)} .btn-link{background:none;color:var(--primary);padding:0 8px;min-height:40px} .btn-link:hover{background:var(--primary-soft)} .btn-sm{min-height:40px;padding:0 14px;font-size:14px;border-radius:10px} .btn-sm .ic{width:18px;height:18px} .btn-icon{width:48px;padding:0} .btn-sm.btn-icon{width:40px} .btn:disabled{opacity:.45;cursor:default;transform:none;box-shadow:none} .btn-block{display:flex;width:100%} .row{display:flex;gap:10px;flex-wrap:wrap;align-items:center} .stack{display:flex;flex-direction:column;gap:12px} .spread{display:flex;justify-content:space-between;align-items:center;gap:10px} .link-btn{background:none;border:0;color:var(--primary);font-weight:600;font-size:14px;padding:10px 0;text-decoration:none;cursor:pointer} .clear{background:none;border:0;color:var(--text-2);font-size:14px;font-weight:600;padding:10px 0;margin-top:14px;cursor:pointer} /* ───────── 8. 칩·보조 탭 ───────── */ .chips{display:flex;gap:8px;overflow-x:auto;padding:2px var(--gutter) 12px;margin:0 calc(-1 * var(--gutter)) 4px;scrollbar-width:none} .chips::-webkit-scrollbar{display:none} .chip{display:inline-flex;align-items:center;gap:6px;flex:none;border:1px solid var(--border);background:var(--surface);color:var(--text);border-radius:var(--r-pill);padding:8px 14px;font-weight:600;font-size:14px;line-height:1.2;white-space:nowrap;text-decoration:none;cursor:pointer} .chip:hover{border-color:var(--text-2)} .chip:disabled{opacity:.4;cursor:default} .chip[aria-current="page"],.chip[aria-pressed="true"]{background:var(--primary-soft);color:var(--primary);border-color:var(--primary)} .subnav{display:flex;gap:4px;overflow-x:auto;margin:0 0 16px;padding:4px;background:var(--surface);border:1px solid var(--border);border-radius:var(--r-ctl);scrollbar-width:none} .subnav::-webkit-scrollbar{display:none} .subnav .chip{flex:1 1 auto;justify-content:center;border-color:transparent;background:transparent;border-radius:9px;padding:9px 12px;color:var(--text-2)} .subnav .chip[aria-current="page"]{background:var(--primary-soft);color:var(--primary)} /* 나눠 고르기(세그먼트):
라디오로 쓸 때:
…
(고른 것은 CSS 가 표시) */ .seg{display:flex;gap:4px;padding:4px;background:var(--bg);border:1px solid var(--border);border-radius:var(--r-ctl)} .seg > button,.seg > a,.seg > label{flex:1 1 0;min-width:0;min-height:40px;border:0;border-radius:9px;background:transparent;color:var(--text-2);font-size:14px;font-weight:600;display:inline-flex;align-items:center;justify-content:center;gap:6px;text-decoration:none;padding:0 8px;white-space:nowrap} .seg > label{position:relative;padding:0 10px;white-space:normal;text-align:center;line-height:1.25;cursor:pointer} .seg > [aria-pressed="true"],.seg > [aria-current="page"],.seg > label:has(input:checked){background:var(--surface);color:var(--text);box-shadow:var(--shadow)} .seg > label:focus-within{box-shadow:var(--focus)} .seg > label > input{position:absolute;inset:0;width:100%;height:100%;margin:0;opacity:0;cursor:pointer} .seg .ic{width:18px;height:18px} /* ───────── 9. 말풍선·대화 입력 ───────── */ .msgs{display:flex;flex-direction:column;gap:10px} .msg{max-width:88%;padding:12px 14px;border-radius:18px;overflow-wrap:anywhere;font-size:15px;line-height:1.55} .msg.user{align-self:flex-end;background:var(--primary);color:var(--on-primary);border-bottom-right-radius:6px;white-space:pre-wrap} .msg.bot{align-self:flex-start;background:var(--surface);border:1px solid var(--border);border-bottom-left-radius:6px;box-shadow:var(--shadow)} .msg p{margin:0 0 8px}.msg p:last-child{margin-bottom:0} .msg ul{margin:0 0 8px;padding-left:1.15em}.msg li{margin-bottom:4px} .msg .mh{font-weight:700} .msg .note{display:block;margin-top:8px;font-size:13px;color:var(--danger)} .msg.user .att{display:block;font-size:13px;opacity:.85;margin-top:4px} .composer{position:fixed;left:0;right:0;bottom:calc(var(--navh) + env(safe-area-inset-bottom,0px));z-index:6;background:var(--surface);border-top:1px solid var(--border);padding:10px var(--gutter)} .composer-in{max-width:var(--page-max);margin:0 auto;display:flex;gap:8px;align-items:flex-end} .composer textarea{flex:1;min-width:0;resize:none;border:1px solid var(--border);border-radius:var(--r-ctl);background:var(--bg);padding:12px 14px;min-height:48px;max-height:120px;line-height:1.45;transition:border-color .15s,box-shadow .15s} .composer textarea:focus{outline:none;border-color:var(--primary);box-shadow:var(--focus);background:var(--surface)} .icon-btn{flex:none;width:48px;height:48px;border-radius:var(--r-ctl);border:1px solid var(--border);background:var(--surface);color:var(--text);font-size:1.25rem;line-height:1;display:inline-flex;align-items:center;justify-content:center} .send{flex:none;height:48px;padding:0 16px} .pending{max-width:var(--page-max);margin:0 auto 8px;display:flex;gap:6px;flex-wrap:wrap} .pending:empty{display:none} /* 사진 미리보기 */ .thumbs{display:grid;grid-template-columns:repeat(4,1fr);gap:8px;margin:12px 0} .thumbs:empty{display:none} .thumb{position:relative;aspect-ratio:3/4;background:var(--bg);border:1px solid var(--border);border-radius:10px;overflow:hidden;display:flex;align-items:center;justify-content:center;font-size:.7rem;color:var(--text-2);text-align:center;padding:4px} .thumb img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;max-width:100%} .thumb button{position:absolute;top:4px;right:4px;width:26px;height:26px;border-radius:50%;border:0;background:rgba(17,24,39,.7);color:#fff;font-size:.9rem;line-height:1} .pending .thumb{width:54px;aspect-ratio:1/1} .angles{margin:0 0 14px;padding-left:1.15em} .angles li{margin-bottom:2px} /* ───────── 10. 카드·목록·상태 격자 ─────────
…
(.card-flat 그림자 없음, .card-soft 연한 주색 바탕) 목록:
{{ icons.icon('user') }}제목설명 …
(.ic-box 는 없어도 된다. 오른쪽 꺾쇠는 CSS 가 그린다. .list / .list-item 은 같은 모양의 새 이름. 1열에 아이콘 상자 대신 다른 것(색 견본·사진 등)을 두려면 class="lead-slot" 을 붙인다) 상태 격자(2×2):