{"id":"metabolism","name":"메타볼리즘","css":"@import url('https://fonts.googleapis.com/css2?family=Space+Grotesk:wght@500;700&family=IBM+Plex+Sans+KR:wght@300;400;500;600&family=IBM+Plex+Mono:wght@400;500&display=swap');\n\n.doc-logo {\n\tdisplay: flex;\n\tjustify-content: center;\n\tpadding: 1.5cqw 0;\n}\n.doc-logo img {\n\t/* min(…, 100%) — 어떤 테마·뷰에서도 지면 밖으로 넘치지 않는다(turg 8/7).\n\t 폴백 줄 관례: min() 미지원(iOS12)은 아랫줄을 버리고 윗줄이 산다 — 30cqw 는 지면보다 항상 작다 */\n\tmax-width: 30cqw;\n\tmax-width: min(30cqw, 100%);\n\t/* 세로 캡 = 가로와 동일(정방 캡, turg 8/20) — 배너꼴 강제 해소, 세로 이미지도 제 비율 */\n\tmax-height: 30cqw;\n\tobject-fit: contain;\n}\n.doc-title {\n\tfont-family: var(--mp-font-display, var(--mp-font));\n\tfont-size: 5.4cqw; /* fallback */\n\tfont-size: clamp(4cqw, 5.4cqw, 6cqw);\n\tline-height: 1.15;\n\ttext-align: center;\n\tmargin: 1cqw 0 0;\n}\n.doc-subtitle {\n\tfont-size: 2.1cqw;\n\tline-height: 1.5;\n\ttext-align: center;\n\tcolor: var(--mp-text-secondary);\n\tmargin: 1.2cqw 0 0;\n\tletter-spacing: 0.04em;\n}\n\n\n:root {\n\t--mp-bg: #f4f3ef;\n\t--mp-bg2: #eae8e1; /* 반 단 어두운 종이 — 그룹 카드·UI 묶음 배경 */\n\t--mp-text: #1e1f1c;\n\t--mp-text-secondary: #8a887f;\n\t--mp-border: #d8d6cd;\n\t--mp-accent: #d7402b;\n\t/* MD 액션 색 — UI 확정 CTA(primary)·보조 액션(secondary). 지면이 아니라 앱 크롬용 */\n\t--mp-primary: #d7402b;\n\t--mp-on-primary: #f4f3ef;\n\t--mp-secondary: #8a887f;\n\t--mp-on-secondary: #f4f3ef;\n\t--mp-font: 'IBM Plex Sans KR', -apple-system, sans-serif;\n\t--mp-font-display: 'Space Grotesk', 'IBM Plex Sans KR', sans-serif;\n\t--mp-font-mono: 'IBM Plex Mono', 'IBM Plex Sans KR', monospace;\n\t--mp-font-price-theme: var(--mp-font-mono); /* 가격 = 모노(테마 기본) — shared-layout 역할 체인 */\n\t--mp-font-size: 15px;\n}\n\n.container-wrapper { background: var(--mp-bg); }\n\n.mp-page {\n\tcontainer-type: inline-size;\n\twidth: 100%;\n\theight: 100%;\n\tbox-sizing: border-box;\n\tbackground: var(--mp-bg);\n\tcolor: var(--mp-text);\n\tfont-family: var(--mp-font);\n}\n\n.container {\n\tfont-family: var(--mp-font);\n\tfont-weight: 400;\n\tcolor: var(--mp-text);\n\tline-height: 1.5;\n\tpadding: 7.5cqw 8cqw;\n\tbox-sizing: border-box;\n}\n\n/* ── 마스트헤드: 기하 산세 — 캡슐타워의 대칭. 레드 원 같은 장식은 테마가 강제하지\n 않는다(HTML/이미지 블록의 몫, turg 8/11) — 데모가 svg 로 예시한다. ── */\n.doc-title {\n\tfont-family: var(--mp-font-display);\n\tfont-weight: 700;\n\tfont-size: 6.4cqw;\n\tletter-spacing: -0.015em;\n\tline-height: 1.05;\n\ttext-transform: uppercase;\n\tcolor: var(--mp-text);\n}\n.doc-subtitle {\n\tfont-family: var(--mp-font-mono);\n\tfont-weight: 400;\n\tfont-size: 1.4cqw;\n\tletter-spacing: 0.3em;\n\ttext-indent: 0.3em;\n\ttext-transform: uppercase;\n\tline-height: 1.7;\n\tcolor: var(--mp-text-secondary);\n\tmargin-top: 2cqw;\n}\n\n/* ── 블록 리듬 — 모듈 등간격 ── */\n.container .section-container .section { margin-top: 3.6cqw; }\n.container .section-container .section:first-child { margin-top: 0; }\n.container .section-container .section.v3-row { margin-top: 0.9cqw; }\n.container .section-container .section.v3-h .section-header { margin-bottom: 0; }\n\n/* 섹션 = 모듈 헤더 — 기하 산세 + 도면 헤어라인 (dot 는 표지 하나로 충분, turg 8/11) */\n.container .section-container .section .section-header {\n\ttext-align: left;\n\tborder-bottom: 1px solid var(--mp-border);\n\tpadding-bottom: 0.8cqw;\n}\n.container .section-container .section .section-header .label {\n\tfont-family: var(--mp-font-display);\n\tfont-weight: 600;\n\tfont-size: 1.9cqw;\n\tletter-spacing: 0.1em;\n\ttext-transform: uppercase;\n\tcolor: var(--mp-text);\n}\n.container .section-container .section .section-header .v3-head-sub {\n\tfont-family: var(--mp-font-mono);\n\tfont-size: 1.3cqw;\n\tletter-spacing: 0.1em;\n\ttext-transform: uppercase;\n}\n\n/* 아이템: 담백한 행 + 모노 가격(도면 수치) */\n.container .section-container .section .item-container { column-gap: 7%; }\n.container .section-container .section .item-container .item {\n\tmargin: 0.35cqw 0;\n}\n.container .section-container .section .item-container .item .value-container {\n\talign-items: baseline;\n}\n.container .section-container .section .item-container .item .value-container .name {\n\tfont-size: 1.65cqw;\n\tfont-weight: 500;\n\tletter-spacing: 0.015em;\n\tline-height: 1.4;\n\tcolor: var(--mp-text);\n}\n.container .section-container .section .item-container .item .value-container .value {\n\tfont-family: var(--mp-font-mono);\n\tfont-size: 1.5cqw;\n\tfont-weight: 500;\n\tcolor: var(--mp-text);\n\tfont-variant-numeric: tabular-nums;\n}\n.container .section-container .section .item-container .item .note-container .note {\n\tfont-size: 1.45cqw;\n\tfont-weight: 300;\n\tline-height: 1.5;\n\tcolor: var(--mp-text-secondary);\n\tmargin-top: 0.2cqw;\n}\n\n/* 사진 = 포트홀(캡슐 창) — 이 테마의 시그니처. SHARED 의 3:4 스택 칸을 정원으로 덮고\n cover 크롭(포트홀은 원 밖이 없다). 누끼 대신 스튜디오컷을 권하는 테마. */\n.mp-page .container .section-container .section .item-container .item.has-image .mp-item-image {\n\taspect-ratio: 1 / 1;\n\tborder-radius: 50%;\n\toverflow: hidden;\n\t/* 사진 여백(imgMargin) 무시 — 포트홀은 원을 가득 채운다(여백이 남으면 원 안 사각이 비친다) */\n\tpadding: 0;\n}\n.mp-page .container .section-container .section .item-container .item.has-image .mp-item-image .v3-img {\n\tobject-fit: cover;\n\tobject-position: center;\n\tborder-radius: 50%;\n}\n\n/* 줄글 — 중앙 모노 주기 */\n.container .v3-textblock { margin: 2.4cqw 0; }\n.container .v3-textblock .v3-tline {\n\tfont-family: var(--mp-font-mono);\n\tfont-size: 1.4cqw;\n\tline-height: 1.8;\n\ttext-align: center;\n\tcolor: var(--mp-text);\n}\n\n/* 꼬릿말 — 콜로폰, 도면 주기 */\n\n/* 섹션 헤더 2종 —\n ① 기본: 테마가 소유(대개 가운데 정렬, 이름만).\n ② 부제 있음(.v3-head-split): 이름 왼쪽 / 부제 오른쪽. 레거시 sections[].columns 승계분이고,\n 같은 라벨 섹션을 구분하는 유일한 단서라 이름과 같은 줄에서 대비돼야 읽힌다.\n 정렬은 여기가 SSoT — 테마의 text-align(center 등)을 이기려고 자식에 명시적으로 되돌린다. */\n.container .section-container .section .section-header.v3-head-split {\n\tdisplay: flex;\n\t/* 어딘가(테마/시스템)에서 .section-header 를 column 으로 잡고 있어 부제가 아래로 밀렸다 —\n\t 2단 헤더는 행 방향이 본질이라 여기서 명시적으로 되돌린다. */\n\tflex-direction: row;\n\tflex-wrap: nowrap;\n\talign-items: baseline;\n\tjustify-content: space-between;\n\ttext-align: start;\n}\n/* 간격 = 형제 margin (flex gap 은 iOS12(<14.1) 미지원 — row·nowrap 이라 등가) */\n.container .section-container .section .section-header.v3-head-split > * + * {\n\tmargin-left: 2cqw;\n}\n.container .section-container .section .section-header.v3-head-split .label-wrapper {\n\tflex: 1 1 auto;\n\tmin-width: 0;\n\ttext-align: start;\n}\n/* 테마의 장식 헤어라인(::after)은 가운데 정렬 헤더 전용이다 — 2단에선 flex 아이템이 되어\n 부제 오른쪽에 조각처럼 떠버린다. 2단은 좌/우 대비가 이미 구분선 역할을 하므로 숨긴다. */\n.container .section-container .section .section-header.v3-head-split::after,\n.container .section-container .section .section-header.v3-head-split .label::after {\n\tdisplay: none;\n}\n.container .section-container .section .section-header.v3-head-split .v3-head-sub {\n\tflex: 0 1 auto;\n\tmin-width: 0;\n\ttext-align: end;\n\tcolor: var(--mp-text-secondary, var(--mp-text));\n}\n/* 가운데 헤더(종류 ①)는 설명 칸이 아예 없다 — 렌더 자체를 안 한다(PageView). 한 줄 더 필요하면\n 사용자가 텍스트 블록을 추가하는 게 v3 취지(turg 8/4). 그래서 :not(.v3-head-split) 규칙도 없다. */\n\n/* 아이템 행의 세로 정렬 기본값 — 대부분의 테마는 캡션 길이가 달라도 위로 붙는 게 자연스럽다.\n 예전엔 PageView 가 인라인으로 박았는데, 인라인은 CSS 로 못 덮어 테마가 제어할 수 없었다\n (카탈로그처럼 격자 칸을 맞춰야 하는 테마는 stretch 가 필요). 기본값만 여기서 준다. */\n.container .section-container .section .item-container { align-items: start; }\n\n/* 이름/가격 = grid 1fr auto — 공간 부족 시 이름이 먼저 줄바꿈으로 흡수(자기 최장 단어 폭까지),\n 그 다음에야 가격이 꺾인다. flex 는 동시 비례 축소라 이 순차가 안 됨(가격이 먼저 두 줄 나던 원인). */\n.container .section-container .section .item-container .item .value-container {\n\tdisplay: grid;\n\tgrid-template-columns: 1fr auto;\n}\n.container .section-container .section .item-container .item .value-container .value {\n\ttext-align: end;\n}\n/* 다열 아이템 수평 정렬 — 좌우 아이템의 이름 행/설명 행을 부모 그리드의 공유 행 트랙에 태워\n y 를 맞춘다(왼쪽 이름이 두 줄이면 오른쪽 설명도 같이 내려옴). .item-body 는 display:contents 로\n 평탄화(마크업 불변), row-gap:0 이 부모 row-gap 의 트랙 안 유입을 차단(내부 리듬은 note margin 소유).\n 이미지 아이템은 가로 flex 유지라 제외. 미지원 엔진(Chrome<117/Safari<16)은 @supports 가 통째로\n 스킵 → 기존 독립 흐름 폴백(정렬만 포기, 깨지지 않음). */\n@supports (grid-template-rows: subgrid) {\n\t.container .section-container .section .item-container .item:not(.has-image) {\n\t\tdisplay: grid;\n\t\tgrid-template-rows: subgrid;\n\t\tgrid-row: span 2;\n\t\trow-gap: 0;\n\t\talign-self: stretch;\n\t}\n\t.container .section-container .section .item-container .item:not(.has-image) .item-body {\n\t\tdisplay: contents;\n\t}\n\t/* ⚠️ 사진 아이템도 **같은 행 수**를 차지해야 한다(turg QA 8/21): 텍스트만 2행을 먹으면\n\t 자동 배치가 어긋나 3단에 텍스트2+사진4를 넣었을 때 123/456 이 아니라 사진이 빈 칸을\n\t 찾아 흩어진다(텍스트가 1·2열의 두 행을 막아 3번째 사진이 3열 둘째 행으로 내려감).\n\t 사진은 subgrid 정렬 대상이 아니지만 자리 수는 맞춘다 — 순수 사진 격자는 좌표 불변(실측). */\n\t.container .section-container .section .item-container .item.has-image {\n\t\tgrid-row: span 2;\n\t}\n}\n\n/* ── 아이덴티티 블록(logo/title/subtitle) — DOCX 재정의(2026-07-29): 표지 = 이들 + 페이지브레이크 조합.\n 기본 조판(중앙 정렬·크기·간격)만 여기서. 타이포 개성(폰트·자간·색)은 각 템플릿이 덮는다. */\n.container .section-container .section.v3-id {\n\tdisplay: block;\n}\n/* (표지 기본값(.doc-logo/.doc-title/.doc-subtitle)은 SHARED_PRELUDE 로 — 파일 하단 참조.\n 구 :where() 명시도 0 장치는 iOS12(<14)가 룰째 드랍해 폐기, 지금은 테마 **앞** 배치가 계약.) */\n/* 이미지 블록 크기 3단 — 툴바의 작게/크게(variant.size). 로고(기본)~본문 사진(크게)까지\n 한 블록으로 — '이미지'는 일반 그림 프리미티브다(2026-08-07 어휘 재설계). */\n.mp-page .v3-id[data-vsize='s'] .doc-logo img {\n\tmax-width: 16cqw;\n\tmax-width: min(16cqw, 100%);\n\t/* 세로 캡 = 가로와 동일(정방 캡, turg 8/20 \"배너처럼 가로로만 길다\") — 세로 이미지가 안 눌린다 */\n\tmax-height: 16cqw;\n}\n.mp-page .v3-id[data-vsize='l'] .doc-logo img {\n\t/* 풀폭 — 스캔한 메뉴표/포스터 한 장을 통째로 쓰는 용도까지(turg 8/7).\n\t 세로 캡은 **지면 안**. 122cqw 는 콘텐츠 영역을 넘겨 아래가 잘렸다 — 표지 중앙 규칙의\n\t overflow:hidden 이 가려주던 것이고(turg 8/20 실측 ±26px), 그 규칙을 걷어낸 8/21 에\n\t 드러났다. 블록은 자기 자리 안에서 끝난다. */\n\tmax-width: 100%;\n\tmax-height: 104cqw;\n}\n/* 자르기(imgFit=cover, turg 8/20) — 아이템 이미지와 같은 문법. 콘텐츠 폭을 꽉 채우고\n 크기 3단의 높이 캡이 프레임이 된다(배너 크롭). 기본(맞추기)은 위 contain 그대로. */\n.mp-page .v3-id[data-imgfit='cover'] .doc-logo img {\n\twidth: 100%;\n\tmax-width: 100%;\n\theight: 30cqw;\n\tobject-fit: cover;\n}\n.mp-page .v3-id[data-vsize='s'][data-imgfit='cover'] .doc-logo img {\n\theight: 16cqw;\n\tmax-width: 100%;\n}\n.mp-page .v3-id[data-vsize='l'][data-imgfit='cover'] .doc-logo img {\n\theight: 104cqw;\n}\n/* (표지형 페이지 = 이미지만 있는 장을 세로 중앙에 놓던 규칙은 삭제 — turg 8/21:\n \"로고 블록은 존재하지 않는다. 이미지 블록은 딱 블록 시작부터 제 크기만큼만 차지해야지\n 페이지를 다 차지하는 건 말이 안 된다.\" 가운데 놓고 싶으면 빈 줄글을 위에 넣으면 된다 —\n 블록이 자기 자리를 벗어나 지면을 소유하지 않는다는 게 블록 모델의 계약이다.) */\n\n\n/* ── 역할별 글꼴(turg 2026-08-06) — \"글꼴\"이 어디를 바꾸는지 안 보이던 문제.\n 토큰이 없으면 지금까지의 값 그대로다(폴백 체인이 각 테마의 기존 선언을 재현한다):\n 타이틀→display, 소제목→본문, 섹션 라벨→display, 아이템 이름→본문, 본문/설명/꼬릿말→본문.\n ⚠️ 테마 선언을 이겨야 해서 각 셀렉터를 테마와 같은 깊이 + .mp-page 한 단으로 올린다.\n 기본 매핑이 다른 테마는 --mp-font-*-theme 로 자기 기본을 선언한다(심플의 타이틀 = 산세리프). */\n.mp-page .doc-title {\n\tfont-family: var(--mp-font-title, var(--mp-font-title-theme, var(--mp-font-display, var(--mp-font))));\n}\n.mp-page .doc-subtitle {\n\tfont-family: var(--mp-font-subtitle, var(--mp-font-subtitle-theme, var(--mp-font)));\n}\n.mp-page .container .section-container .section .section-header .label {\n\tfont-family: var(--mp-font-label, var(--mp-font-label-theme, var(--mp-font-display, var(--mp-font))));\n}\n.mp-page\n\t.container\n\t.section-container\n\t.section\n\t.item-container\n\t.item\n\t.value-container\n\t.name {\n\tfont-family: var(--mp-font-name, var(--mp-font-name-theme, var(--mp-font)));\n}\n/* 가격(turg 8/20) — 모노 가격 테마(브루탈·메타볼리즘)는 --mp-font-price-theme 로 자기 기본 선언 */\n.mp-page\n\t.container\n\t.section-container\n\t.section\n\t.item-container\n\t.item\n\t.value-container\n\t.value {\n\tfont-family: var(--mp-font-price, var(--mp-font-price-theme, var(--mp-font)));\n}\n/* 설명(.note)은 본문으로 폴백(turg 8/20 분리) — 글꼴 세트가 여전히 둘을 함께 입힌다 */\n.mp-page .container .section-container .section .item-container .item .note-container .note {\n\tfont-family: var(\n\t\t--mp-font-note,\n\t\tvar(--mp-font-body, var(--mp-font-body-theme, var(--mp-font)))\n\t);\n}\n.mp-page .container .v3-textblock .v3-tline {\n\tfont-family: var(--mp-font-body, var(--mp-font-body-theme, var(--mp-font)));\n}\n","cssFlat":"\n\n/* ── 마스트헤드: 기하 산세 — 캡슐타워의 대칭. 레드 원 같은 장식은 테마가 강제하지\n 않는다(HTML/이미지 블록의 몫, turg 8/11) — 데모가 svg 로 예시한다. ── */\n\n/* ── 블록 리듬 — 모듈 등간격 ── */\n\n/* 섹션 = 모듈 헤더 — 기하 산세 + 도면 헤어라인 (dot 는 표지 하나로 충분, turg 8/11) */\n\n/* 아이템: 담백한 행 + 모노 가격(도면 수치) */\n\n/* 사진 = 포트홀(캡슐 창) — 이 테마의 시그니처. SHARED 의 3:4 스택 칸을 정원으로 덮고\n cover 크롭(포트홀은 원 밖이 없다). 누끼 대신 스튜디오컷을 권하는 테마. */\n\n/* 줄글 — 중앙 모노 주기 */\n\n/* 꼬릿말 — 콜로폰, 도면 주기 */\n\n/* 섹션 헤더 2종 —\n ① 기본: 테마가 소유(대개 가운데 정렬, 이름만).\n ② 부제 있음(.v3-head-split): 이름 왼쪽 / 부제 오른쪽. 레거시 sections[].columns 승계분이고,\n 같은 라벨 섹션을 구분하는 유일한 단서라 이름과 같은 줄에서 대비돼야 읽힌다.\n 정렬은 여기가 SSoT — 테마의 text-align(center 등)을 이기려고 자식에 명시적으로 되돌린다. */\n/* 간격 = 형제 margin (flex gap 은 iOS12(<14.1) 미지원 — row·nowrap 이라 등가) */\n/* 테마의 장식 헤어라인(::after)은 가운데 정렬 헤더 전용이다 — 2단에선 flex 아이템이 되어\n 부제 오른쪽에 조각처럼 떠버린다. 2단은 좌/우 대비가 이미 구분선 역할을 하므로 숨긴다. */\n/* 가운데 헤더(종류 ①)는 설명 칸이 아예 없다 — 렌더 자체를 안 한다(PageView). 한 줄 더 필요하면\n 사용자가 텍스트 블록을 추가하는 게 v3 취지(turg 8/4). 그래서 :not(.v3-head-split) 규칙도 없다. */\n\n/* 아이템 행의 세로 정렬 기본값 — 대부분의 테마는 캡션 길이가 달라도 위로 붙는 게 자연스럽다.\n 예전엔 PageView 가 인라인으로 박았는데, 인라인은 CSS 로 못 덮어 테마가 제어할 수 없었다\n (카탈로그처럼 격자 칸을 맞춰야 하는 테마는 stretch 가 필요). 기본값만 여기서 준다. */\n\n/* 이름/가격 = grid 1fr auto — 공간 부족 시 이름이 먼저 줄바꿈으로 흡수(자기 최장 단어 폭까지),\n 그 다음에야 가격이 꺾인다. flex 는 동시 비례 축소라 이 순차가 안 됨(가격이 먼저 두 줄 나던 원인). */\n/* 다열 아이템 수평 정렬 — 좌우 아이템의 이름 행/설명 행을 부모 그리드의 공유 행 트랙에 태워\n y 를 맞춘다(왼쪽 이름이 두 줄이면 오른쪽 설명도 같이 내려옴). .item-body 는 display:contents 로\n 평탄화(마크업 불변), row-gap:0 이 부모 row-gap 의 트랙 안 유입을 차단(내부 리듬은 note margin 소유).\n 이미지 아이템은 가로 flex 유지라 제외. 미지원 엔진(Chrome<117/Safari<16)은 @supports 가 통째로\n 스킵 → 기존 독립 흐름 폴백(정렬만 포기, 깨지지 않음). */\n@supports (grid-template-rows: subgrid) {\n\t/* ⚠️ 사진 아이템도 **같은 행 수**를 차지해야 한다(turg QA 8/21): 텍스트만 2행을 먹으면\n\t 자동 배치가 어긋나 3단에 텍스트2+사진4를 넣었을 때 123/456 이 아니라 사진이 빈 칸을\n\t 찾아 흩어진다(텍스트가 1·2열의 두 행을 막아 3번째 사진이 3열 둘째 행으로 내려감).\n\t 사진은 subgrid 정렬 대상이 아니지만 자리 수는 맞춘다 — 순수 사진 격자는 좌표 불변(실측). */\n}\n\n/* ── 아이덴티티 블록(logo/title/subtitle) — DOCX 재정의(2026-07-29): 표지 = 이들 + 페이지브레이크 조합.\n 기본 조판(중앙 정렬·크기·간격)만 여기서. 타이포 개성(폰트·자간·색)은 각 템플릿이 덮는다. */\n/* (표지 기본값(.doc-logo/.doc-title/.doc-subtitle)은 SHARED_PRELUDE 로 — 파일 하단 참조.\n 구 :where() 명시도 0 장치는 iOS12(<14)가 룰째 드랍해 폐기, 지금은 테마 **앞** 배치가 계약.) */\n/* 이미지 블록 크기 3단 — 툴바의 작게/크게(variant.size). 로고(기본)~본문 사진(크게)까지\n 한 블록으로 — '이미지'는 일반 그림 프리미티브다(2026-08-07 어휘 재설계). */\n/* 자르기(imgFit=cover, turg 8/20) — 아이템 이미지와 같은 문법. 콘텐츠 폭을 꽉 채우고\n 크기 3단의 높이 캡이 프레임이 된다(배너 크롭). 기본(맞추기)은 위 contain 그대로. */\n/* (표지형 페이지 = 이미지만 있는 장을 세로 중앙에 놓던 규칙은 삭제 — turg 8/21:\n \"로고 블록은 존재하지 않는다. 이미지 블록은 딱 블록 시작부터 제 크기만큼만 차지해야지\n 페이지를 다 차지하는 건 말이 안 된다.\" 가운데 놓고 싶으면 빈 줄글을 위에 넣으면 된다 —\n 블록이 자기 자리를 벗어나 지면을 소유하지 않는다는 게 블록 모델의 계약이다.) */\n\n\n/* ── 역할별 글꼴(turg 2026-08-06) — \"글꼴\"이 어디를 바꾸는지 안 보이던 문제.\n 토큰이 없으면 지금까지의 값 그대로다(폴백 체인이 각 테마의 기존 선언을 재현한다):\n 타이틀→display, 소제목→본문, 섹션 라벨→display, 아이템 이름→본문, 본문/설명/꼬릿말→본문.\n ⚠️ 테마 선언을 이겨야 해서 각 셀렉터를 테마와 같은 깊이 + .mp-page 한 단으로 올린다.\n 기본 매핑이 다른 테마는 --mp-font-*-theme 로 자기 기본을 선언한다(심플의 타이틀 = 산세리프). */\n/* 가격(turg 8/20) — 모노 가격 테마(브루탈·메타볼리즘)는 --mp-font-price-theme 로 자기 기본 선언 */\n/* 설명(.note)은 본문으로 폴백(turg 8/20 분리) — 글꼴 세트가 여전히 둘을 함께 입힌다 */@import url('https://fonts.googleapis.com/css2?family=Space+Grotesk:wght@500;700&family=IBM+Plex+Sans+KR:wght@300;400;500;600&family=IBM+Plex+Mono:wght@400;500&display=swap');\n.doc-logo:not(#\\#) {\n\tdisplay: flex;\n\tjustify-content: center;\n\tpadding: calc(var(--mp-u) * 1.5) 0;\n}\n.doc-logo:not(#\\#) img {\n\t/* min(…, 100%) — 어떤 테마·뷰에서도 지면 밖으로 넘치지 않는다(turg 8/7).\n\t 폴백 줄 관례: min() 미지원(iOS12)은 아랫줄을 버리고 윗줄이 산다 — calc(var(--mp-u) * 30) 는 지면보다 항상 작다 */\n\tmax-width: calc(var(--mp-u) * 30);\n\tmax-width: min(calc(var(--mp-u) * 30), 100%);\n\t/* 세로 캡 = 가로와 동일(정방 캡, turg 8/20) — 배너꼴 강제 해소, 세로 이미지도 제 비율 */\n\tmax-height: calc(var(--mp-u) * 30);\n\tobject-fit: contain;\n}\n.doc-title:not(#\\#) {\n\tfont-family: var(--mp-font-display, var(--mp-font));\n\tfont-size: calc(var(--mp-u) * 5.4); /* fallback */\n\tfont-size: clamp(calc(var(--mp-u) * 4), calc(var(--mp-u) * 5.4), calc(var(--mp-u) * 6));\n\tline-height: 1.15;\n\ttext-align: center;\n\tmargin: calc(var(--mp-u) * 1) 0 0;\n}\n.doc-subtitle:not(#\\#) {\n\tfont-size: calc(var(--mp-u) * 2.1);\n\tline-height: 1.5;\n\ttext-align: center;\n\tcolor: var(--mp-text-secondary);\n\tmargin: calc(var(--mp-u) * 1.2) 0 0;\n\tletter-spacing: 0.04em;\n}\n:root:not(#\\#) {\n\t--mp-bg: #f4f3ef;\n\t--mp-bg2: #eae8e1; /* 반 단 어두운 종이 — 그룹 카드·UI 묶음 배경 */\n\t--mp-text: #1e1f1c;\n\t--mp-text-secondary: #8a887f;\n\t--mp-border: #d8d6cd;\n\t--mp-accent: #d7402b;\n\t/* MD 액션 색 — UI 확정 CTA(primary)·보조 액션(secondary). 지면이 아니라 앱 크롬용 */\n\t--mp-primary: #d7402b;\n\t--mp-on-primary: #f4f3ef;\n\t--mp-secondary: #8a887f;\n\t--mp-on-secondary: #f4f3ef;\n\t--mp-font: 'IBM Plex Sans KR', -apple-system, sans-serif;\n\t--mp-font-display: 'Space Grotesk', 'IBM Plex Sans KR', sans-serif;\n\t--mp-font-mono: 'IBM Plex Mono', 'IBM Plex Sans KR', monospace;\n\t--mp-font-price-theme: var(--mp-font-mono); /* 가격 = 모노(테마 기본) — shared-layout 역할 체인 */\n\t--mp-font-size: 15px;\n}\n.container-wrapper:not(#\\#) { background: var(--mp-bg); }\n.mp-page:not(#\\#) {\n\tcontainer-type: inline-size;\n\twidth: 100%;\n\theight: 100%;\n\tbox-sizing: border-box;\n\tbackground: var(--mp-bg);\n\tcolor: var(--mp-text);\n\tfont-family: var(--mp-font);\n}\n.container:not(#\\#) {\n\tfont-family: var(--mp-font);\n\tfont-weight: 400;\n\tcolor: var(--mp-text);\n\tline-height: 1.5;\n\tpadding: calc(var(--mp-u) * 7.5) calc(var(--mp-u) * 8);\n\tbox-sizing: border-box;\n}\n/* ── 마스트헤드: 기하 산세 — 캡슐타워의 대칭. 레드 원 같은 장식은 테마가 강제하지\n 않는다(HTML/이미지 블록의 몫, turg 8/11) — 데모가 svg 로 예시한다. ── */\n.doc-title:not(#\\#) {\n\tfont-family: var(--mp-font-display);\n\tfont-weight: 700;\n\tfont-size: calc(var(--mp-u) * 6.4);\n\tletter-spacing: -0.015em;\n\tline-height: 1.05;\n\ttext-transform: uppercase;\n\tcolor: var(--mp-text);\n}\n.doc-subtitle:not(#\\#) {\n\tfont-family: var(--mp-font-mono);\n\tfont-weight: 400;\n\tfont-size: calc(var(--mp-u) * 1.4);\n\tletter-spacing: 0.3em;\n\ttext-indent: 0.3em;\n\ttext-transform: uppercase;\n\tline-height: 1.7;\n\tcolor: var(--mp-text-secondary);\n\tmargin-top: calc(var(--mp-u) * 2);\n}\n/* ── 블록 리듬 — 모듈 등간격 ── */\n.container:not(#\\#) .section-container .section { margin-top: calc(var(--mp-u) * 3.6); }\n.container:not(#\\#) .section-container .section:first-child { margin-top: 0; }\n.container:not(#\\#) .section-container .section.v3-row { margin-top: calc(var(--mp-u) * 0.9); }\n.container:not(#\\#) .section-container .section.v3-h .section-header { margin-bottom: 0; }\n/* 섹션 = 모듈 헤더 — 기하 산세 + 도면 헤어라인 (dot 는 표지 하나로 충분, turg 8/11) */\n.container:not(#\\#) .section-container .section .section-header {\n\ttext-align: left;\n\tborder-bottom: 1px solid var(--mp-border);\n\tpadding-bottom: calc(var(--mp-u) * 0.8);\n}\n.container:not(#\\#) .section-container .section .section-header .label {\n\tfont-family: var(--mp-font-display);\n\tfont-weight: 600;\n\tfont-size: calc(var(--mp-u) * 1.9);\n\tletter-spacing: 0.1em;\n\ttext-transform: uppercase;\n\tcolor: var(--mp-text);\n}\n.container:not(#\\#) .section-container .section .section-header .v3-head-sub {\n\tfont-family: var(--mp-font-mono);\n\tfont-size: calc(var(--mp-u) * 1.3);\n\tletter-spacing: 0.1em;\n\ttext-transform: uppercase;\n}\n/* 아이템: 담백한 행 + 모노 가격(도면 수치) */\n.container:not(#\\#) .section-container .section .item-container { column-gap: 7%; }\n.container:not(#\\#) .section-container .section .item-container .item {\n\tmargin: calc(var(--mp-u) * 0.35) 0;\n}\n.container:not(#\\#) .section-container .section .item-container .item .value-container {\n\talign-items: baseline;\n}\n.container:not(#\\#) .section-container .section .item-container .item .value-container .name {\n\tfont-size: calc(var(--mp-u) * 1.65);\n\tfont-weight: 500;\n\tletter-spacing: 0.015em;\n\tline-height: 1.4;\n\tcolor: var(--mp-text);\n}\n.container:not(#\\#) .section-container .section .item-container .item .value-container .value {\n\tfont-family: var(--mp-font-mono);\n\tfont-size: calc(var(--mp-u) * 1.5);\n\tfont-weight: 500;\n\tcolor: var(--mp-text);\n\tfont-variant-numeric: tabular-nums;\n}\n.container:not(#\\#) .section-container .section .item-container .item .note-container .note {\n\tfont-size: calc(var(--mp-u) * 1.45);\n\tfont-weight: 300;\n\tline-height: 1.5;\n\tcolor: var(--mp-text-secondary);\n\tmargin-top: calc(var(--mp-u) * 0.2);\n}\n/* 사진 = 포트홀(캡슐 창) — 이 테마의 시그니처. SHARED 의 3:4 스택 칸을 정원으로 덮고\n cover 크롭(포트홀은 원 밖이 없다). 누끼 대신 스튜디오컷을 권하는 테마. */\n.mp-page:not(#\\#) .container .section-container .section .item-container .item.has-image .mp-item-image {\n\taspect-ratio: 1 / 1;\n\tborder-radius: 50%;\n\toverflow: hidden;\n\t/* 사진 여백(imgMargin) 무시 — 포트홀은 원을 가득 채운다(여백이 남으면 원 안 사각이 비친다) */\n\tpadding: 0;\n}\n.mp-page:not(#\\#) .container .section-container .section .item-container .item.has-image .mp-item-image .v3-img {\n\tobject-fit: cover;\n\tobject-position: center;\n\tborder-radius: 50%;\n}\n/* 줄글 — 중앙 모노 주기 */\n.container:not(#\\#) .v3-textblock { margin: calc(var(--mp-u) * 2.4) 0; }\n.container:not(#\\#) .v3-textblock .v3-tline {\n\tfont-family: var(--mp-font-mono);\n\tfont-size: calc(var(--mp-u) * 1.4);\n\tline-height: 1.8;\n\ttext-align: center;\n\tcolor: var(--mp-text);\n}\n/* 꼬릿말 — 콜로폰, 도면 주기 */\n/* 섹션 헤더 2종 —\n ① 기본: 테마가 소유(대개 가운데 정렬, 이름만).\n ② 부제 있음(.v3-head-split): 이름 왼쪽 / 부제 오른쪽. 레거시 sections[].columns 승계분이고,\n 같은 라벨 섹션을 구분하는 유일한 단서라 이름과 같은 줄에서 대비돼야 읽힌다.\n 정렬은 여기가 SSoT — 테마의 text-align(center 등)을 이기려고 자식에 명시적으로 되돌린다. */\n.container:not(#\\#) .section-container .section .section-header.v3-head-split {\n\tdisplay: flex;\n\t/* 어딘가(테마/시스템)에서 .section-header 를 column 으로 잡고 있어 부제가 아래로 밀렸다 —\n\t 2단 헤더는 행 방향이 본질이라 여기서 명시적으로 되돌린다. */\n\tflex-direction: row;\n\tflex-wrap: nowrap;\n\talign-items: baseline;\n\tjustify-content: space-between;\n\ttext-align: left;\n}\n/* 간격 = 형제 margin (flex gap 은 iOS12(<14.1) 미지원 — row·nowrap 이라 등가) */\n.container:not(#\\#) .section-container .section .section-header.v3-head-split > * + * {\n\tmargin-left: calc(var(--mp-u) * 2);\n}\n.container:not(#\\#) .section-container .section .section-header.v3-head-split .label-wrapper {\n\tflex: 1 1 auto;\n\tmin-width: 0;\n\ttext-align: left;\n}\n/* 테마의 장식 헤어라인(::after)은 가운데 정렬 헤더 전용이다 — 2단에선 flex 아이템이 되어\n 부제 오른쪽에 조각처럼 떠버린다. 2단은 좌/우 대비가 이미 구분선 역할을 하므로 숨긴다. */\n.container:not(#\\#) .section-container .section .section-header.v3-head-split::after,\n.container:not(#\\#) .section-container .section .section-header.v3-head-split .label::after {\n\tdisplay: none;\n}\n.container:not(#\\#) .section-container .section .section-header.v3-head-split .v3-head-sub {\n\tflex: 0 1 auto;\n\tmin-width: 0;\n\ttext-align: right;\n\tcolor: var(--mp-text-secondary, var(--mp-text));\n}\n/* 가운데 헤더(종류 ①)는 설명 칸이 아예 없다 — 렌더 자체를 안 한다(PageView). 한 줄 더 필요하면\n 사용자가 텍스트 블록을 추가하는 게 v3 취지(turg 8/4). 그래서 :not(.v3-head-split) 규칙도 없다. */\n/* 아이템 행의 세로 정렬 기본값 — 대부분의 테마는 캡션 길이가 달라도 위로 붙는 게 자연스럽다.\n 예전엔 PageView 가 인라인으로 박았는데, 인라인은 CSS 로 못 덮어 테마가 제어할 수 없었다\n (카탈로그처럼 격자 칸을 맞춰야 하는 테마는 stretch 가 필요). 기본값만 여기서 준다. */\n.container:not(#\\#) .section-container .section .item-container { align-items: start; }\n/* 이름/가격 = grid 1fr auto — 공간 부족 시 이름이 먼저 줄바꿈으로 흡수(자기 최장 단어 폭까지),\n 그 다음에야 가격이 꺾인다. flex 는 동시 비례 축소라 이 순차가 안 됨(가격이 먼저 두 줄 나던 원인). */\n.container:not(#\\#) .section-container .section .item-container .item .value-container {\n\tdisplay: grid;\n\tgrid-template-columns: 1fr auto;\n}\n.container:not(#\\#) .section-container .section .item-container .item .value-container .value {\n\ttext-align: right;\n}\n/* 다열 아이템 수평 정렬 — 좌우 아이템의 이름 행/설명 행을 부모 그리드의 공유 행 트랙에 태워\n y 를 맞춘다(왼쪽 이름이 두 줄이면 오른쪽 설명도 같이 내려옴). .item-body 는 display:contents 로\n 평탄화(마크업 불변), row-gap:0 이 부모 row-gap 의 트랙 안 유입을 차단(내부 리듬은 note margin 소유).\n 이미지 아이템은 가로 flex 유지라 제외. 미지원 엔진(Chrome<117/Safari<16)은 @supports 가 통째로\n 스킵 → 기존 독립 흐름 폴백(정렬만 포기, 깨지지 않음). */\n@supports (grid-template-rows: subgrid) {\n\t.container:not(#\\#) .section-container .section .item-container .item:not(.has-image) {\n\t\tdisplay: grid;\n\t\tgrid-template-rows: subgrid;\n\t\tgrid-row: span 2;\n\t\trow-gap: 0;\n\t\talign-self: stretch;\n\t}\n\t.container:not(#\\#) .section-container .section .item-container .item:not(.has-image) .item-body {\n\t\tdisplay: contents;\n\t}\n\t/* ⚠️ 사진 아이템도 **같은 행 수**를 차지해야 한다(turg QA 8/21): 텍스트만 2행을 먹으면\n\t 자동 배치가 어긋나 3단에 텍스트2+사진4를 넣었을 때 123/456 이 아니라 사진이 빈 칸을\n\t 찾아 흩어진다(텍스트가 1·2열의 두 행을 막아 3번째 사진이 3열 둘째 행으로 내려감).\n\t 사진은 subgrid 정렬 대상이 아니지만 자리 수는 맞춘다 — 순수 사진 격자는 좌표 불변(실측). */\n\t.container:not(#\\#) .section-container .section .item-container .item.has-image {\n\t\tgrid-row: span 2;\n\t}\n}\n/* ── 아이덴티티 블록(logo/title/subtitle) — DOCX 재정의(2026-07-29): 표지 = 이들 + 페이지브레이크 조합.\n 기본 조판(중앙 정렬·크기·간격)만 여기서. 타이포 개성(폰트·자간·색)은 각 템플릿이 덮는다. */\n.container:not(#\\#) .section-container .section.v3-id {\n\tdisplay: block;\n}\n/* (표지 기본값(.doc-logo/.doc-title/.doc-subtitle)은 SHARED_PRELUDE 로 — 파일 하단 참조.\n 구 :where() 명시도 0 장치는 iOS12(<14)가 룰째 드랍해 폐기, 지금은 테마 **앞** 배치가 계약.) */\n/* 이미지 블록 크기 3단 — 툴바의 작게/크게(variant.size). 로고(기본)~본문 사진(크게)까지\n 한 블록으로 — '이미지'는 일반 그림 프리미티브다(2026-08-07 어휘 재설계). */\n.mp-page:not(#\\#) .v3-id[data-vsize='s'] .doc-logo img {\n\tmax-width: calc(var(--mp-u) * 16);\n\tmax-width: min(calc(var(--mp-u) * 16), 100%);\n\t/* 세로 캡 = 가로와 동일(정방 캡, turg 8/20 \"배너처럼 가로로만 길다\") — 세로 이미지가 안 눌린다 */\n\tmax-height: calc(var(--mp-u) * 16);\n}\n.mp-page:not(#\\#) .v3-id[data-vsize='l'] .doc-logo img {\n\t/* 풀폭 — 스캔한 메뉴표/포스터 한 장을 통째로 쓰는 용도까지(turg 8/7).\n\t 세로 캡은 **지면 안**. calc(var(--mp-u) * 122) 는 콘텐츠 영역을 넘겨 아래가 잘렸다 — 표지 중앙 규칙의\n\t overflow:hidden 이 가려주던 것이고(turg 8/20 실측 ±26px), 그 규칙을 걷어낸 8/21 에\n\t 드러났다. 블록은 자기 자리 안에서 끝난다. */\n\tmax-width: 100%;\n\tmax-height: calc(var(--mp-u) * 104);\n}\n/* 자르기(imgFit=cover, turg 8/20) — 아이템 이미지와 같은 문법. 콘텐츠 폭을 꽉 채우고\n 크기 3단의 높이 캡이 프레임이 된다(배너 크롭). 기본(맞추기)은 위 contain 그대로. */\n.mp-page:not(#\\#) .v3-id[data-imgfit='cover'] .doc-logo img {\n\twidth: 100%;\n\tmax-width: 100%;\n\theight: calc(var(--mp-u) * 30);\n\tobject-fit: cover;\n}\n.mp-page:not(#\\#) .v3-id[data-vsize='s'][data-imgfit='cover'] .doc-logo img {\n\theight: calc(var(--mp-u) * 16);\n\tmax-width: 100%;\n}\n.mp-page:not(#\\#) .v3-id[data-vsize='l'][data-imgfit='cover'] .doc-logo img {\n\theight: calc(var(--mp-u) * 104);\n}\n/* (표지형 페이지 = 이미지만 있는 장을 세로 중앙에 놓던 규칙은 삭제 — turg 8/21:\n \"로고 블록은 존재하지 않는다. 이미지 블록은 딱 블록 시작부터 제 크기만큼만 차지해야지\n 페이지를 다 차지하는 건 말이 안 된다.\" 가운데 놓고 싶으면 빈 줄글을 위에 넣으면 된다 —\n 블록이 자기 자리를 벗어나 지면을 소유하지 않는다는 게 블록 모델의 계약이다.) */\n/* ── 역할별 글꼴(turg 2026-08-06) — \"글꼴\"이 어디를 바꾸는지 안 보이던 문제.\n 토큰이 없으면 지금까지의 값 그대로다(폴백 체인이 각 테마의 기존 선언을 재현한다):\n 타이틀→display, 소제목→본문, 섹션 라벨→display, 아이템 이름→본문, 본문/설명/꼬릿말→본문.\n ⚠️ 테마 선언을 이겨야 해서 각 셀렉터를 테마와 같은 깊이 + .mp-page 한 단으로 올린다.\n 기본 매핑이 다른 테마는 --mp-font-*-theme 로 자기 기본을 선언한다(심플의 타이틀 = 산세리프). */\n.mp-page:not(#\\#) .doc-title {\n\tfont-family: var(--mp-font-title, var(--mp-font-title-theme, var(--mp-font-display, var(--mp-font))));\n}\n.mp-page:not(#\\#) .doc-subtitle {\n\tfont-family: var(--mp-font-subtitle, var(--mp-font-subtitle-theme, var(--mp-font)));\n}\n.mp-page:not(#\\#) .container .section-container .section .section-header .label {\n\tfont-family: var(--mp-font-label, var(--mp-font-label-theme, var(--mp-font-display, var(--mp-font))));\n}\n.mp-page:not(#\\#)\n\t.container\n\t.section-container\n\t.section\n\t.item-container\n\t.item\n\t.value-container\n\t.name {\n\tfont-family: var(--mp-font-name, var(--mp-font-name-theme, var(--mp-font)));\n}\n/* 가격(turg 8/20) — 모노 가격 테마(브루탈·메타볼리즘)는 --mp-font-price-theme 로 자기 기본 선언 */\n.mp-page:not(#\\#)\n\t.container\n\t.section-container\n\t.section\n\t.item-container\n\t.item\n\t.value-container\n\t.value {\n\tfont-family: var(--mp-font-price, var(--mp-font-price-theme, var(--mp-font)));\n}\n/* 설명(.note)은 본문으로 폴백(turg 8/20 분리) — 글꼴 세트가 여전히 둘을 함께 입힌다 */\n.mp-page:not(#\\#) .container .section-container .section .item-container .item .note-container .note {\n\tfont-family: var(\n\t\t--mp-font-note,\n\t\tvar(--mp-font-body, var(--mp-font-body-theme, var(--mp-font)))\n\t);\n}\n.mp-page:not(#\\#) .container .v3-textblock .v3-tline {\n\tfont-family: var(--mp-font-body, var(--mp-font-body-theme, var(--mp-font)));\n}\n.v3-root:not(.v3-legacy-doc):not(#\\#) .mp-page .section.v3-row .item-container .item{\n\taspect-ratio: auto;\n\ttext-align: left;\n}\n.v3-root:not(.v3-legacy-doc):not(#\\#) .mp-page .section.v3-row .item-container .item:not(.has-image){\n\talign-items: stretch;\n}\n.v3-root:not(.v3-legacy-doc):not(#\\#) .mp-page .section.v3-row .item-container .item::before,\n.v3-root:not(.v3-legacy-doc):not(#\\#) .mp-page .section.v3-row .item-container .item::after{\n\tcontent: none;\n}\n.v3-root:not(.v3-legacy-doc):not(#\\#) .mp-page .section.v3-row .item-container .item .item-body{\n\tposition: static;\n\twidth: auto;\n\tmax-width: none;\n}\n.v3-root:not(.v3-legacy-doc):not(#\\#) .mp-page .section.v3-row .item-container .item .value-container{\n\tdisplay: grid;\n\tgrid-template-columns: 1fr auto;\n\ttext-align: left;\n}\n.v3-root:not(.v3-legacy-doc):not(#\\#) .mp-page .section.v3-row .item-container .item .value-container .value{\n\ttext-align: right;\n}\n.v3-root:not(.v3-legacy-doc):not(#\\#) .mp-page .section.v3-row .item-container .item .value-container .name-wrapper{\n\tdisplay: flex;\n\tflex-direction: row;\n\talign-items: baseline;\n\tjustify-content: flex-start;\n}\n.v3-root:not(.v3-legacy-doc):not(#\\#) .mp-page .section.v3-row .item-container .item .note-container .note{\n\ttext-align: left;\n}\n.mp-page:not(#\\#)\n\t.v3-row[data-leader]\n\t.item\n\t.value-container\n\t.name-wrapper::after {\n\tcontent: '';\n\tflex: 1 1 auto;\n\tmin-width: 1.2em;\n\talign-self: flex-end;\n\tmargin: 0 0.5em 0.32em;\n\tborder-bottom: 1px dotted currentColor;\n\topacity: 0.42;\n}\n.mp-page:not(#\\#)\n\t.v3-row[data-leader]\n\t.item\n\t.value-container\n\t.name-wrapper:has(.name.v3-blank)::after {\n\tborder-bottom: none;\n}\n.mp-page:not(#\\#)\n\t.v3-row[data-leader]\n\t.item\n\t.value-container\n\t.value-wrapper {\n\talign-self: end;\n}\n.mp-page:not(#\\#)\n\t.v3-row[data-divider='on']\n\t.item-container\n\t.item {\n\tmargin: 0;\n\tpadding: calc(var(--mp-u) * 0.9) 0;\n\t\n\tborder-bottom: 1px solid rgba(0, 0, 0, 0.18);\n\tborder-bottom: 1px solid color-mix(in srgb, currentColor 18%, transparent);\n}\n.mp-page:not(#\\#)\n\t.v3-row[data-divider='on']\n\t.item-container\n\t.item\n\t.note-container\n\t.note {\n\tmargin-top: calc(var(--mp-u) * 0.15);\n}\n.mp-page:not(#\\#)\n\t.v3-row[data-divider='off']\n\t.item-container\n\t.item {\n\tborder-top: none;\n\tborder-bottom: none;\n}\n.mp-page:not(#\\#)\n\t.container\n\t.section-container\n\t.v3-row[data-imglayout='back']\n\t.item-container {\n\tcolumn-gap: 0;\n\talign-items: stretch;\n}\n.mp-page:not(#\\#)\n\t.container\n\t.section-container\n\t.v3-row[data-imglayout='back']\n\t.item-container\n\t.item.has-image {\n\tmargin: 0;\n\tpadding: 0;\n\tposition: relative;\n\tdisplay: block;\n\tborder-right: 1px solid var(--mp-border);\n\tborder-bottom: 1px solid var(--mp-border);\n}\n.mp-page:not(#\\#) .container .section-container .v3-row[data-imglayout='back'] .item-container .item.has-image::before,\n.mp-page:not(#\\#) .container .section-container .v3-row[data-imglayout='back'] .item-container .item.has-image::after {\n\tcontent: none;\n}\n.mp-page:not(#\\#)\n\t.container\n\t.section-container\n\t.v3-row[data-imglayout='back']\n\t.item-container\n\t.item.has-image\n\t.mp-item-image {\n\twidth: 100%;\n\theight: auto;\n\taspect-ratio: 1 / 1;\n\tmargin: 0 auto;\n\tobject-fit: cover;\n\tbackground: transparent;\n\tborder-radius: 0;\n\tmargin-bottom: 0;\n\tdisplay: block;\n}\n.mp-page:not(#\\#) .container .section-container .v3-row[data-imglayout='back'] .item-container .item.has-image .item-body {\n\tposition: absolute;\n\tleft: 0;\n\tright: 0;\n\ttop: 0;\n\tbottom: auto;\n\tz-index: 2;\n\tflex: none;\n\tmargin: 0 auto;\n\tpadding: calc(var(--mp-u) * 1.1) calc(var(--mp-u) * 1) calc(var(--mp-u) * 3);\n\tbackground: linear-gradient(to bottom, rgba(0, 0, 0, 0.66) 0%, rgba(0, 0, 0, 0.34) 52%, rgba(0, 0, 0, 0) 100%);\n}\n\n@supports (color: color-mix(in lch, red, blue)) {\n.mp-page:not(#\\#) .container .section-container .v3-row[data-imglayout='back'] .item-container .item.has-image .item-body {\n\tbackground: linear-gradient(to bottom, color-mix(in srgb, var(--mp-bg, #000) 78%, transparent) 0%, color-mix(in srgb, var(--mp-bg, #000) 42%, transparent) 52%, color-mix(in srgb, var(--mp-bg, #000) 0%, transparent) 100%);\n}\n}\n.mp-page:not(#\\#) .container .section-container .v3-row[data-imglayout='back'][data-valign='m'] .item-container .item.has-image .item-body {\n\ttop: 50%;\n\tbottom: auto;\n\ttransform: translateY(-50%);\n\tpadding: calc(var(--mp-u) * 2) calc(var(--mp-u) * 1);\n}\n.mp-page:not(#\\#) .container .section-container .v3-row[data-imglayout='back'][data-valign='b'] .item-container .item.has-image .item-body {\n\ttop: auto;\n\tbottom: 0;\n\tpadding: calc(var(--mp-u) * 3) calc(var(--mp-u) * 1) calc(var(--mp-u) * 1.1);\n}\n.mp-page:not(#\\#) .container .section-container .v3-row[data-imglayout='back'][data-scrim='0'] .item-container .item.has-image .item-body {\n\tbackground: none;\n}\n.mp-page:not(#\\#) .container .section-container .v3-row[data-imglayout='back'][data-scrim='1'] .item-container .item.has-image .item-body {\n\tbackground: linear-gradient(to bottom, rgba(0, 0, 0, 0.4) 0%, rgba(0, 0, 0, 0.18) 52%, rgba(0, 0, 0, 0) 100%);\n}\n\n@supports (color: color-mix(in lch, red, blue)) {\n.mp-page:not(#\\#) .container .section-container .v3-row[data-imglayout='back'][data-scrim='1'] .item-container .item.has-image .item-body {\n\tbackground: linear-gradient(to bottom, color-mix(in srgb, var(--mp-bg, #000) 48%, transparent) 0%, color-mix(in srgb, var(--mp-bg, #000) 22%, transparent) 52%, color-mix(in srgb, var(--mp-bg, #000) 0%, transparent) 100%);\n}\n}\n.mp-page:not(#\\#) .container .section-container .v3-row[data-imglayout='back'][data-scrim='3'] .item-container .item.has-image .item-body {\n\tbackground: linear-gradient(to bottom, rgba(0, 0, 0, 0.88) 0%, rgba(0, 0, 0, 0.55) 52%, rgba(0, 0, 0, 0) 100%);\n}\n\n@supports (color: color-mix(in lch, red, blue)) {\n.mp-page:not(#\\#) .container .section-container .v3-row[data-imglayout='back'][data-scrim='3'] .item-container .item.has-image .item-body {\n\tbackground: linear-gradient(to bottom, color-mix(in srgb, var(--mp-bg, #000) 92%, transparent) 0%, color-mix(in srgb, var(--mp-bg, #000) 60%, transparent) 52%, color-mix(in srgb, var(--mp-bg, #000) 0%, transparent) 100%);\n}\n}\n.mp-page:not(#\\#) .container .section-container .v3-row[data-imglayout='back'][data-valign='m'][data-scrim='0'] .item-container .item.has-image .item-body {\n\tbackground: none;\n}\n.mp-page:not(#\\#) .container .section-container .v3-row[data-imglayout='back'][data-valign='m'][data-scrim='1'] .item-container .item.has-image .item-body {\n\tbackground: linear-gradient(to bottom, rgba(0, 0, 0, 0) 0%, rgba(0, 0, 0, 0.18) 30%, rgba(0, 0, 0, 0.4) 50%, rgba(0, 0, 0, 0.18) 70%, rgba(0, 0, 0, 0) 100%);\n}\n\n@supports (color: color-mix(in lch, red, blue)) {\n.mp-page:not(#\\#) .container .section-container .v3-row[data-imglayout='back'][data-valign='m'][data-scrim='1'] .item-container .item.has-image .item-body {\n\tbackground: linear-gradient(to bottom, color-mix(in srgb, var(--mp-bg, #000) 0%, transparent) 0%, color-mix(in srgb, var(--mp-bg, #000) 22%, transparent) 30%, color-mix(in srgb, var(--mp-bg, #000) 48%, transparent) 50%, color-mix(in srgb, var(--mp-bg, #000) 22%, transparent) 70%, color-mix(in srgb, var(--mp-bg, #000) 0%, transparent) 100%);\n}\n}\n.mp-page:not(#\\#) .container .section-container .v3-row[data-imglayout='back'][data-valign='m'] .item-container .item.has-image .item-body {\n\tbackground: linear-gradient(to bottom, rgba(0, 0, 0, 0) 0%, rgba(0, 0, 0, 0.34) 30%, rgba(0, 0, 0, 0.66) 50%, rgba(0, 0, 0, 0.34) 70%, rgba(0, 0, 0, 0) 100%);\n}\n\n@supports (color: color-mix(in lch, red, blue)) {\n.mp-page:not(#\\#) .container .section-container .v3-row[data-imglayout='back'][data-valign='m'] .item-container .item.has-image .item-body {\n\tbackground: linear-gradient(to bottom, color-mix(in srgb, var(--mp-bg, #000) 0%, transparent) 0%, color-mix(in srgb, var(--mp-bg, #000) 42%, transparent) 30%, color-mix(in srgb, var(--mp-bg, #000) 78%, transparent) 50%, color-mix(in srgb, var(--mp-bg, #000) 42%, transparent) 70%, color-mix(in srgb, var(--mp-bg, #000) 0%, transparent) 100%);\n}\n}\n.mp-page:not(#\\#) .container .section-container .v3-row[data-imglayout='back'][data-valign='m'][data-scrim='3'] .item-container .item.has-image .item-body {\n\tbackground: linear-gradient(to bottom, rgba(0, 0, 0, 0) 0%, rgba(0, 0, 0, 0.55) 30%, rgba(0, 0, 0, 0.88) 50%, rgba(0, 0, 0, 0.55) 70%, rgba(0, 0, 0, 0) 100%);\n}\n\n@supports (color: color-mix(in lch, red, blue)) {\n.mp-page:not(#\\#) .container .section-container .v3-row[data-imglayout='back'][data-valign='m'][data-scrim='3'] .item-container .item.has-image .item-body {\n\tbackground: linear-gradient(to bottom, color-mix(in srgb, var(--mp-bg, #000) 0%, transparent) 0%, color-mix(in srgb, var(--mp-bg, #000) 60%, transparent) 30%, color-mix(in srgb, var(--mp-bg, #000) 92%, transparent) 50%, color-mix(in srgb, var(--mp-bg, #000) 60%, transparent) 70%, color-mix(in srgb, var(--mp-bg, #000) 0%, transparent) 100%);\n}\n}\n.mp-page:not(#\\#) .container .section-container .v3-row[data-imglayout='back'][data-valign='b'][data-scrim='0'] .item-container .item.has-image .item-body {\n\tbackground: none;\n}\n.mp-page:not(#\\#) .container .section-container .v3-row[data-imglayout='back'][data-valign='b'][data-scrim='1'] .item-container .item.has-image .item-body {\n\tbackground: linear-gradient(to top, rgba(0, 0, 0, 0.4) 0%, rgba(0, 0, 0, 0.18) 52%, rgba(0, 0, 0, 0) 100%);\n}\n\n@supports (color: color-mix(in lch, red, blue)) {\n.mp-page:not(#\\#) .container .section-container .v3-row[data-imglayout='back'][data-valign='b'][data-scrim='1'] .item-container .item.has-image .item-body {\n\tbackground: linear-gradient(to top, color-mix(in srgb, var(--mp-bg, #000) 48%, transparent) 0%, color-mix(in srgb, var(--mp-bg, #000) 22%, transparent) 52%, color-mix(in srgb, var(--mp-bg, #000) 0%, transparent) 100%);\n}\n}\n.mp-page:not(#\\#) .container .section-container .v3-row[data-imglayout='back'][data-valign='b'] .item-container .item.has-image .item-body {\n\tbackground: linear-gradient(to top, rgba(0, 0, 0, 0.66) 0%, rgba(0, 0, 0, 0.34) 52%, rgba(0, 0, 0, 0) 100%);\n}\n\n@supports (color: color-mix(in lch, red, blue)) {\n.mp-page:not(#\\#) .container .section-container .v3-row[data-imglayout='back'][data-valign='b'] .item-container .item.has-image .item-body {\n\tbackground: linear-gradient(to top, color-mix(in srgb, var(--mp-bg, #000) 78%, transparent) 0%, color-mix(in srgb, var(--mp-bg, #000) 42%, transparent) 52%, color-mix(in srgb, var(--mp-bg, #000) 0%, transparent) 100%);\n}\n}\n.mp-page:not(#\\#) .container .section-container .v3-row[data-imglayout='back'][data-valign='b'][data-scrim='3'] .item-container .item.has-image .item-body {\n\tbackground: linear-gradient(to top, rgba(0, 0, 0, 0.88) 0%, rgba(0, 0, 0, 0.55) 52%, rgba(0, 0, 0, 0) 100%);\n}\n\n@supports (color: color-mix(in lch, red, blue)) {\n.mp-page:not(#\\#) .container .section-container .v3-row[data-imglayout='back'][data-valign='b'][data-scrim='3'] .item-container .item.has-image .item-body {\n\tbackground: linear-gradient(to top, color-mix(in srgb, var(--mp-bg, #000) 92%, transparent) 0%, color-mix(in srgb, var(--mp-bg, #000) 60%, transparent) 52%, color-mix(in srgb, var(--mp-bg, #000) 0%, transparent) 100%);\n}\n}\n.mp-page:not(#\\#)\n\t.container\n\t.section-container\n\t.v3-row[data-imglayout='back']\n\t.item-container\n\t.item.has-image\n\t.value-container\n\t.name {\n\tfont-size: calc(var(--mp-u) * 1.4);\n\tfont-size: max(calc(var(--mp-u) * 1.4), 0.7em);\n\tfont-weight: 400;\n\tletter-spacing: 0.06em;\n\tline-height: 1.5;\n\ttext-transform: uppercase;\n\tcolor: var(--mp-text, #fff);\n}\n.mp-page:not(#\\#)\n\t.container\n\t.section-container\n\t.v3-row[data-imglayout='back']\n\t.item-container\n\t.item.has-image\n\t.value-container\n\t.value {\n\tfont-size: calc(var(--mp-u) * 1.32);\n\tfont-size: max(calc(var(--mp-u) * 1.32), 0.66em);\n\tfont-weight: 400;\n\tfont-variant-numeric: tabular-nums;\n\tmargin-top: calc(var(--mp-u) * 0.2);\n\tcolor: var(--mp-text, #fff);\n}\n.mp-page:not(#\\#)\n\t.container\n\t.section-container\n\t.v3-row[data-imglayout='back']\n\t.item-container\n\t.item.has-image\n\t.note-container\n\t.note {\n\tfont-size: calc(var(--mp-u) * 1.2);\n\tfont-size: max(calc(var(--mp-u) * 1.2), 0.6em);\n\tfont-weight: 300;\n\tline-height: 1.5;\n\tmargin-top: calc(var(--mp-u) * 0.2);\n\tcolor: var(--mp-text, #fff);\n\topacity: 0.82;\n}\n.mp-page:not(#\\#) .v3-row[data-imglayout='stack'] .item.has-image,\n.mp-page:not(#\\#) .v3-row:not([data-imglayout]) .item-container:not([data-cols='1']) .item.has-image {\n\tdisplay: flex;\n\tflex-direction: column;\n\talign-items: stretch;\n}\n.mp-page:not(#\\#) .v3-row[data-imglayout='stack'] .item.has-image .mp-item-image,\n.mp-page:not(#\\#)\n\t.v3-row:not([data-imglayout])\n\t.item-container:not([data-cols='1'])\n\t.item.has-image\n\t.mp-item-image {\n\tmargin-right: 0;\n\tmargin-bottom: 0.7em;\n}\n.mp-page:not(#\\#) .v3-row[data-imglayout='stack'] .item.has-image[data-imgpos='bottom'],\n.mp-page:not(#\\#)\n\t.v3-row:not([data-imglayout])\n\t.item-container:not([data-cols='1'])\n\t.item.has-image[data-imgpos='bottom'] {\n\tflex-direction: column-reverse;\n}\n.mp-page:not(#\\#) .v3-row[data-imglayout='stack'] .item.has-image[data-imgpos='bottom'] .mp-item-image,\n.mp-page:not(#\\#)\n\t.v3-row:not([data-imglayout])\n\t.item-container:not([data-cols='1'])\n\t.item.has-image[data-imgpos='bottom']\n\t.mp-item-image {\n\tmargin-bottom: 0;\n\tmargin-top: 0.7em;\n}\n.mp-page:not(#\\#) .v3-row[data-imglayout='stack'] .item.has-image .mp-item-image,\n.mp-page:not(#\\#) .v3-row:not([data-imglayout]) .item-container:not([data-cols='1']) .item.has-image .mp-item-image {\n\twidth: 100%;\n\theight: auto;\n\taspect-ratio: 3 / 4;\n\tbackground: transparent;\n\tborder-radius: 0;\n\tdisplay: flex;\n\talign-items: flex-end;\n\tjustify-content: center;\n}\n.mp-page:not(#\\#) .v3-row[data-imglayout='stack'] .item.has-image .mp-item-image .v3-img,\n.mp-page:not(#\\#) .v3-row:not([data-imglayout]) .item-container:not([data-cols='1']) .item.has-image .mp-item-image .v3-img {\n\twidth: 100%;\n\theight: 100%;\n\tobject-fit: contain;\n\tobject-position: bottom center;\n\tdisplay: block;\n}\n.mp-page:not(#\\#) .v3-row[data-imglayout='side'] .item.has-image,\n.mp-page:not(#\\#) .v3-row:not([data-imglayout]) .item-container[data-cols='1'] .item.has-image {\n\tdisplay: flex;\n\tflex-direction: row;\n\talign-items: flex-start;\n}\n.mp-page:not(#\\#)\n\t.v3-row[data-imglayout='side']\n\t.item-container:not([data-cols='1'])\n\t.item.has-image\n\t.mp-item-image {\n\twidth: 32%;\n\theight: auto;\n\taspect-ratio: 1 / 1;\n}\n.mp-page:not(#\\#) .v3-row[data-imgmargin] .item.has-image .mp-item-image {\n\tbox-sizing: border-box;\n}\n.mp-page:not(#\\#) .v3-row[data-imgmargin='1'] .item.has-image .mp-item-image { padding: calc(var(--mp-u) * 1); }\n.mp-page:not(#\\#) .v3-row[data-imgmargin='2'] .item.has-image .mp-item-image { padding: calc(var(--mp-u) * 2); }\n.mp-page:not(#\\#) .v3-row[data-imgmargin='3'] .item.has-image .mp-item-image { padding: calc(var(--mp-u) * 3); }\n.mp-page:not(#\\#) .container .section-container .section.v3-row[data-imgcorner='r'] .item-container .item.has-image .mp-item-image {\n\tborder-radius: calc(var(--mp-u) * 1.6);\n}\n.mp-page:not(#\\#) .container .section-container .section.v3-row[data-imgcorner='s'] .item-container .item.has-image .mp-item-image {\n\tborder-radius: 0;\n}\n.v3-root:not(.v3-legacy-doc):not(#\\#) .mp-page .v3-row[data-priceat] .item-container .item:not(.has-image) {\n\tdisplay: block;\n}\n.v3-root:not(.v3-legacy-doc):not(#\\#) .mp-page .v3-row[data-priceat] .item-container .item .item-body {\n\tdisplay: flex;\n\tflex-direction: column;\n\talign-items: stretch;\n}\n.v3-root:not(.v3-legacy-doc):not(#\\#) .mp-page .v3-row[data-priceat] .item-container .item .value-container {\n\tdisplay: contents;\n}\n.v3-root:not(.v3-legacy-doc):not(#\\#) .mp-page .v3-row[data-priceat] .item-container .item .value-container .value {\n\ttext-align: left;\n}\n.v3-root:not(.v3-legacy-doc):not(#\\#) .mp-page .v3-row[data-priceat] .item-container .item .value-container .name-wrapper::after {\n\tcontent: none;\n}\n.v3-root:not(.v3-legacy-doc):not(#\\#) .mp-page .v3-row[data-priceat='last'] .item-container .item .note-container {\n\torder: 1;\n}\n.v3-root:not(.v3-legacy-doc):not(#\\#) .mp-page .v3-row[data-priceat='last'] .item-container .item .value-container .value-wrapper {\n\torder: 2;\n}\n.v3-root:not(.v3-legacy-doc):not(#\\#) .mp-page .v3-row[data-priceat][data-align='c'] .item-container .item .item-body {\n\talign-items: center;\n\ttext-align: center;\n}\n.v3-root:not(.v3-legacy-doc):not(#\\#) .mp-page .v3-row[data-priceat][data-align='r'] .item-container .item .item-body {\n\talign-items: flex-end;\n\ttext-align: right;\n}\n.v3-root:not(.v3-legacy-doc):not(#\\#) .mp-page .v3-row[data-priceat][data-align='c'] .item-container .item .value-container .name-wrapper {\n\tjustify-content: center;\n}\n.v3-root:not(.v3-legacy-doc):not(#\\#) .mp-page .v3-row[data-priceat][data-align='r'] .item-container .item .value-container .name-wrapper {\n\tjustify-content: flex-end;\n}\n.v3-root:not(.v3-legacy-doc):not(#\\#) .mp-page .v3-row[data-priceat][data-align='c'] .item-container .item .value-container .value,\n.v3-root:not(.v3-legacy-doc):not(#\\#) .mp-page .v3-row[data-priceat][data-align='c'] .item-container .item .note-container .note {\n\ttext-align: center;\n}\n.v3-root:not(.v3-legacy-doc):not(#\\#) .mp-page .v3-row[data-priceat][data-align='r'] .item-container .item .value-container .value,\n.v3-root:not(.v3-legacy-doc):not(#\\#) .mp-page .v3-row[data-priceat][data-align='r'] .item-container .item .note-container .note {\n\ttext-align: right;\n}\n.mp-page:not(#\\#) .v3-row[data-imglayout='side'][data-valign='m'] .item.has-image,\n.mp-page:not(#\\#) .v3-row:not([data-imglayout])[data-valign='m'] .item-container[data-cols='1'] .item.has-image {\n\talign-items: center;\n}\n.mp-page:not(#\\#) .v3-row[data-imglayout='side'][data-valign='b'] .item.has-image,\n.mp-page:not(#\\#) .v3-row:not([data-imglayout])[data-valign='b'] .item-container[data-cols='1'] .item.has-image {\n\talign-items: flex-end;\n}","isOwner":false,"readOnly":true}

Gureum Cafe & Bar

Cafe Espresso

Hand Drip

Cocktail