@charset "utf-8"; /* * 운담(undam) — 화면 스타일 일체 * * 원본: scratchpad/undam-design.html (확정 디자인). 색 토큰과 컴포넌트 구조를 그대로 옮겼다. * 옮기면서 바꾼 것은 셋이고, 전부 이식·운영상 필요한 조정이다. * * ⓪ ★ 글꼴은 사이트 기본 폰트를 쓴다 (사용자 결정 2026-09-15). 한자만 예외다. * 원본은 Gothic A1(UI·숫자) · IBM Plex Mono(라벨) · Noto Serif KR(한자) 세 벌이었는데, * 앞의 둘을 걷어냈다. 외부 웹폰트 2벌은 로딩 비용이고 harulogs 의 다른 페이지와 톤이 갈린다. * 방법은 「선언하지 않는 것」이다 — common.css 의 `html[lang=ko] body{font-family:… !important}` * 는 body 에만 걸려 있어 자식은 평범하게 상속한다. 그래서 .udm 에서 font-family 를 지우면 * 로케일별 스택(ko=Pretendard / en=시스템 / ja=Noto Sans JP)이 그대로 따라온다. * ⛔ 한자(.udm-han 과 간지·십성·오행 라벨)만 `Noto Serif KR` 을 유지한다. 취향이 아니라 기능이다 — * Pretendard 계열은 한자 글리프가 부족해 폴백되면 자형이 섞인다. * 모노를 걷어낸 자리(.udm-lbl·수치)는 자간·굵기로 라벨다움을 되살렸고, * 숫자 정렬은 폰트와 무관한 `font-variant-numeric:tabular-nums` 로 유지한다. * * ① 클래스명 전부에 `udm-` 접두사를 붙였다. * 원본은 독립 HTML 이라 `.c` `.p` `.row` `.btn` `.chip` `.tabs` 같은 짧은 이름을 썼는데, * 이 CSS 는 Bootstrap 5 를 쓰는 harulogs 레이아웃 안에서 로드된다. `.row` `.btn` `.p` 는 * Bootstrap 과 정면 충돌한다. 이름만 바꾸고 선언은 그대로다. * * ② 활자 크기를 약 1.2 배로 키웠다. * 원본은 폭 286px 짜리 「폰 목업」 안에 그린 축소 렌더였다. 실제 모바일 본문 폭은 343px 안팎이라 * 343/286 ≈ 1.2 만큼 키워야 목업에서 보이던 비율 그대로 보인다. 비율·간격 관계는 손대지 않았다. * * 다크모드는 `prefers-color-scheme` 이 아니라 harulogs 의 테마 스위치(`[data-bs-theme="dark"]`)에 건다. * harulogs 의 common.js 는 저장값이 없으면 무조건 light 로 시작하므로, OS 설정을 따라가면 * JS 가 light 를 박는 순간 화면이 번쩍인다. 다크 값 자체는 원본 그대로다. */ /* ── 색 토큰 ───────────────────────────────────────────────── */ .udm { --udm-ink:#17171F; --udm-ink2:#42424F; --udm-mute:#767683; --udm-faint:#A3A3AF; --udm-paper:#F6F7FA; --udm-card:#FFFFFF; --udm-sunk:#EEF0F5; --udm-line:#E4E6ED; --udm-line2:#D2D5DF; --udm-indigo:#34517E; --udm-indigo-s:#EAEFF7; --udm-indigo-l:#B6C6DE; /* 오방색 — 오행 데이터에만 쓴다. UI 액센트로 쓰지 말 것 */ --udm-wood:#4A7C59; --udm-fire:#BF554A; --udm-earth:#AE8A4C; --udm-metal:#868A99; --udm-water:#3D6A8F; --udm-gold:#A8813C; --udm-sh:0 1px 2px rgba(23,23,31,.05), 0 6px 16px -8px rgba(23,23,31,.12); --udm-r:14px; } [data-bs-theme="dark"] .udm, [data-theme="dark"] .udm { --udm-ink:#EDEDF3; --udm-ink2:#C4C4D0; --udm-mute:#8E8E9C; --udm-faint:#63636F; --udm-paper:#0E0E14; --udm-card:#1A1A23; --udm-sunk:#232330; --udm-line:#2B2B37; --udm-line2:#3A3A48; --udm-indigo:#93AFDC; --udm-indigo-s:#1C2536; --udm-indigo-l:#3C577F; --udm-wood:#7FB08E; --udm-fire:#E08678; --udm-earth:#D6B276; --udm-metal:#A9ADBC; --udm-water:#74A2C9; --udm-gold:#D0A85E; --udm-sh:0 1px 2px rgba(0,0,0,.3), 0 6px 16px -8px rgba(0,0,0,.5); } /* ── 뼈대 ─────────────────────────────────────────────────── */ .udm { max-width:560px; margin:0 auto; color:var(--udm-ink); font-weight:400; line-height:1.6; -webkit-font-smoothing:antialiased; } .udm *{box-sizing:border-box} /* ── PC 2단 (본문 + 사이드바) ──────────────────────────────── * harulogs 의 「본문 + 사이드바 324px」 구조를 본문 칼럼 안에 한 겹 더 만든다. * 모바일(lg 미만)은 건드리지 않는다 — 기존 1단 화면 그대로다. */ @media (min-width:992px){ /* 데스크톱에서는 560px 제한을 풀어 본문이 칼럼을 꽉 채우게 한다 */ .udm{max-width:none; margin:0} /* 본문만 좁히고 싶은 화면(입력 폼·공유 수신)은 여기서 다시 560 으로 */ .udm .udm-col-main--narrow{max-width:560px; margin-left:auto; margin-right:auto} } /* ⛔ min-width:0 을 지우지 마라. * layout.css 의 `main .content > .row > .col-lg { min-width:0 }` 는 자식 결합자라 * 최상위 칼럼에만 걸린다. 중첩한 이 칼럼은 그 대상이 아니어서, 광고 iframe 처럼 * 축소되지 않는 요소가 들어오면 칼럼이 못 줄고 사이드바가 본문 아래로 떨어진다. */ .udm .udm-col-main{min-width:0} /* lg 미만에서 `.col-lg` 는 부트스트랩 규칙이 하나도 걸리지 않아(전부 min-width:992 안에 있다) flex 항목이 콘텐츠 폭으로 줄어든다. 모바일에서 본문이 좁아지지 않도록 폭을 명시한다. */ @media (max-width:991.98px){ .udm .udm-col-main{width:100%} } /* 사이드바 폭 — harulogs 와 같은 324px. * ★ 스킨의 `main .aside`(324px)와 `@media (max-width:992px)`(fit-content)는 * 정확히 992.0px 에서 부트스트랩 `col-lg`(≥992)와 겹쳐, 그 1px 폭에서 사이드바가 * fit-content 로 쪼그라든다(SKILL.md §4 의 알려진 문제). * 우리 사이드바는 경계를 991.98 / 992 로 갈라 그 겹침을 없앤다. * `main .aside`(0,1,1)를 이기려고 선택자를 세 겹으로 쓴다 — 줄이지 말 것. */ @media (min-width:992px){ main .aside.udm-aside{width:324px; max-width:324px; flex:0 0 324px} } @media (max-width:991.98px){ main .aside.udm-aside{width:100%; max-width:100%} } /* 본문 안 2단 — 나란히 둘 수 있는 카드 묶음. * 그리드는 클래스로 짠다(부트스트랩 row + col-lg-*). SCSS 로 grid-template-columns 를 쓰지 않는다. * * ⚠ 거터를 끈 이유: 부트스트랩의 기본 거터는 「row 의 음수 마진 + col 의 패딩」 조합인데, * .udm-scr 에는 그 음수 마진을 받아 줄 좌우 패딩이 없다. 그대로 두면 2단 행만 * 좌우로 6.5px 씩 삐져나와 위아래 전폭 카드와 가장자리가 어긋난다. * 그래서 마진·패딩을 0 으로 두고 칼럼 사이 여백은 column-gap 으로 주며, * 폭에서 gap 의 절반을 빼 두 칸이 한 줄에 들어가게 한다. * 세로 리듬(13px)은 .udm-scr 의 gap 과 같은 값으로 맞춘다. * * ⛔ `.udm` 를 앞에 붙여 특이도를 (0,2,x) 로 올린 것을 되돌리지 마라. * 이 파일은 스킨의 `Core::head()` 자리에서 주입되는데, header-lib.php 에서 그 자리는 * 부트스트랩 보다 **위**다. 즉 우리 CSS 가 부트스트랩보다 먼저 로드된다. * 특이도가 같으면(`.udm-2up` vs `.row` 둘 다 (0,1,0)) 나중에 온 부트스트랩이 이긴다 — * 실제로 `.udm-2up{margin-left:0}` 이 무시돼 2단 행만 좌우로 12px 삐져나왔다(실측). */ .udm .udm-2up{margin-left:0; margin-right:0; --bs-gutter-x:0; --bs-gutter-y:0; row-gap:13px} .udm .udm-2up > [class*="col-"]{padding-left:0; padding-right:0} @media (min-width:992px){ .udm .udm-2up{column-gap:13px} .udm .udm-2up > .col-lg-5{width:calc(41.66666667% - 6.5px)} .udm .udm-2up > .col-lg-6{width:calc(50% - 6.5px)} .udm .udm-2up > .col-lg-7{width:calc(58.33333333% - 6.5px)} } /* 카드 높이는 맞추지 않는다(내용대로 둔다). 한때 `height:100%` 로 양쪽을 맞췄는데, 짧은 쪽 카드 아래에 100px 넘는 빈 면이 남아 「뭔가 빠진 자리」로 읽혔다(실측 스크린샷). 아랫단이 어긋나는 편이 낫다. */ /* 수치 표기 — 예전에는 모노 폰트였다. 이제 폰트는 본문과 같고 자릿수 정렬만 유지한다 */ .udm-mono{font-variant-numeric:tabular-nums; letter-spacing:.04em} /* 간지 한자 전용. Gothic A1 은 한자 글리프가 없어 폴백되면 자형이 섞인다 */ .udm-han{font-family:"Noto Serif KR",serif} /* 화면 본문 — 목업의 .scr 에 대응 */ .udm-scr{display:flex; flex-direction:column; gap:13px} /* 상단 바 — 목업의 .bar. 스킨 헤더 아래에 놓이는 화면 제목 줄 */ .udm-bar{ display:flex; align-items:center; gap:10px; padding:2px 0 14px; border-bottom:1px solid var(--udm-line); margin-bottom:4px; } .udm-bar__bk{color:var(--udm-faint); font-size:18px; line-height:1; text-decoration:none} .udm-bar__ti{font-size:16px; font-weight:700; letter-spacing:-.01em} .udm-bar__sp{margin-left:auto; color:var(--udm-faint); font-size:14px} /* ── 카드 ─────────────────────────────────────────────────── */ .udm-card{background:var(--udm-card); border-radius:var(--udm-r); padding:18px; border:1px solid var(--udm-line)} .udm-card--flat{background:transparent; border:none; padding:0} .udm-card--sunk{background:var(--udm-sunk); border-color:transparent} /* 강조는 화면당 하나만. 카드마다 액센트를 두르면 위계가 사라진다 */ .udm-card--ink{background:var(--udm-indigo); border-color:var(--udm-indigo)} .udm-card--ink *{color:#fff} .udm-card--ink .udm-lbl{color:rgba(255,255,255,.6)} .udm-card--ink .udm-p{color:rgba(255,255,255,.82)} .udm-card--tight{padding:5px 18px} .udm-card--pad{padding:26px 18px} /* ── 활자 ─────────────────────────────────────────────────── */ /* 라벨 — 모노 폰트를 걷어낸 자리를 자간과 굵기로 메운다. 본문과 같은 폰트지만 작고 넓고 굵어서 「값이 아니라 이름표」로 읽힌다. */ .udm-lbl{font-size:11.5px; letter-spacing:.13em; text-transform:uppercase; color:var(--udm-faint); font-weight:700; display:block; margin-bottom:8px} .udm-h-xl{font-size:25px; font-weight:900; letter-spacing:-.033em; line-height:1.28} .udm-h-lg{font-size:19px; font-weight:800; letter-spacing:-.025em; line-height:1.35} .udm-h-md{font-size:16px; font-weight:700; letter-spacing:-.015em} .udm-p{font-size:15px; color:var(--udm-ink2); line-height:1.72; margin:0} .udm-p--sm{font-size:13px; color:var(--udm-mute); line-height:1.6} .udm-strong{color:var(--udm-indigo); font-weight:700} /* 큰 숫자 — 한 화면에 하나만 */ .udm-big{font-size:64px; font-weight:900; letter-spacing:-.05em; line-height:.92; font-variant-numeric:tabular-nums; display:block} .udm-big--ink{color:var(--udm-indigo)} .udm-unit{font-size:15px; font-weight:700; color:var(--udm-mute); margin-left:2px} /* ── 점수 막대 ─────────────────────────────────────────────── */ .udm-sc{display:flex; align-items:center; gap:11px} .udm-sc + .udm-sc{margin-top:10px} /* 폭 고정 — 행마다 막대 시작 x 가 같아야 한다. 「버는힘」처럼 세 글자짜리 항목이 있으므로 두 글자 기준으로 잡으면 줄바꿈이 난다(실제로 재물운 화면에서 났다). */ .udm-sc__n{width:48px; font-size:13.5px; color:var(--udm-mute); flex:none; font-weight:500; white-space:nowrap} .udm-sc__t{flex:1; height:8px; background:var(--udm-sunk); border-radius:4px; overflow:hidden} .udm-sc__f{height:100%; background:var(--udm-indigo); border-radius:4px; display:block} .udm-sc__v{width:30px; text-align:right; font-size:15px; font-weight:700; font-variant-numeric:tabular-nums; flex:none} /* ── 오행 막대 — 막대 색이 곧 오행이다 ────────────────────────── */ .udm-el{display:flex; align-items:center; gap:10px} .udm-el + .udm-el{margin-top:8px} .udm-el__n{width:20px; font-size:14px; font-weight:600; flex:none; font-family:"Noto Serif KR",serif} .udm-el__t{flex:1; height:9px; background:var(--udm-sunk); border-radius:4px; overflow:hidden} .udm-el__f{height:100%; border-radius:4px; display:block} .udm-el__v{width:38px; text-align:right; font-size:12.5px; color:var(--udm-mute); font-variant-numeric:tabular-nums; flex:none} .udm-el__f--wood{background:var(--udm-wood)} .udm-el__f--fire{background:var(--udm-fire)} .udm-el__f--earth{background:var(--udm-earth)} .udm-el__f--metal{background:var(--udm-metal)} .udm-el__f--water{background:var(--udm-water)} .udm-el__n--wood{color:var(--udm-wood)} .udm-el__n--fire{color:var(--udm-fire)} .udm-el__n--earth{color:var(--udm-earth)} .udm-el__n--metal{color:var(--udm-metal)} .udm-el__n--water{color:var(--udm-water)} /* ── 원국표 ───────────────────────────────────────────────── */ .udm-pil{width:100%; border-collapse:separate; border-spacing:6px 0} .udm-pil th{font-size:11px; letter-spacing:.1em; color:var(--udm-faint); font-weight:700; padding-bottom:8px; text-align:center} .udm-pil td{text-align:center; padding:0} .udm-gz{background:var(--udm-sunk); border-radius:10px; padding:11px 2px; display:flex; flex-direction:column; align-items:center; gap:1px} .udm-gz + .udm-gz{margin-top:6px} /* 글자 색 = 오행. 아래 오행 막대와 같은 색이라 표를 외우지 않아도 분포가 읽힌다 */ .udm-gz__zh{font-family:"Noto Serif KR",serif; font-size:28px; font-weight:500; line-height:1.1} .udm-gz__ko{font-size:10.5px; color:var(--udm-faint); letter-spacing:.02em} .udm-gz--wood .udm-gz__zh{color:var(--udm-wood)} .udm-gz--fire .udm-gz__zh{color:var(--udm-fire)} .udm-gz--earth .udm-gz__zh{color:var(--udm-earth)} .udm-gz--metal .udm-gz__zh{color:var(--udm-metal)} .udm-gz--water .udm-gz__zh{color:var(--udm-water)} /* ── 칩 · 버튼 · 입력 ───────────────────────────────────────── */ .udm-chip{display:inline-flex; align-items:center; justify-content:center; border:1px solid var(--udm-line2); border-radius:100px; padding:7px 15px; font-size:13.5px; color:var(--udm-ink2); background:var(--udm-card); font-weight:500; cursor:pointer; user-select:none} .udm-chip.is-on{background:var(--udm-indigo); border-color:var(--udm-indigo); color:#fff; font-weight:700} .udm-chip--tight{padding:7px 0} .udm-btn{display:block; width:100%; background:var(--udm-indigo); color:#fff; border:1.5px solid var(--udm-indigo); border-radius:11px; text-align:center; padding:15px; font-size:16px; font-weight:700; letter-spacing:-.01em; text-decoration:none; cursor:pointer; font-family:inherit} .udm-btn:hover{color:#fff; opacity:.92} .udm-btn--ghost{background:transparent; color:var(--udm-indigo)} .udm-btn--ghost:hover{color:var(--udm-indigo)} .udm-btn--sm{padding:12px; font-size:14.5px; border-radius:9px} .udm-row{display:flex; gap:8px} .udm-row > *{flex:1; min-width:0} .udm-fld{border:1.5px solid var(--udm-line2); border-radius:10px; background:var(--udm-card); padding:13px 12px; font-size:16px; color:var(--udm-ink); font-weight:600; text-align:center; width:100%; font-family:inherit} .udm-fld::placeholder{color:var(--udm-faint); font-weight:400} .udm-fld--left{text-align:left} .udm-fld:focus{outline:2px solid var(--udm-indigo); outline-offset:1px} .udm-check{display:flex; align-items:center; gap:7px; font-size:13px; color:var(--udm-mute); cursor:pointer} .udm-check input{accent-color:var(--udm-indigo); width:15px; height:15px; margin:0} /* ── 탭 ───────────────────────────────────────────────────── */ .udm-tabs{display:flex; gap:20px; border-bottom:1px solid var(--udm-line); overflow-x:auto; padding:0 2px; margin-bottom:4px} .udm-tab{font-size:14.5px; color:var(--udm-mute); padding:12px 0 10px; white-space:nowrap; border-bottom:2px solid transparent; font-weight:600; text-decoration:none} .udm-tab:hover{color:var(--udm-ink2)} .udm-tab.is-on{color:var(--udm-indigo); border-bottom-color:var(--udm-indigo); font-weight:800} /* ── 대운 스트립 ───────────────────────────────────────────── */ .udm-dae{display:flex; gap:7px; overflow-x:auto; padding-bottom:2px} .udm-dc{flex:none; width:62px; border-radius:11px; padding:10px 3px; text-align:center; background:var(--udm-sunk); display:flex; flex-direction:column; gap:2px} .udm-dc.is-on{background:var(--udm-indigo)} .udm-dc__ag{font-size:11px; font-variant-numeric:tabular-nums; color:var(--udm-faint)} .udm-dc__gj{font-family:"Noto Serif KR",serif; font-size:18px; font-weight:500; color:var(--udm-ink2); line-height:1.2} .udm-dc.is-on .udm-dc__ag{color:rgba(255,255,255,.7)} .udm-dc.is-on .udm-dc__gj{color:#fff} .udm-dc__nw{font-size:10px; font-weight:800; color:#fff; letter-spacing:.04em} /* ── 목록 ─────────────────────────────────────────────────── */ .udm-li{display:flex; align-items:center; gap:12px; padding:13px 0; text-decoration:none; color:inherit} .udm-li + .udm-li{border-top:1px solid var(--udm-line)} .udm-li:hover{color:inherit} .udm-li:hover .udm-li__go{color:var(--udm-indigo)} .udm-li__ic{width:36px; height:36px; border-radius:9px; background:var(--udm-indigo-s); flex:none; display:flex; align-items:center; justify-content:center; color:var(--udm-indigo); font-size:15px; font-weight:600; font-family:"Noto Serif KR",serif} .udm-li__tx{flex:1; min-width:0; display:flex; flex-direction:column; gap:1px} .udm-li__go{color:var(--udm-faint); font-size:15px; flex:none} .udm-li--plain{padding:4px 0; border:none} /* ── 현재 대운 머리 ─────────────────────────────────────────── */ .udm-nowgj{display:flex; align-items:baseline; gap:10px; margin-bottom:15px} .udm-nowgj__gj{font-family:"Noto Serif KR",serif; font-size:32px; font-weight:600; color:var(--udm-indigo); line-height:1} /* ── 종합 점수 머리 (재물운 등) ──────────────────────────────── */ .udm-total{display:flex; align-items:flex-end; gap:16px} .udm-total__side{flex:1; padding-bottom:6px} /* ── 면책 고지 ─────────────────────────────────────────────── */ .udm-disc{font-size:13px; color:var(--udm-mute); line-height:1.6; text-align:center; padding:4px 10px 0; margin:0} /* ── 키워드 묶음 ───────────────────────────────────────────── */ .udm-tagrow{display:flex; gap:7px; flex-wrap:wrap} /* ── 구분선 달린 꼬리말 ─────────────────────────────────────── */ .udm-hr{margin-top:13px; padding-top:12px; border-top:1px solid var(--udm-line)} /* ── 간격 유틸 (인라인 style 금지 규칙 때문에 클래스로 둔다) ────── */ .udm-mb-1{margin-bottom:6px} .udm-mt-1{margin-top:8px} .udm-mt-2{margin-top:10px} .udm-mb-2{margin-bottom:15px} .udm-center{text-align:center} /* ── 접근성 ───────────────────────────────────────────────── */ .udm :focus-visible{outline:2px solid var(--udm-indigo); outline-offset:2px} /* ── ⛔ harulogs 다크 테마 링크 색 덮어쓰기 ──────────────────── * harulogs 의 styles.css 에 `[data-bs-theme=dark] main .content a { color:#32B1F9 }` 가 있다. * 특이도가 (0,2,2) 라서 `.udm-tab` `.udm-li` 같은 한 겹짜리 선택자를 전부 이긴다 — * 실제로 다크모드에서 탭·목록·고스트 버튼 글자가 죄다 하늘색으로 나왔다. * 스킨은 고칠 수 없으므로(플러그인 경계) 여기서 (0,3,1) 로 올려 되찾는다. * 선택자를 줄이지 말 것. 줄이면 다시 하늘색이 된다. */ .udm .udm-bar a.udm-bar__bk{color:var(--udm-faint)} .udm .udm-tabs a.udm-tab{color:var(--udm-mute)} .udm .udm-tabs a.udm-tab:hover{color:var(--udm-ink2)} .udm .udm-tabs a.udm-tab.is-on{color:var(--udm-indigo)} .udm .udm-scr a.udm-li{color:var(--udm-ink)} .udm .udm-scr a.udm-btn{color:#fff} .udm .udm-scr a.udm-btn.udm-btn--ghost{color:var(--udm-indigo)} /* ── 다크모드 강조 카드 대비 ──────────────────────────────────── * 원본 디자인은 강조 카드에 `--indigo` 를 그대로 깔고 흰 글자를 올린다. * 라이트에서는 #34517E 라 문제없지만 다크에서는 `--indigo` 가 #93AFDC(밝은 쪽빛)로 * 뒤집혀 흰 글자와 대비가 2:1 수준으로 떨어진다 — 실제로 읽기 힘들었다. * 그래서 다크에서만 바탕을 같은 팔레트의 짙은 쪽(`--indigo-l` = #3C577F)으로 내린다. * 새로 만든 색이 아니라 원본 토큰이며, 흰 글자 대비가 약 6.9:1 이 된다. */ [data-bs-theme="dark"] .udm .udm-card--ink, [data-theme="dark"] .udm .udm-card--ink{ background:var(--udm-indigo-l); border-color:var(--udm-indigo-l); } /* ── 공유 시트 (결과 화면의 modal) ─────────────────────────────── * 부트스트랩 modal 마크업을 쓰되 겉모습은 운담 카드 언어로 덮는다. * `.modal-content` 는 부트스트랩이 배경·테두리·반경을 잡아 두므로 특이도를 올려 덮는다 * (운담 CSS 가 부트스트랩보다 먼저 로드되므로 같은 특이도로는 진다 — 머리말 참조). */ .udm-sheet .modal-content.udm-sheet__content{ background:var(--udm-card); border:1px solid var(--udm-line); border-radius:20px; padding:20px 18px 18px; gap:13px; box-shadow:0 -10px 30px -12px rgba(23,23,31,.22); } [data-bs-theme="dark"] .udm-sheet .modal-content.udm-sheet__content{ box-shadow:0 -10px 30px -12px rgba(0,0,0,.6); } /* 손잡이 — 아래에서 올라오는 시트라는 신호 */ .udm-sheet__grip{width:34px; height:4px; background:var(--udm-line2); border-radius:3px; margin:0 auto 4px} .udm-sheet__field{display:flex; flex-direction:column} .udm-sheet__label{font-size:13.5px; font-weight:700; color:var(--udm-ink2); margin-bottom:7px; letter-spacing:-.01em} /* 시트 안의 목록 항목은