/* ════════════════════════════════════════════════════════════════
theme-2026.css — 「청람(靑嵐)」 디자인 (2026-09-03, 시안 A 채택)
----------------------------------------------------------------
styles.css(구조·기능) 위에 얹는 유일한 스킨 레이어.
override-C.css(세리프 강제·금색)와 theme-cheongmyeong.css(투명화·인장)를
이 한 장으로 대체한다. HTML 시맨틱·스키마·script.js는 건드리지 않는다.
원칙
- 사진은 첫 화면(히어로)에만. .hero-bg가 GNB 하단까지만 덮고 지면색으로 녹는다.
- 액센트는 딥씨(--accent) 하나. 하늘(--accent-2)은 보조. 금색·인주 배지 없음.
- 인주 빨강은 信 글자에만.
- 헤더·푸터는 투명(조변 원칙). 글자색을 배경에 맞춰 바꿔 읽히게 한다.
- 제목 Noto Serif KR, 본문 Pretendard, 영문 눈썹 EB Garamond 이탤릭.
- 모바일 브레이크포인트(599·768·1023)는 styles.css 그대로. 여기서는 색·면·활자만.
════════════════════════════════════════════════════════════════ */
:root {
--font-display: 'Noto Serif KR', 'Nanum Myeongjo', serif;
--font-body: 'Pretendard Variable', 'Pretendard', 'Noto Sans KR', -apple-system, BlinkMacSystemFont, 'Apple SD Gothic Neo', 'Malgun Gothic', sans-serif;
--font-utility: 'EB Garamond', 'Noto Serif KR', serif;
--ground: #f2f5f8;
--card: #ffffff;
--line: #d9e2ea;
--line-strong: #c3d0dc;
--ink: #10203a;
--ink-soft: #44546a;
--ink-light: #7b8899;
--accent: #0b4a76;
--accent-2: #2d7fc0;
--accent-soft: #e3eef7;
--accent-soft-2: #d3e4f3;
--seal: #c8432f;
--seal-on-dark: #ffb9ad;
--star: #e2a92b;
--r-sm: 10px;
--r-md: 14px;
--r-lg: 18px;
--shadow-card: 0 1px 2px rgba(16, 32, 58, 0.04);
--shadow-card-hover: 0 14px 30px -14px rgba(11, 74, 118, 0.32);
/* styles.css 변수도 새 팔레트로 재정의 — 모달·패널 등 손대지 않은 부품이 자동으로 따라온다 */
--primary-color: #10203a;
--secondary-color: #1f3554;
--accent-color: #2d7fc0;
--accent-deep: #0b4a76;
--accent-soft: rgba(45, 127, 192, 0.12);
--text-primary: #10203a;
--text-secondary: #44546a;
--text-light: #7b8899;
--text-body: #3a4a60;
--border-color: #d9e2ea;
--hover-bg: #eaf1f7;
}
/* ───────────────────────────── 0. 지면·활자 ───────────────────────────── */
html { color-scheme: light; }
body {
font-family: var(--font-body) !important;
background: var(--ground) !important;
background-image: none !important;
color: var(--ink);
-webkit-font-smoothing: antialiased;
}
/* 고정 배경 사진 폐기 — 사진은 .hero-bg가 히어로에만 그린다 */
body::before { display: none !important; }
body::after { display: none !important; }
::selection { background: rgba(45, 127, 192, 0.22); }
a:focus-visible,
button:focus-visible,
[role="button"]:focus-visible {
outline: 2px solid var(--accent-2);
outline-offset: 2px;
border-radius: 4px;
}
/* 信 — 인주는 이 글자에만 */
.hanja-shin { color: var(--seal) !important; }
/* ───────────────────────────── 1. 히어로 사진 ───────────────────────────── */
/* body 직계. 높이는 index.html 하단의 소형 스크립트가 GNB 하단 기준으로 --hero-h를 넣어 준다.
스크립트가 못 돌아도 폴백 높이 + 긴 페이드 덕에 어색하지 않다. */
.hero-bg {
position: absolute;
top: 0;
left: 0;
width: 100%;
height: var(--hero-h, 760px);
z-index: 0;
pointer-events: none;
background-image: url('background-mobile.png');
background-image: -webkit-image-set(url('background-mobile.webp') type('image/webp'), url('background-mobile.png') type('image/png'));
background-image: image-set(url('background-mobile.webp') type('image/webp'), url('background-mobile.png') type('image/png'));
background-size: cover;
background-position: center top;
background-repeat: no-repeat;
/* 2026-10-09 하늘 «진한 맑은 청람»(랩2 §3-H3 G · 조변 «너 추천으로»): 밝기를 올리면 아래 바탕이 탁해 보여(E→D 경위)
밝기는 조금 낮추고 채도·대비만 올린다. 색은 ::after 가 청람으로 «물들이고»(color · 명암은 사진 그대로) ::before 가 위쪽을 짙게 곱한다.
🚫 hue-rotate 를 쓰지 않는다 — 필터가 물들이기 층까지 돌려 하늘이 보랏빛이 된다(랩 첫 시험 #5287eb). */
filter: saturate(1.4) brightness(.96) contrast(1.09);
/* 아래는 바탕색을 덧칠하지 않고 사진 자체를 투명하게 녹인다 — 밝기 필터가 덧칠 층까지 밝혀
끝 색이 바탕보다 밝아지고 가로 경계가 생기던 것(폰 · 밝기 단차 22 → 3) */
-webkit-mask-image: linear-gradient(180deg, #000 0%, #000 58%, rgba(0, 0, 0, .15) 86%, transparent 100%);
mask-image: linear-gradient(180deg, #000 0%, #000 58%, rgba(0, 0, 0, .15) 86%, transparent 100%);
contain: strict;
}
/* 위: 청람으로 곱해 깊이를 준다(헤더·제목 흰 글자도 함께 또렷해진다) */
.hero-bg::before {
content: '';
position: absolute;
inset: 0;
background: linear-gradient(180deg, rgba(16, 74, 128, 0.55) 0%, rgba(16, 74, 128, 0.26) 30%, rgba(16, 74, 128, 0) 62%);
mix-blend-mode: multiply;
}
/* 위: 하늘을 청람 빛으로 물들인다(색만 바꾸고 명암은 사진 그대로) */
.hero-bg::after {
content: '';
position: absolute;
inset: 0;
pointer-events: none;
background: linear-gradient(180deg, rgba(12, 82, 136, .6) 0%, rgba(12, 82, 136, .42) 40%, rgba(12, 82, 136, 0) 72%);
mix-blend-mode: color;
}
/* 폰·태블릿: 사진을 140px 더 길게, 사라지는 구간을 늦게 — 건물이 영상 카드 뒤에서 너무 빨리 사라지던 것(2026-10-09) */
@media (max-width: 1023px) {
.hero-bg {
height: calc(var(--hero-h, 760px) + 140px);
-webkit-mask-image: linear-gradient(180deg, #000 0%, #000 62%, rgba(0, 0, 0, .2) 88%, transparent 100%);
mask-image: linear-gradient(180deg, #000 0%, #000 62%, rgba(0, 0, 0, .2) 88%, transparent 100%);
}
/* 폰은 사진이 세로로 길어 같은 % 가 더 아래까지 간다 → 짙게 하는 구간을 조금 짧게 */
.hero-bg::before {
background: linear-gradient(180deg, rgba(16, 74, 128, 0.52) 0%, rgba(16, 74, 128, 0.22) 26%, rgba(16, 74, 128, 0) 52%);
}
.hero-bg::after {
background: linear-gradient(180deg, rgba(12, 82, 136, .6) 0%, rgba(12, 82, 136, .4) 34%, rgba(12, 82, 136, 0) 62%);
}
}
@media (min-width: 1024px) {
.hero-bg {
height: var(--hero-h, 880px);
background-image: url('background-desktop.jpg');
background-image: -webkit-image-set(url('background-desktop.webp') type('image/webp'), url('background-desktop.jpg') type('image/jpeg'));
background-image: image-set(url('background-desktop.webp') type('image/webp'), url('background-desktop.jpg') type('image/jpeg'));
background-position: center 32%;
image-rendering: high-quality;
}
}
/* 헤더·본문·푸터는 사진 위 */
.header,
.main-content,
.footer { position: relative; z-index: 1; }
/* ───────────────────────────── 2. 헤더 — 투명, 흰 글자 ───────────────────────────── */
.header {
position: relative !important; /* sticky 해제 — 흰 글자는 사진 위에서만 읽힌다 */
top: auto;
background: transparent !important;
border-bottom: none !important;
box-shadow: none !important;
backdrop-filter: none !important;
-webkit-backdrop-filter: none !important;
padding: 0.7rem 0;
}
.header-container { max-width: 1180px; padding: 0 1.25rem; }
.header-left {
color: rgba(255, 255, 255, 0.86);
text-shadow: 0 1px 10px rgba(6, 18, 34, 0.55);
padding: 0.35rem 0.5rem;
margin: -0.35rem -0.5rem;
border-radius: 8px;
}
.header-left:hover {
background: rgba(255, 255, 255, 0.12);
transform: none;
}
.header-left strong {
font-family: var(--font-display);
color: #fff;
font-weight: 700;
letter-spacing: -0.01em;
}
.header-left .hanja-shin { color: #ffd3cb !important; }
.header-left .website-info {
font-family: var(--font-utility);
font-style: italic;
font-weight: 400;
font-size: 0.78rem;
letter-spacing: 0.01em;
color: rgba(255, 255, 255, 0.84);
}
.browser-tip {
color: rgba(255, 255, 255, 0.85);
text-shadow: 0 1px 8px rgba(6, 18, 34, 0.5);
}
.browser-tip:hover { background: rgba(255, 255, 255, 0.14); color: #fff; }
/* ───────────────────────────── 3. 제호 — 흰 세리프 ───────────────────────────── */
.main-content {
max-width: 1180px;
padding: 1.4rem 1.25rem 3.5rem;
/* styles.css의 overflow:hidden은 main을 스크롤 컨테이너로 만들어 GNB sticky를 무력화했다(라이브 실측 2026-09-03).
clip은 잘라내기만 하고 스크롤 컨테이너를 만들지 않아 sticky가 산다. 미지원 브라우저는 hidden으로 폴백(종전과 동일). */
overflow: hidden;
overflow: clip;
}
.site-title {
padding: 1.4rem 0 0.4rem;
margin-bottom: 1.2rem;
}
.site-title h1 {
font-family: var(--font-display);
font-size: clamp(2.2rem, 5.2vw, 3.3rem);
font-weight: 700;
color: #fff;
letter-spacing: -0.02em;
line-height: 1.15;
text-shadow: 0 2px 22px rgba(6, 18, 34, 0.45), 0 1px 3px rgba(6, 18, 34, 0.25);
margin-bottom: 0.6rem;
}
/* 信 — 로고의 信 사각(금빛 낙관)으로 (2026-10-09 조변 «A가 굿 · 그대로 반영» · 랩2 §3-G 시안 A)
🔒 HTML 은 그대로다: 법률사무소 信
. 글자 信 은 DOM 에 남겨(검색·AI·화면 읽기·복사)
색만 투명하게 하고, 같은 자리에 로고 信 을 벡터로 그린다. 벡터는 shin-assets logo-full.png 의 信 사각(두 톤 #946F17 | #6B4D21)을
4배로 키워 윤곽을 딴 것이다(원본 SVG: asset/shin-mark-gold.svg · 여기에는 깜빡임 없이 바로 그리려고 data URI 로 넣었다).
html 접두는 styles.css 의 옛 信 규칙 다섯 겹(붓 웹폰트·그라데이션·shimmer·hover 확대)을 확실히 이기기 위한 것. */
html .site-title h1 .hanja-shin {
position: relative;
display: inline-block;
font-family: inherit !important;
font-size: 1em !important;
font-weight: 700 !important;
line-height: 1 !important;
width: 1.46em;
height: 1.46em;
margin-left: .02em;
top: 0;
vertical-align: -0.34em;
border-radius: .06em;
overflow: hidden;
color: transparent !important;
-webkit-text-fill-color: transparent !important;
text-shadow: none !important;
background: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 412 412'%3E%3Crect width='207' height='412' fill='%23946F17'/%3E%3Crect x='207' width='205' height='412' fill='%236B4D21'/%3E%3Cpath fill='%23fff' fill-rule='evenodd' d='M361.8 209.8 360.5 208.5 357.8 207.2 351.0 205.8 345.2 206.0 341.0 207.0 337.8 207.2 333.8 209.5 331.8 208.8 330.5 209.0 329.2 210.5 328.0 211.0 325.5 211.0 321.0 212.0 318.8 212.0 315.0 213.0 311.8 213.2 309.5 214.0 308.0 214.0 304.8 215.0 303.2 215.0 300.0 216.0 297.5 216.2 295.8 217.0 290.2 218.0 287.5 219.0 286.2 219.0 283.8 220.0 281.5 220.2 280.8 220.8 278.8 221.0 276.2 222.0 274.2 222.2 272.8 223.0 271.5 223.0 270.0 223.8 264.8 225.0 263.2 225.8 260.5 226.2 250.5 229.8 249.5 229.5 247.8 227.2 246.8 223.5 245.0 221.0 242.5 218.5 240.2 217.2 239.0 222.8 238.0 225.0 235.0 229.2 229.2 235.2 227.2 238.5 223.2 242.0 211.0 249.5 208.0 252.5 207.0 254.2 206.5 258.2 207.0 259.8 207.0 262.2 208.0 266.5 208.2 269.8 209.0 272.5 209.0 274.5 210.0 278.0 210.0 280.0 211.0 283.2 211.2 286.0 213.0 292.2 213.0 293.5 214.0 296.0 214.2 298.2 213.5 299.0 210.2 300.2 209.2 301.5 209.2 303.0 208.5 304.0 206.5 304.2 205.8 305.0 204.2 309.0 204.2 310.0 205.0 311.5 206.8 313.2 209.5 314.8 219.2 317.8 220.5 317.8 224.0 318.8 229.0 318.8 232.5 318.0 234.5 318.0 236.8 317.5 240.8 315.8 251.2 309.0 258.5 305.8 273.8 300.8 275.0 300.8 277.8 299.8 282.8 298.8 286.2 298.5 300.2 298.5 310.0 299.0 337.2 303.8 355.0 308.8 362.2 309.8 367.8 309.5 370.8 306.8 376.8 300.0 378.8 298.8 381.5 298.8 382.2 299.2 383.2 299.2 384.8 298.0 384.8 295.8 381.8 291.8 382.5 290.8 383.2 290.5 387.0 290.5 387.5 289.8 387.2 287.5 384.8 286.2 376.8 283.8 373.8 282.2 367.0 280.0 366.0 280.0 359.5 278.0 358.2 278.0 356.5 277.2 354.0 277.0 347.5 275.2 332.2 272.2 331.0 271.8 329.5 270.2 330.0 269.0 337.0 260.2 341.5 255.8 346.5 251.8 352.8 245.8 356.8 241.2 358.8 238.2 360.5 234.2 361.5 230.2 362.8 221.5 362.8 212.5ZM294.5 254.2 294.2 257.2 279.2 271.0 273.0 276.0 269.5 278.0 264.8 280.0 263.5 280.0 260.0 281.0 258.2 281.0 252.8 283.2 251.8 284.0 246.8 284.2 246.0 283.8 244.8 280.8 244.8 278.8 245.8 274.8 248.2 271.8 251.2 269.8 261.0 264.8 262.2 264.5 270.0 260.8 270.8 260.8 271.8 260.0 284.2 255.0 288.0 253.8 293.8 253.8ZM363.2 164.5 362.0 164.2 360.8 164.8 358.0 165.0 351.0 164.8 350.5 164.2 350.5 162.2 349.2 160.0 345.8 157.2 343.2 157.0 341.5 157.5 337.2 154.0 332.8 153.0 332.2 152.5 332.2 151.2 331.5 150.8 325.8 150.8 310.8 155.2 299.0 162.0 293.2 164.2 292.8 164.8 290.5 165.2 290.0 165.8 278.5 169.0 276.8 169.0 272.8 170.0 267.8 170.2 265.5 170.8 253.5 171.0 232.2 170.0 223.8 169.0 220.2 169.0 216.0 168.2 212.8 168.2 209.2 170.0 204.0 175.2 202.2 178.0 202.0 180.5 202.2 181.2 203.8 182.8 206.0 184.0 209.0 187.2 211.8 191.5 214.0 196.0 216.2 199.5 216.8 199.8 222.5 199.8 224.8 200.2 229.8 200.5 234.8 199.8 236.5 199.0 239.5 198.5 241.5 198.8 245.2 200.8 262.2 200.8 267.0 200.5 271.2 199.8 277.5 199.5 287.5 199.8 294.8 196.8 297.5 197.8 299.0 197.8 308.8 194.5 315.0 191.8 315.8 191.8 326.8 185.8 339.5 180.8 342.0 180.8 342.8 181.2 343.8 181.2 348.0 177.0 358.0 172.5 362.2 169.5 363.2 166.8ZM350.5 116.0 349.8 114.5 348.2 113.0 344.5 110.2 338.0 111.8 335.2 111.8 332.5 111.0 330.8 108.5 329.0 107.2 327.5 107.2 325.5 109.0 321.0 109.0 319.8 108.0 319.5 106.5 319.0 106.0 318.0 106.0 315.2 107.2 311.8 109.5 311.2 109.5 309.2 107.5 304.8 110.5 295.5 117.8 292.5 119.0 287.5 120.2 286.2 121.0 285.2 121.0 284.2 121.5 282.0 123.8 275.2 123.5 271.8 125.0 262.8 125.0 249.8 126.8 247.8 126.8 246.2 126.2 242.5 126.2 237.2 127.0 226.8 127.2 218.8 128.2 216.8 129.0 214.2 129.2 207.8 131.5 206.2 133.2 205.2 135.5 205.0 139.0 206.2 140.5 208.8 141.8 212.0 144.2 214.8 148.8 217.2 154.0 218.8 155.2 223.8 154.8 224.2 153.5 225.2 152.5 235.0 151.8 244.0 151.8 258.2 150.8 263.8 149.8 266.5 149.8 272.0 148.8 274.8 148.8 280.0 147.8 282.2 147.8 286.8 146.8 288.8 146.8 315.2 141.5 318.8 140.5 328.0 136.5 338.2 130.8 347.8 124.0 349.5 122.0 350.2 120.2 350.8 117.8ZM411.8 70.8 407.2 69.0 404.0 69.0 400.8 68.0 397.8 68.0 394.8 67.0 391.5 67.0 388.5 66.0 385.5 66.0 382.5 65.0 379.2 65.0 376.2 64.0 373.0 64.0 370.0 63.0 366.5 63.0 363.2 62.0 359.0 62.0 354.5 61.0 336.2 60.5 331.2 61.0 322.0 61.0 319.2 61.8 315.2 62.0 314.8 61.5 314.8 60.2 316.5 58.2 319.5 56.8 325.5 51.8 327.0 51.2 329.2 51.8 332.2 49.5 334.8 46.2 335.8 44.0 335.8 41.8 333.8 36.8 330.8 32.8 327.0 29.0 318.2 22.0 309.0 16.8 306.5 14.8 303.0 10.8 299.0 7.0 298.5 7.0 297.5 6.0 295.2 5.0 294.5 4.2 287.0 0.8 286.8 0.0 253.8 0.0 254.5 1.5 254.0 5.0 258.0 13.5 260.0 16.8 260.0 19.0 259.0 20.5 259.0 21.5 260.2 22.8 262.5 23.8 265.8 26.8 267.0 29.2 267.0 35.8 266.0 37.8 266.0 39.0 265.0 40.5 265.0 41.5 264.0 43.0 264.0 43.8 263.0 45.2 263.0 46.0 262.0 47.5 260.2 51.8 260.2 53.2 261.0 54.8 261.0 57.0 260.0 58.5 260.0 59.5 259.0 61.2 259.0 62.0 253.0 73.2 253.0 74.2 251.0 75.8 247.8 76.0 246.2 76.8 243.0 77.0 240.5 78.0 237.8 78.0 235.0 79.0 232.2 79.0 229.8 80.0 227.0 80.0 224.5 81.0 222.2 81.0 219.8 82.0 217.5 82.0 211.8 84.8 210.2 84.0 208.2 84.0 181.2 92.0 178.0 92.0 177.2 91.2 177.5 87.2 183.5 78.5 184.8 75.0 185.8 69.2 186.5 67.5 186.5 66.0 184.8 61.2 184.5 59.5 183.8 58.2 183.0 54.2 183.8 50.5 187.0 45.2 187.8 40.8 190.5 37.8 191.2 36.2 191.8 30.8 192.8 27.8 192.8 26.2 193.8 22.2 193.5 20.5 192.2 18.5 192.2 17.0 194.0 14.2 200.5 6.2 201.5 4.0 201.8 1.5 201.5 0.0 175.2 0.0 173.8 1.8 166.2 7.5 163.0 10.5 149.2 28.8 143.2 38.8 139.0 47.2 139.0 48.0 138.0 49.5 138.0 50.2 137.2 51.2 134.0 59.2 131.0 65.2 127.0 72.0 122.0 79.0 111.0 92.2 88.2 115.0 79.0 125.5 66.5 138.8 62.2 144.0 57.0 151.5 50.8 161.8 43.0 173.2 38.8 178.8 33.2 184.5 33.0 185.2 34.8 187.5 35.0 190.2 35.5 190.8 36.2 190.8 39.0 189.8 46.2 184.8 48.2 183.8 52.2 182.8 58.5 182.8 59.5 183.8 61.0 183.8 63.0 182.8 65.2 182.8 66.0 183.2 66.2 185.5 66.8 185.8 69.0 185.8 71.0 185.0 76.0 184.5 80.5 181.5 89.2 172.2 93.5 168.8 95.0 168.2 99.2 168.2 102.5 166.8 111.2 163.8 117.0 160.8 127.0 152.5 128.8 151.8 130.2 152.5 130.2 164.8 129.0 168.5 128.8 191.2 128.0 194.5 128.0 196.5 127.2 198.2 126.2 204.0 126.0 209.5 125.0 216.0 125.0 219.8 124.0 225.5 124.0 229.5 123.0 241.2 123.2 258.5 125.0 270.8 126.2 287.0 127.0 290.2 130.2 297.8 134.0 302.5 134.0 303.8 133.5 304.5 133.5 306.0 134.0 306.5 141.2 308.8 144.5 311.0 148.5 314.5 152.5 315.0 153.5 315.5 154.8 316.8 155.5 318.2 156.5 318.8 160.0 318.8 162.5 317.8 165.2 315.2 166.0 313.8 165.8 310.2 166.8 308.5 169.8 305.2 170.8 303.2 169.5 296.2 169.0 295.8 168.5 294.0 165.5 290.5 164.8 288.8 163.8 281.8 162.8 278.5 162.8 277.0 160.8 268.5 160.0 257.5 160.8 245.2 164.5 228.2 164.8 219.5 165.8 206.8 165.8 199.0 166.8 179.2 167.8 175.0 168.5 173.8 170.5 167.8 171.8 161.5 171.8 156.5 171.0 153.0 170.8 148.0 172.8 143.8 172.8 139.0 172.0 137.2 171.8 135.0 170.8 131.8 169.8 122.5 170.8 115.5 171.8 113.5 172.8 112.5 173.5 112.2 175.0 113.2 176.0 115.0 177.2 118.8 179.5 121.2 183.8 124.5 185.8 125.5 186.8 125.5 189.8 124.0 197.5 122.8 200.0 121.8 201.2 121.8 207.2 119.8 208.2 119.8 223.8 113.8 224.8 113.8 229.5 111.8 234.5 110.5 236.0 109.8 253.0 105.8 254.8 105.8 263.5 103.8 266.2 103.5 268.5 102.8 270.0 102.8 273.2 101.8 276.0 101.5 291.5 96.5 295.5 94.0 298.8 92.8 312.0 89.8 319.5 89.0 324.0 90.8 335.2 91.8 337.2 92.5 340.0 92.8 341.5 93.5 343.5 93.8 350.0 95.8 351.8 95.8 356.8 96.8 368.0 97.0 373.5 98.2 383.2 97.8 388.2 95.8 393.0 89.5 394.8 87.8 397.2 86.2 396.5 85.2 393.8 83.2 393.5 82.0 394.5 81.0 401.2 80.8 406.5 78.0 411.8 77.8 411.8 76.0 410.8 76.0 407.8 73.8 407.8 72.8 408.8 72.0 411.8 72.2Z'/%3E%3Cpath fill='%23fff' fill-rule='evenodd' d='M196.5 346.8 196.0 347.2 196.0 389.2 205.8 389.5 206.0 347.2 205.5 346.8ZM281.2 348.2 278.8 347.0 277.8 347.0 276.0 346.2 270.5 346.2 268.8 347.0 267.8 347.0 262.8 350.0 262.0 349.2 262.2 347.8 261.5 346.8 252.2 346.8 252.2 389.5 262.0 389.5 262.5 389.0 262.8 360.2 263.8 358.5 265.5 356.8 267.2 355.8 269.0 355.5 272.2 355.8 274.2 356.8 275.8 358.2 277.0 361.0 277.2 389.2 287.5 389.2 287.5 358.8 286.8 355.5 285.5 352.8 284.5 351.2ZM115.8 331.0 115.2 331.8 115.5 389.2 125.8 389.2 125.8 361.8 126.8 358.8 128.2 357.0 130.5 355.8 134.0 355.5 136.2 356.0 137.8 357.0 139.2 358.8 140.0 360.5 140.2 389.2 150.2 389.5 150.8 388.8 150.8 360.5 149.8 355.2 148.5 352.5 147.2 350.8 144.0 348.0 142.0 347.0 139.0 346.2 134.2 346.2 131.5 347.0 126.2 350.0 125.8 349.5 125.8 331.2 125.0 330.8ZM196.0 330.8 195.8 338.2 196.2 338.8 206.0 338.5 206.2 331.8 205.5 330.5ZM59.2 331.0 53.5 330.2 49.5 330.2 44.5 331.0 41.5 332.0 39.0 333.2 36.2 335.2 34.2 337.5 32.2 340.8 31.0 345.2 31.0 351.0 32.2 355.5 34.8 359.2 37.5 361.5 42.0 363.5 46.5 364.5 50.5 364.8 56.0 365.8 58.0 366.8 60.0 368.8 61.0 372.2 60.2 375.8 59.0 377.5 57.0 379.0 53.8 380.0 44.5 379.8 39.5 378.0 36.5 375.8 35.0 376.0 29.2 381.8 29.0 382.5 32.2 385.5 36.2 387.8 42.2 389.5 48.0 390.0 55.0 389.8 59.2 388.8 62.2 387.5 65.8 385.2 68.5 382.5 70.8 378.5 71.8 374.2 71.8 370.0 70.5 364.8 68.5 361.2 66.2 359.0 62.8 357.0 56.0 355.2 52.0 355.0 46.8 354.0 44.2 352.8 42.8 351.2 41.8 349.5 41.8 345.8 42.8 343.5 44.5 341.8 46.2 340.8 48.8 340.0 54.5 340.0 58.0 340.8 63.2 343.8 69.5 337.8 69.8 336.8 66.8 334.2 62.5 332.0 61.5 332.0Z'/%3E%3C/svg%3E") center / 100% 100% no-repeat !important;
-webkit-background-clip: border-box !important;
background-clip: border-box !important;
box-shadow: 0 .18em .55em rgba(6, 18, 34, .32), 0 0 0 1px rgba(255, 255, 255, .18) inset;
animation: none !important;
filter: none !important;
transition: transform .35s ease;
}
html .site-title h1 .hanja-shin::before { content: none; }
/* 금박에 빛이 한 번 스치는 느낌 — 7초에 한 번 */
html .site-title h1 .hanja-shin::after {
content: "";
position: absolute;
inset: 0;
pointer-events: none;
background: linear-gradient(115deg, transparent 35%, rgba(255, 255, 255, .28) 50%, transparent 65%) no-repeat;
background-size: 250% 100%;
background-position: 120% 0;
animation: shin-mark-sheen 7s ease-in-out 1.2s infinite;
}
@keyframes shin-mark-sheen {
0%, 70% { background-position: 120% 0; }
100% { background-position: -120% 0; }
}
/* 누르면 놀이광장 문(이스터에그) — 그 신호로 살짝 기운다 */
html .site-title h1 .hanja-shin:hover { transform: rotate(-3deg) scale(1.04); filter: none !important; text-shadow: none !important; }
@media (prefers-reduced-motion: reduce) {
html .site-title h1 .hanja-shin::after { animation: none; }
html .site-title h1 .hanja-shin { transition: none; }
}
}
.site-tagline {
font-family: var(--font-body);
font-size: clamp(0.95rem, 1.6vw, 1.1rem);
font-weight: 500;
color: rgba(255, 255, 255, 0.94);
text-shadow: 0 1px 12px rgba(6, 18, 34, 0.55);
margin: 0 0 0.35rem;
}
.site-subtitle {
font-family: var(--font-utility);
font-style: italic;
font-weight: 400;
font-size: 0.8rem;
letter-spacing: 0.16em;
text-transform: uppercase;
color: rgba(255, 255, 255, 0.78);
text-shadow: 0 1px 10px rgba(6, 18, 34, 0.5);
margin: 0;
}
/* ───────────────────────────── 4. 홍보영상 ───────────────────────────── */
.promo-video-hero { max-width: 860px; margin: 0.6rem auto 1.9rem; padding: 0 0.25rem; }
.promo-video-frame {
position: relative;
border-radius: var(--r-lg);
overflow: hidden;
background: #0b1f2e;
border: 1px solid rgba(255, 255, 255, 0.55);
box-shadow: 0 1px 2px rgba(6, 18, 34, 0.2), 0 24px 60px -20px rgba(6, 18, 34, 0.55);
cursor: pointer;
}
.promo-video-frame.is-playing { cursor: default; }
.promo-video-frame video { width: 100%; height: auto; aspect-ratio: 16 / 9; display: block; object-fit: cover; }
.promo-video-play {
position: absolute; top: 50%; left: 50%; transform: translate(-50%, -50%);
width: 56px; height: 56px; border: none; border-radius: 50%; cursor: pointer;
background: rgba(255, 255, 255, 0.93);
box-shadow: 0 2px 14px rgba(0, 0, 0, 0.3);
display: flex; align-items: center; justify-content: center;
transition: opacity .2s ease, background .2s ease;
}
.promo-video-play::after {
content: ""; width: 0; height: 0; margin-left: 4px;
border-left: 15px solid #0f2937;
border-top: 9px solid transparent; border-bottom: 9px solid transparent;
}
.promo-video-play::before {
content: ""; position: absolute; inset: -6px; border-radius: 50%;
border: 2px solid rgba(255, 255, 255, 0.75);
animation: promo-pulse 2.4s ease-out infinite;
pointer-events: none;
}
@keyframes promo-pulse {
0% { transform: scale(1); opacity: 0.75; }
70%, 100% { transform: scale(1.55); opacity: 0; }
}
.promo-video-play:hover { background: #fff; }
.promo-video-play.hidden { display: none; }
.promo-video-cap {
text-align: center;
margin-top: 0.75rem;
font-family: var(--font-body);
font-size: 0.9rem;
font-weight: 500;
color: var(--ink-soft);
text-shadow: 0 1px 6px rgba(255, 255, 255, 0.9), 0 0 14px rgba(255, 255, 255, 0.7);
}
.promo-video-cap b { color: var(--accent); font-weight: 700; }
@media (max-width: 640px) {
.promo-video-hero { margin: 0.3rem auto 1.4rem; }
.promo-video-cap { font-size: 0.82rem; }
.promo-video-play { width: 46px; height: 46px; }
.promo-video-play::after { border-left-width: 12px; border-top-width: 7px; border-bottom-width: 7px; }
}
/* ───────────────────────────── 5. GNB — 유리 막대 하나 ───────────────────────────── */
.gnb-wrapper {
top: 0 !important; /* 헤더가 더 이상 sticky가 아니므로 맨 위에 붙는다 */
background: rgba(255, 255, 255, 0.86) !important;
backdrop-filter: blur(12px);
-webkit-backdrop-filter: blur(12px);
border: 1px solid rgba(255, 255, 255, 0.75);
border-radius: 14px;
box-shadow: 0 8px 24px -12px rgba(16, 32, 58, 0.28);
padding: 0.3rem 0.75rem;
margin-bottom: 2.6rem;
font-family: var(--font-body);
}
.gnb-wrapper.scrolled {
background: rgba(255, 255, 255, 0.94) !important;
border-color: var(--line);
box-shadow: 0 10px 28px -14px rgba(16, 32, 58, 0.32);
}
.gnb-link {
font-family: var(--font-body);
font-size: 0.95rem;
font-weight: 600;
color: var(--ink-soft);
border-radius: 8px;
padding: 0.42rem 0.75rem;
}
.gnb-link:hover,
.gnb-link.active {
color: var(--accent);
background: var(--accent-soft-2);
box-shadow: none;
}
.gnb-link::after { background: var(--accent-2); height: 2px; bottom: 2px; }
.gnb-more-hint { color: var(--accent); }
.gnb-filters { border-left: 1px solid var(--line); }
.gnb-filter-btn {
font-family: var(--font-body);
color: var(--accent);
font-weight: 600;
border-radius: 999px;
}
.gnb-filter-btn:hover { background: var(--accent-soft-2); border-color: transparent; box-shadow: none; }
.gnb-filter-btn.active { background: var(--accent); border-color: var(--accent); color: #fff; box-shadow: none; }
.gnb-filter-btn i[style] { color: var(--star) !important; }
.reset-order-btn i { color: var(--accent-2); }
@media (max-width: 1023px) {
/* styles.css 성능 블록이 흰 0.78 !important를 박는다 — 유리 대신 불투명 흰색으로 통일 */
.gnb-wrapper { background: rgba(255, 255, 255, 0.94) !important; }
}
@media (max-width: 768px) {
.gnb-wrapper { padding: 0.25rem 0.5rem; margin-bottom: 2rem; }
.gnb-link { font-size: 0.88rem; padding: 0.4rem 0.55rem; }
}
/* ───────────────────────────── 6. 섹션 헤더 — 눈썹 + 세리프 + 헤어라인 ───────────────────────────── */
/* ⚠️ 영상 섹션(section.promo-video-hero)은 제외 — 이 규칙에 걸리면 margin:auto 중앙정렬이 0으로 눌려 왼쪽으로 쏠린다 (2026-09-03 조변 지적으로 발견) */
.main-content > section:not(.promo-video-hero),
.main-content > div[id$="Section"] { margin: 0 0 3.2rem !important; }
.section-header {
display: flex;
flex-wrap: wrap;
align-items: flex-end;
justify-content: space-between;
gap: 0.4rem 1rem;
margin-bottom: 1.15rem;
padding: 0 0 0.75rem;
background: none !important;
box-shadow: none !important;
border-radius: 0;
border-bottom: 1px solid var(--line);
}
.section-header::after { display: none; }
.section-header h2 {
display: block;
font-family: var(--font-display);
font-size: clamp(1.25rem, 2.4vw, 1.55rem);
font-weight: 700;
letter-spacing: -0.015em;
line-height: 1.25;
color: var(--ink);
text-shadow: none;
white-space: normal;
}
/* 세로 막대·信 인장 폐기. data-eyebrow가 있는 제목만 영문 눈썹을 단다(DOM 텍스트 아님 — 색인 무영향) */
.section-header h2::before { display: none; }
.section-header h2[data-eyebrow]::before {
content: attr(data-eyebrow);
display: block;
width: auto;
height: auto;
background: none;
box-shadow: none;
border-radius: 0;
font-family: var(--font-utility);
font-style: italic;
font-weight: 400;
font-size: 0.78rem;
letter-spacing: 0.18em;
text-transform: uppercase;
color: var(--accent); /* 2026-09-27 낙관과 함께 — 옅은 하늘(0.74rem)은 폰에서 거의 안 보였다 */
margin-bottom: 0.3rem;
line-height: 1.2;
}
.section-header h2 i { display: none; }
/* ─── 6-1. 섹션 낙관 (2026-09-27 조변 채택 · 랩2 시안 C + 선 그리기) ───
h2 의 data-hanja 한 글자를 먹빛 백문인으로 찍는다(法 人 問 新 器 茶 路 · 인주 빨강은 信에만).
제목 글자·DOM 은 그대로 — 가상 요소이고, 화면 읽기 프로그램에는 빈 대체 글(/ "")을 준다.
움직임은 index.html 머리의 작은 스크립트가 html.hd-anim 을 붙였을 때만. 없으면 처음부터 완성된 모양. */
.section-header { position: relative; }
.section-header h2[data-hanja] { position: relative; padding-left: 2.95rem; }
.section-header h2[data-hanja]::after {
content: attr(data-hanja);
content: attr(data-hanja) / "";
position: absolute; left: 0; bottom: 0.02em;
width: 2.1rem; height: 2.1rem;
display: grid; place-items: center;
font-family: var(--font-display); font-weight: 700; font-size: 1.28rem; line-height: 1;
color: #fff; background: var(--accent); border-radius: 3px;
box-shadow: inset 0 0 0 2px var(--accent), inset 0 0 0 3px rgba(255, 255, 255, 0.55);
transform: rotate(-2.5deg);
}
html.hd-anim .section-header { border-bottom-color: transparent; }
html.hd-anim .section-header::after {
display: block; content: ""; position: absolute; left: 0; right: 0; bottom: -1px;
height: 1px; border-radius: 0; background: var(--line);
transform: scaleX(0); transform-origin: left;
transition: transform 1.2s cubic-bezier(.2, .7, .2, 1) .75s; /* 도장 → 받침선 → 옅은 선 (2026-09-28) */
}
html.hd-anim .section-header.in-view::after { transform: scaleX(1); }
/* 받침선 (2026-09-28 조변 «적용하자» · 랩2 §3-F): 도장 폭만큼의 딥씨 2px 가 도장 바로 아래 가는 선 위에 앉는다.
전문분야 랜딩의 «왼쪽 40px 딥씨» 밑줄과 같은 말투 · 낙관이 없는 제목(필터·즐겨찾기)에는 없다. */
.section-header:has(h2[data-hanja])::before {
content: ""; position: absolute; left: 0; bottom: -1px; z-index: 1;
width: 2.1rem; height: 2px; background: var(--accent);
}
html.hd-anim .section-header:has(h2[data-hanja])::before {
transform: scaleX(0); transform-origin: left;
transition: transform .45s cubic-bezier(.2, .7, .2, 1) .55s;
}
html.hd-anim .section-header.in-view:has(h2[data-hanja])::before { transform: scaleX(1); }
html.hd-anim .section-header h2[data-eyebrow]::before {
opacity: 0; letter-spacing: 0.5em;
transition: opacity .8s ease .1s, letter-spacing 1s cubic-bezier(.2, .7, .2, 1) .1s;
}
html.hd-anim .section-header.in-view h2[data-eyebrow]::before { opacity: 1; letter-spacing: 0.18em; }
html.hd-anim .section-header h2[data-hanja]::after {
opacity: 0; transform: rotate(-2.5deg) scale(1.6);
transition: opacity .25s ease .25s, transform .35s cubic-bezier(.3, 1.6, .5, 1) .25s;
}
html.hd-anim .section-header.in-view h2[data-hanja]::after { opacity: 1; transform: rotate(-2.5deg) scale(1); }
/* 움직임 줄이기 — 끄지 않고 줄인다(헌법 §7): 밑줄은 바로, 낙관은 튀지 않고 짧게 나타난다 */
@media (prefers-reduced-motion: reduce) {
html.hd-anim .section-header::after,
html.hd-anim .section-header:has(h2[data-hanja])::before { transition: none; }
html.hd-anim .section-header h2[data-eyebrow]::before { letter-spacing: 0.18em; transition: opacity .3s ease; }
html.hd-anim .section-header h2[data-hanja]::after { transform: rotate(-2.5deg); transition: opacity .3s ease; }
}
.section-header p {
background: none;
backdrop-filter: none;
padding: 0;
border-radius: 0;
font-weight: 500;
color: var(--ink-soft);
}
.section-sub {
flex: 0 0 100%;
margin: 0.1rem 0 0;
font-size: 0.86rem;
color: var(--ink-soft);
}
.blog-section-more,
.faq-section-more {
background: none;
border: none;
padding: 0 0 0.2rem;
border-radius: 0;
font-family: var(--font-body);
font-size: 0.86rem;
font-weight: 600;
color: var(--accent);
white-space: nowrap;
}
.blog-section-more:hover,
.faq-section-more:hover { background: none; color: var(--accent-2); transform: translateX(2px); }
/* 2026-09-22 · 머리에 링크가 둘일 때(스마트 업무 도구: 도구 설명 · 조회 사이트) 한 묶음으로 오른쪽에 둔다.
space-between 머리에 링크를 셋째 자식으로 붙이면 가운데로 밀린다(헌법 §5). 폭이 모자라 다음 줄로 내려가도 오른쪽 끝에 붙는다. */
.section-more-group { display: inline-flex; align-items: flex-end; gap: 0.95rem; margin-left: auto; }
@media (max-width: 600px) {
.section-more-group { gap: 0.8rem; }
.section-header { gap: 0.3rem 0.6rem; margin-bottom: 0.9rem; }
.section-header h2 { font-size: 1.22rem; }
.section-header h2[data-hanja] { padding-left: 2.55rem; }
.section-header h2[data-hanja]::after { width: 1.9rem; height: 1.9rem; font-size: 1.14rem; font-weight: 600; }
.section-header:has(h2[data-hanja])::before { width: 1.9rem; }
/* styles.css 600px 블록이 .section-header.faq-section-header에 nowrap을 박는다 — 같은 특이도로 되돌려 부제가 다음 줄로 내려가게 */
.section-header.blog-section-header,
.section-header.faq-section-header { flex-wrap: wrap; gap: 0.3rem 0.6rem; }
.section-header.blog-section-header h2,
.section-header.faq-section-header h2 { white-space: normal; }
.blog-section-more, .faq-section-more { font-size: 0.78rem; padding: 0 0 0.15rem; }
.section-sub { font-size: 0.8rem; }
}
/* ───────────────────────────── 7. 카드 공통 ───────────────────────────── */
.field-card,
.about-main,
.about-sub,
.blog-card,
.faq-home-card,
.service-card,
.smart-site-card,
.directions-card {
background: var(--card) !important;
border: 1px solid var(--line) !important;
box-shadow: var(--shadow-card) !important;
backdrop-filter: none !important;
-webkit-backdrop-filter: none !important;
}
.field-card:hover,
.about-main:hover,
.blog-card:hover,
.faq-home-card:hover,
.service-card:hover,
.smart-site-card:hover {
background: var(--card) !important;
border-color: #9cc3e6 !important;
box-shadow: var(--shadow-card-hover) !important;
}
.service-card::before,
.smart-site-card::before { background: linear-gradient(90deg, var(--accent), var(--accent-2)); height: 2px; }
/* ───────────────────────────── 8. 전문분야 ───────────────────────────── */
.fields-grid { display: grid; grid-template-columns: repeat(2, 1fr); gap: 0.8rem; }
/* 2026-10-01 전문분야 랜딩 6종 — 넓은 화면 3열(3×2). 4열이면 둘째 줄에 둘만 남아 오른쪽이 빈다 */
@media (min-width: 900px) { .fields-grid { grid-template-columns: repeat(3, 1fr); } }
.field-card {
display: flex;
flex-direction: column;
gap: 0.35rem;
border-radius: var(--r-md);
padding: 1.15rem 1.15rem 1rem;
text-decoration: none;
color: var(--ink);
transition: transform .18s ease, border-color .18s ease, box-shadow .18s ease;
}
.field-card:hover { transform: translateY(-2px); }
.field-card-badge {
align-self: flex-start;
font-family: var(--font-body);
font-size: 0.66rem;
font-weight: 700;
letter-spacing: 0.02em;
border-radius: 999px;
padding: 0.2rem 0.58rem;
color: #fff;
background: var(--accent);
word-break: keep-all;
}
.field-card-badge.plain { color: var(--accent); background: var(--accent-soft); }
.field-card-name {
font-family: var(--font-display);
font-size: 1.08rem;
font-weight: 700;
letter-spacing: -0.015em;
margin-top: 0.2rem;
}
.field-card-desc {
font-family: var(--font-body);
font-size: 0.78rem;
font-weight: 500;
line-height: 1.55;
color: var(--ink-soft);
word-break: keep-all;
}
.field-card-desc2 {
display: none;
font-family: var(--font-body);
font-size: 0.74rem;
line-height: 1.5;
color: var(--ink-light);
word-break: keep-all;
margin-top: 0.2rem;
}
/* 둘째 설명 줄은 카드가 넓어지는 3열에서만 — 폰 2열에서는 이름·분야만 보인다 */
@media (min-width: 900px) { .field-card-desc2 { display: block; } }
.field-card-go {
margin-top: auto;
padding-top: 0.55rem;
font-family: var(--font-body);
font-size: 0.74rem;
font-weight: 700;
color: var(--accent);
}
.field-card-go::after { content: " →"; }
@media (max-width: 599px) {
.field-card { padding: 0.95rem 0.9rem 0.85rem; }
.field-card-name { font-size: 1rem; }
}
/* ───────────────────────────── 9. 변호사 소개 ───────────────────────────── */
.about-grid { display: grid; grid-template-columns: 1fr; gap: 0.8rem; }
@media (min-width: 820px) { .about-grid { grid-template-columns: 1.5fr 1fr; } }
.about-main {
display: flex;
align-items: center;
gap: 1.15rem;
border-radius: var(--r-md);
padding: 1.3rem 1.4rem;
text-decoration: none;
color: var(--ink);
overflow: hidden;
transition: transform .18s ease, border-color .18s ease, box-shadow .18s ease;
}
.about-main:hover { transform: translateY(-2px); }
.about-main img { width: auto; height: 172px; object-fit: contain; flex: none; filter: drop-shadow(0 3px 8px rgba(16, 32, 58, 0.15)); }
.about-main img.about-photo { width: 146px; height: 182px; object-fit: cover; filter: none; border-radius: 10px; }
.about-main img.about-caricature { order: 3; margin-left: auto; align-self: center; transform: translateY(10px); } /* 2026-09-14 조변 시안 C: 사진 6% 키움(138×172→146×182) + 캐리커처는 가운데에서 10px 아래. 바닥(처음)은 너무 낮고 가운데는 너무 높았다 — 캐리커처 얼굴이 사진 얼굴보다 약 10px 아래 */
.about-main-name {
font-family: var(--font-display);
font-size: 1.16rem;
font-weight: 700;
letter-spacing: -0.015em;
line-height: 1.4;
}
.about-main-desc {
font-family: var(--font-body);
font-size: 0.8rem;
font-weight: 500;
line-height: 1.6;
color: var(--ink-soft);
margin-top: 0.35rem;
word-break: keep-all;
}
.about-main-go {
display: inline-block;
margin-top: 0.55rem;
font-family: var(--font-body);
font-size: 0.76rem;
font-weight: 700;
color: var(--accent);
white-space: nowrap;
}
.about-subs { display: flex; flex-direction: column; gap: 0.6rem; }
.about-sub {
flex: 1;
display: flex;
align-items: center;
gap: 0.8rem;
border-radius: var(--r-sm);
padding: 0.75rem 1rem;
text-decoration: none;
color: var(--ink);
transition: transform .15s ease, border-color .15s ease;
}
.about-sub:hover { transform: translateX(3px); border-color: #9cc3e6 !important; }
.about-sub > i { font-size: 1rem; color: var(--accent); width: 1.4rem; text-align: center; flex: none; }
.about-sub-txt b { font-family: var(--font-body); font-size: 0.86rem; font-weight: 700; display: block; }
.about-sub-txt span { font-family: var(--font-body); font-size: 0.72rem; font-weight: 500; color: var(--ink-soft); display: block; }
.about-sub::after { content: "→"; margin-left: auto; color: var(--accent); font-weight: 700; }
@media (max-width: 599px) {
.about-main { padding: 1.05rem 1rem; gap: 0.85rem; }
.about-main img.about-photo { width: 117px; height: 146px; } /* 2026-09-14 조변: 폰도 6% (110×138→117×146) */
.about-main img.about-caricature { display: none; }
.about-main-name { font-size: 1.02rem; }
}
@media (min-width: 820px) and (max-width: 1099px) {
.about-main img { height: 142px; }
.about-main img.about-photo { width: 121px; height: 150px; }
.about-main img.about-caricature { transform: translateY(8px); }
}
/* 2026-09-22 · 오른쪽 줄이 넷(웹툰·카드뉴스·유튜브·네이버 블로그)이 되며 칸이 69~76px 높아져 왼쪽 사진이 작아 보였다
(사진이 카드 높이에서 차지하는 비율 PC 81→62% · 태블릿 69→51%). 두 칸으로 놓이는 820px 부터만 줄을 촘촘하게 해
칸 높이를 원래(226px 안팎)로 되돌린다 · 조변이 시안 셋 중 고름. 폰(한 칸)은 그대로. 줄 높이 51px(누르기 기준 44px 이상). */
@media (min-width: 820px) {
.about-subs { gap: 0.45rem; }
.about-sub { padding: 0.45rem 1rem; }
.about-sub-txt b { line-height: 1.35; }
.about-sub-txt span { line-height: 1.35; margin-top: 1px; }
}
/* ───────────────────────────── 10. 법률 FAQ ───────────────────────────── */
.faq-home-cats {
display: flex;
flex-wrap: wrap;
gap: 0.45rem;
margin: -0.15rem 0 1rem;
}
.faq-home-cats a {
font-family: var(--font-body);
font-size: 0.78rem;
font-weight: 600;
color: var(--ink-soft);
background: var(--card);
border: 1px solid var(--line);
border-radius: 999px;
padding: 0.32rem 0.8rem;
text-decoration: none;
white-space: nowrap;
transition: color .15s ease, border-color .15s ease, background .15s ease;
}
.faq-home-cats a:hover { color: var(--accent); border-color: #9cc3e6; background: var(--accent-soft); }
@media (max-width: 599px) {
.faq-home-cats {
flex-wrap: nowrap;
overflow-x: auto;
scrollbar-width: none;
-webkit-overflow-scrolling: touch;
margin: -0.1rem -1.25rem 0.9rem;
padding: 0 1.25rem 0.2rem;
}
.faq-home-cats::-webkit-scrollbar { display: none; }
.faq-home-cats a { font-size: 0.74rem; padding: 0.3rem 0.7rem; }
}
.faq-home-grid { grid-template-columns: repeat(3, 1fr); gap: 0.8rem; }
@media (max-width: 1023px) { .faq-home-grid { grid-template-columns: 1fr 1fr; } }
@media (max-width: 599px) { .faq-home-grid { grid-template-columns: 1fr; gap: 0.6rem; } }
.faq-home-card {
display: flex;
flex-direction: column;
gap: 0.4rem;
border-radius: var(--r-md);
padding: 1.05rem 1.1rem;
transition: transform .18s ease, border-color .18s ease, box-shadow .18s ease;
}
.faq-home-card:hover { transform: translateY(-2px); }
.faq-home-card-cat {
align-self: flex-start;
font-family: var(--font-body);
font-size: 0.66rem;
font-weight: 700;
letter-spacing: 0.02em;
color: var(--accent);
background: var(--accent-soft);
border-radius: 999px;
padding: 0.18rem 0.52rem;
margin-bottom: 0;
}
.faq-home-card-q {
font-family: var(--font-display);
font-size: 0.98rem;
font-weight: 700;
line-height: 1.45;
letter-spacing: -0.01em;
color: var(--ink);
margin: 0;
}
.faq-home-card-a {
font-family: var(--font-body);
font-size: 0.8rem;
font-weight: 400;
line-height: 1.6;
color: var(--ink-soft);
}
.faq-home-card-fallback {
background: var(--card);
border: 1px dashed var(--line-strong);
color: var(--ink-soft);
}
@media (max-width: 600px) {
.faq-home-card-q { font-size: 0.94rem; }
.faq-home-card-a { font-size: 0.78rem; }
.faq-home-card-cat { font-size: 0.64rem; }
}
/* ───────────────────────────── 11. 업무 도구·사이트·커피 ───────────────────────────── */
.service-card,
.smart-site-card {
border-radius: var(--r-md);
will-change: auto;
}
.service-card:hover,
.smart-site-card:hover { transform: translateY(-2px); }
svg.service-icon,
.service-icon {
color: var(--accent);
background: var(--accent-soft) !important;
box-shadow: none !important;
border-radius: 12px;
}
svg.service-icon { width: 22px; height: 22px; padding: 10px; }
.service-card:hover .service-icon,
.smart-site-card:hover .service-icon {
background: var(--accent-soft-2) !important;
box-shadow: none !important;
color: var(--accent);
transform: scale(1.06);
}
.service-title { font-family: var(--font-body); color: var(--ink); font-weight: 600 !important; }
.google-store-text,
.special-info-text { color: var(--accent-2) !important; font-weight: 600 !important; }
.verified-badge {
background: var(--accent-2);
border: 2px solid #fff;
box-shadow: 0 1px 3px rgba(11, 74, 118, 0.25);
}
.favorite-btn { opacity: 0.45; }
.favorite-btn i { color: var(--ink-light) !important; filter: none; }
.favorite-btn:hover { background: var(--accent-soft); }
.favorite-btn.active { opacity: 1; }
.favorite-btn.active i { color: var(--star) !important; filter: none; }
.service-card:hover .favorite-btn,
.smart-site-card:hover .favorite-btn { opacity: 0.85; }
@media (max-width: 599px) {
.service-card,
.smart-site-card { background: var(--card) !important; }
svg.service-icon { width: 20px; height: 20px; padding: 9px; margin-bottom: 0.35rem !important; }
}
/* 커피브레이크 — 같은 문법, 쉬어가는 코너 표시는 눈썹이 맡는다 */
#section-coffee .service-icon { color: #1f6f8b; background: #e3f0f4 !important; }
#section-coffee .service-card:hover .service-icon { background: #d2e6ec !important; }
/* 커피브레이크 여섯째 칸 — 놀이광장 문 (2026-09-21 조변 결정)
게임 카드와 같은 칸 크기(격자의 grid-auto-rows: 1fr 이 키를 맞춘다) · 점선 테두리로 «카드가 아니라 문»임을 보인다.
order 로 늘 맨 끝 · 게임 일곱 + 문 = 여덟 칸: 폰 2열(4줄)·PC 4열(2줄)은 문이 한 칸, 태블릿 3열은 문이 두 칸이라야 셋째 줄이 찬다.
⚠️ 게임 수를 바꾸면 이 폭 계산도 다시 한다(2026-09-21 다섯일 때는 PC 3칸이었다). */
.playzone-gate {
order: 999;
display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 0.3rem;
padding: 0.6rem 0.7rem; border-radius: var(--r-md);
border: 1px dashed var(--line-strong); background: transparent;
color: var(--ink); text-decoration: none; text-align: center;
transition: border-color .2s, background .2s, transform .2s;
}
.playzone-gate:hover, .playzone-gate:focus-visible { border-color: #e2a39a; background: #fff; transform: translateY(-2px); }
.playzone-gate .gate-seal {
display: inline-flex; align-items: center; justify-content: center; width: 42px; height: 42px;
border-radius: 12px; background: #fbe9e6; color: var(--seal);
font-family: var(--font-display); font-weight: 900; font-size: 1.25rem; line-height: 1;
}
.playzone-gate .gate-text { display: flex; flex-direction: column; align-items: center; gap: 1px; }
.playzone-gate strong { font-family: var(--font-body); font-weight: 700; font-size: clamp(.82rem, 3.4vw, .95rem); color: var(--ink); }
.playzone-gate .gate-sub { font-size: .74rem; color: var(--ink-soft); }
.playzone-gate .gate-arrow { display: none; }
@media (min-width: 600px) and (max-width: 1023px) {
.playzone-gate { grid-column: span 2; flex-direction: row; gap: 0.9rem; }
.playzone-gate .gate-text { flex-direction: row; align-items: baseline; gap: 0.6rem; }
.playzone-gate .gate-arrow { display: inline; font-size: 1.1rem; color: var(--seal); transition: transform .2s; }
.playzone-gate:hover .gate-arrow { transform: translateX(4px); }
}
@media (prefers-reduced-motion: reduce) { .playzone-gate, .playzone-gate .gate-arrow { transition: none; } }
/* ───────────────────────────── 12. 네이버 블로그 (외부) — 최신 3장만 ───────────────────────────── */
.blog-feed-grid .blog-card:nth-child(n+4) { display: none !important; }
.blog-card { border-radius: var(--r-md); transition: transform .18s ease, border-color .18s ease, box-shadow .18s ease; }
.blog-card:hover { transform: translateY(-2px); }
.blog-card-body { padding: 0.95rem 1rem 1rem !important; }
.blog-card-category { color: var(--accent); background: var(--accent-soft); border-radius: 999px; font-family: var(--font-body); }
.blog-card-title { font-family: var(--font-display); color: var(--ink); font-size: 0.95rem !important; line-height: 1.45 !important; }
.blog-card-summary { font-family: var(--font-body); color: var(--ink-soft); font-weight: 400; font-size: 0.78rem !important; line-height: 1.55 !important; }
.blog-card-meta { font-family: var(--font-utility); font-style: italic; color: var(--ink-light); border-top-color: var(--line); }
.blog-card-fallback { max-width: 600px; }
.blog-skeleton-card { background: linear-gradient(90deg, #eef2f6 0%, #f7f9fb 50%, #eef2f6 100%); background-size: 200% 100%; border: 1px solid var(--line); }
@media (max-width: 1023px) {
.blog-feed-grid { grid-template-columns: repeat(3, 1fr) !important; }
}
@media (max-width: 599px) {
.blog-feed-grid { grid-template-columns: 1fr !important; }
.blog-feed-grid .blog-card:nth-child(n+3) { display: none !important; } /* 모바일은 2장 */
}
/* 외부 링크 표시 — 제목 옆 작은 화살 */
.blog-card-title::after { content: " ↗"; font-family: var(--font-body); font-size: 0.8em; color: var(--ink-light); }
/* ───────────────────────────── 13. 오시는길 ───────────────────────────── */
.directions-card {
display: grid;
grid-template-columns: 1.15fr 1fr;
gap: 1.5rem;
border-radius: var(--r-md);
padding: 1.6rem 1.75rem;
}
.directions-address { font-family: var(--font-body); font-size: 0.98rem; color: var(--ink); margin-bottom: 0.6rem; }
.directions-desc { font-family: var(--font-body); font-size: 0.9rem; line-height: 1.75; color: var(--ink-soft); margin-bottom: 0.85rem; }
.directions-desc strong { color: var(--ink); }
.directions-tel { color: var(--accent); font-weight: 700; text-decoration: none; }
.directions-tel:hover { text-decoration: underline; }
.directions-links { display: flex; flex-wrap: wrap; gap: 0.55rem; }
.directions-links a {
display: inline-flex;
align-items: center;
gap: 0.4rem;
font-family: var(--font-body);
font-size: 0.82rem;
font-weight: 600;
text-decoration: none;
color: var(--accent);
background: var(--accent-soft);
border: 1px solid transparent;
border-radius: 999px;
padding: 0.4rem 0.95rem;
transition: background .2s ease;
}
.directions-links a:hover { background: var(--accent-soft-2); }
#directions-map-canvas {
width: 100%;
height: 100%;
min-height: 250px;
border-radius: 12px;
z-index: 0;
background: #e6edf3;
}
/* Leaflet 이름표 (theme-cheongmyeong §7 이관) */
.lf-name { background: #fff; border: 1px solid #cbd5e1; border-radius: 6px; padding: 2px 7px; font-weight: 700; font-size: 12px; color: #0f172a; box-shadow: 0 1px 4px rgba(13, 31, 61, 0.25); white-space: nowrap; }
.lf-name-court { color: #1d4ed8; border-color: #93c5fd; }
.lf-name-sub { display: block; font-size: 10px; font-weight: 600; color: #64748b; margin-top: 1px; line-height: 1.3; }
.lf-north { display: flex; align-items: center; gap: 3px; background: #fff; border: 1px solid #cbd5e1; border-radius: 6px; padding: 3px 7px; font-weight: 800; font-size: 11px; color: #0f172a; box-shadow: 0 1px 4px rgba(13, 31, 61, 0.25); cursor: default; }
@media (max-width: 768px) {
.directions-card { grid-template-columns: 1fr; padding: 1.1rem 1rem; gap: 1rem; }
.directions-address { font-size: 0.86rem; margin-bottom: 0.45rem; }
.directions-desc { font-size: 0.83rem; line-height: 1.6; margin-bottom: 0.6rem; }
.directions-links { flex-wrap: nowrap; gap: 0.4rem; }
.directions-links a { font-size: 0.72rem; padding: 0.3rem 0.6rem; white-space: nowrap; }
#directions-map-canvas { min-height: 220px; }
}
@media (max-width: 380px) {
.directions-links a i { display: none; }
}
/* ───────────────────────────── 14. 信의 약속 — 사이트 유일의 짙은 면 ───────────────────────────── */
.trust-band {
max-width: none;
margin: 0.4rem 0 1rem !important;
padding: 2.4rem 1.6rem 2.5rem;
border-radius: var(--r-lg);
background: linear-gradient(135deg, #0b3d63 0%, #0a2a47 100%) !important;
border: 1px solid rgba(255, 255, 255, 0.08) !important;
box-shadow: 0 20px 44px -22px rgba(10, 42, 71, 0.6) !important;
color: rgba(255, 255, 255, 0.86);
font-family: var(--font-body);
}
.trust-band-title {
font-family: var(--font-display);
font-size: clamp(1.2rem, 2.4vw, 1.5rem);
font-weight: 700;
color: #fff;
margin-bottom: 1rem;
}
.trust-band .hanja-shin,
.trust-band-title .hanja-shin,
.trust-band-prose .hanja-shin { color: var(--seal-on-dark) !important; }
.trust-band-keywords { border-bottom: 1px solid rgba(255, 255, 255, 0.16); margin-bottom: 1.1rem; padding-bottom: 1rem; }
.trust-keyword { color: rgba(255, 255, 255, 0.95); font-weight: 600; }
.trust-keyword i { color: #9ed0f5; }
.trust-keyword-sep { color: rgba(255, 255, 255, 0.35); }
.trust-band-prose { color: rgba(255, 255, 255, 0.84); }
.trust-band-prose strong { color: #fff; font-weight: 700; }
.trust-band-prose a.trust-band-name-link {
color: #fff;
font-weight: 700;
text-decoration: underline;
text-underline-offset: 3px;
text-decoration-thickness: 1px;
text-decoration-color: rgba(255, 255, 255, 0.45);
}
.trust-band-prose a.trust-band-name-link:hover { text-decoration-color: #fff; }
.trust-board-btn {
color: #fff;
background: rgba(255, 255, 255, 0.12);
border: 1px solid rgba(255, 255, 255, 0.3);
}
.trust-board-btn:hover { background: #fff; color: var(--accent); border-color: #fff; box-shadow: none; }
@media (max-width: 768px) {
.trust-band { margin: 0.2rem 0 0.6rem !important; padding: 3.8rem 1.15rem 1.7rem; }
}
/* ───────────────────────────── 15. 푸터 — 지면 그대로, 헤어라인만 ───────────────────────────── */
.footer {
background: transparent !important;
border-top: 1px solid var(--line) !important;
backdrop-filter: none !important;
-webkit-backdrop-filter: none !important;
padding: 1.7rem 0 2.6rem;
}
.footer::before { display: none; }
.footer-container { max-width: 1180px; padding: 0 1.25rem; }
.footer-links { gap: 1.25rem; margin-bottom: 0.8rem; }
.footer-links a {
font-family: var(--font-body);
font-size: 0.86rem;
font-weight: 600;
color: var(--ink-soft);
text-shadow: none;
}
.footer-links a:hover { color: var(--accent); transform: none; }
.footer-fields { text-align: center; margin: 0.2rem 0 1rem; font-family: var(--font-body); font-size: 0.8rem; color: var(--ink-light); }
.footer-fields a { color: var(--accent); text-decoration: none; margin: 0 0.45rem; font-weight: 600; }
.footer-fields a:hover { text-decoration: underline; }
.footer-copyright {
font-family: var(--font-body);
color: var(--ink-light);
border-top: 1px solid var(--line);
line-height: 1.8;
max-width: 860px;
}
.footer-copyright .hanja-shin { color: var(--seal) !important; }
@media (max-width: 768px) {
.footer-links { flex-wrap: nowrap; gap: 0.75rem; }
.footer-links a { font-size: 0.78rem; white-space: nowrap; }
.footer-links a i { display: none; }
}
@media (max-width: 380px) {
.footer-links { gap: 0.55rem; }
.footer-links a { font-size: 0.7rem; }
}
/* ───────────────────────────── 16. 상담 FAB · 패널 ───────────────────────────── */
.consult-fab {
background: var(--accent);
box-shadow: 0 10px 26px -8px rgba(11, 74, 118, 0.55);
font-family: var(--font-body);
}
.consult-fab::after { box-shadow: 0 0 22px 3px rgba(45, 127, 192, 0.55); }
.consult-fab:hover { box-shadow: 0 12px 30px -8px rgba(11, 74, 118, 0.6), 0 0 0 5px rgba(45, 127, 192, 0.14); }
/* ───────────────────────────── 17. 모션 ───────────────────────────── */
@media (prefers-reduced-motion: reduce) {
*,
*::before,
*::after {
animation-duration: 0.01ms !important;
animation-iteration-count: 1 !important;
transition-duration: 0.01ms !important;
scroll-behavior: auto !important;
}
/* 예외: 상담 FAB 후광 (조변 PC 사례 — Windows 애니메이션 꺼짐에도 CTA 후광 유지) */
.consult-fab::after {
animation-duration: 2.4s !important;
animation-iteration-count: infinite !important;
}
}
/* ════════════════════════════════════════════════════════════════
🚪 차원이동 모달 3종 — 놀이광장(信 글자) · 무한공간(빛의 회오리) · 소울시티(노랑 비행기)
2026-09-12 「청람」 A안으로 통일(조변 선택). 흰 카드 위에 목적지가 보이는 «창»(인라인 SVG).
- 바깥 컨테이너(.secret-portal-modal · .infinity-modal-backdrop · .hopecity-modal-backdrop)는 styles.css 의 옛 규칙이
열고 닫는 동작(display / .show / .active)을 맡는다 → 여기서는 색·여백만 덮어쓴다. 이 파일이 뒤에 실려 이긴다.
- styles.css 의 옛 카드 규칙(.secret-portal-content · .infinity-modal · .hopecity-modal …)은 마크업이 사라져 죽은 코드다.
다음 styles.css 정리 때 함께 걷어낼 것(원본: !백업/백업-20260912-홈페이지-차원이동모달개편전).
- 눈썹줄·행선지는 data-* + attr() — 홈 섹션 h2 눈썹과 같은 방식이라 DOM 텍스트가 늘지 않는다.
════════════════════════════════════════════════════════════════ */
.dim-backdrop,
.secret-portal-modal,
.infinity-modal-backdrop,
.hopecity-modal-backdrop {
background: rgba(10, 42, 71, 0.58);
-webkit-backdrop-filter: blur(6px);
backdrop-filter: blur(6px);
padding: 16px;
animation: none; /* 옛 portalOpen(보라 전체화면) 등장 애니메이션 해제 */
}
.dim-card {
width: 440px;
max-width: 100%;
max-height: calc(100vh - 32px);
max-height: calc(100dvh - 32px);
overflow: auto;
background: var(--card, #ffffff);
border: 1px solid var(--line, #d9e2ea);
border-radius: 8px;
box-shadow: 0 30px 70px rgba(6, 20, 40, 0.45), 0 2px 6px rgba(6, 20, 40, 0.2);
color: var(--ink, #10203a);
font-family: 'Pretendard Variable', Pretendard, 'Noto Sans KR', -apple-system, BlinkMacSystemFont, sans-serif;
text-align: left;
word-break: keep-all;
transform: translateY(10px) scale(0.985);
transition: transform 0.35s cubic-bezier(0.2, 0.8, 0.2, 1);
}
.secret-portal-modal.show .dim-card,
.infinity-modal-backdrop.active .dim-card,
.hopecity-modal-backdrop.active .dim-card {
transform: none;
}
.dim-window {
height: 150px;
position: relative;
border-bottom: 1px solid var(--line, #d9e2ea);
background: var(--ground, #f2f5f8);
border-radius: 7px 7px 0 0;
overflow: hidden;
}
.dim-window svg {
position: absolute;
inset: 0;
width: 100%;
height: 100%;
display: block;
}
.dim-body { padding: 20px 26px 6px; }
.dim-title {
margin: 0 0 9px;
font-family: 'Noto Serif KR', serif;
font-size: 21px;
font-weight: 700;
line-height: 1.38;
letter-spacing: -0.01em;
color: var(--ink, #10203a);
text-wrap: balance;
}
.dim-title::before {
content: attr(data-eyebrow);
display: block;
margin-bottom: 9px;
font-family: 'EB Garamond', 'Noto Serif KR', serif;
font-style: italic;
font-weight: 500;
font-size: 12.5px;
line-height: 1;
letter-spacing: 0.16em;
text-transform: uppercase;
color: var(--accent-2, #2d7fc0);
}
.dim-desc {
margin: 0;
font-size: 14.5px;
line-height: 1.7;
color: var(--ink-soft, #44546a);
}
.dim-desc .hanja-shin { font-size: 1.15em; }
.dim-route {
display: flex;
justify-content: space-between;
align-items: baseline;
margin-top: 14px;
padding-top: 11px;
border-top: 1px solid var(--line, #d9e2ea);
font-family: 'EB Garamond', 'Noto Serif KR', serif;
font-size: 12px;
line-height: 1;
letter-spacing: 0.06em;
color: var(--ink-light, #7b8899);
}
.dim-route::before { content: "DESTINATION"; }
.dim-route::after { content: attr(data-route); font-weight: 600; color: var(--accent, #0b4a76); }
.dim-actions {
display: flex;
gap: 10px;
justify-content: flex-end;
padding: 14px 26px 22px;
}
.dim-btn {
padding: 11px 20px;
border-radius: 6px;
font: 600 14px/1 'Pretendard Variable', Pretendard, 'Noto Sans KR', sans-serif;
letter-spacing: -0.01em;
cursor: pointer;
transition: background-color 0.18s, border-color 0.18s, color 0.18s;
}
.dim-btn-cancel {
background: #fff;
border: 1px solid var(--line-strong, #c3d0dc);
color: var(--ink-soft, #44546a);
}
.dim-btn-cancel:hover { background: var(--ground, #f2f5f8); border-color: #9cc3e6; color: var(--ink, #10203a); }
.dim-btn-go {
background: var(--accent, #0b4a76);
border: 1px solid var(--accent, #0b4a76);
color: #fff;
}
.dim-btn-go:hover { background: #0d5a90; border-color: #0d5a90; }
.dim-btn:focus-visible { outline: 3px solid var(--accent-2, #2d7fc0); outline-offset: 2px; }
@media (max-width: 480px) {
.dim-window { height: 132px; }
.dim-body { padding: 18px 20px 4px; }
.dim-title { font-size: 19px; }
.dim-desc { font-size: 14px; }
.dim-actions { padding: 12px 20px 20px; }
.dim-btn { flex: 1; text-align: center; padding: 12px 14px; }
}
@media (prefers-reduced-motion: reduce) {
.dim-card { transition: none; transform: none; }
}
/* ════════════════════════════════════════════════════════════════
📲 홈 화면에 추가 — 헤더 버튼 · 안내 카드 · 설치 환영 카드 (2026-09-12)
- 헤더 ⭐(Font Awesome 별)를 «폰에 추가» 선 아이콘 버튼으로 교체. 카드 즐겨찾기 별(45개)·GNB 즐겨찾기와 기호가 겹쳐 «내 목록»으로 읽혔다.
보이는 라벨은 data-label + ::after — 헤더 DOM 텍스트가 늘지 않는다. 600px 이하(폰)는 아이콘만.
- #homeGuideModal · #welcomeModal 은 차원이동 모달과 같은 .dim-card 뼈대. 바깥 컨테이너의 열고 닫기(display / .show)는
styles.css 의 옛 규칙(.home-guide-modal / .welcome-modal)이 맡고 여기서는 색·층·여백만 덮어쓴다.
- styles.css 의 옛 카드 규칙(.home-guide-content · .guide-* · .browser-section · .welcome-content · .install-banner · .ios-install-* · .alert-*)은
마크업이 사라져 죽은 코드다. 다음 styles.css 정리 때 함께 걷어낼 것(원본: !백업/백업-20260912-03-홈페이지-홈화면추가모달개편전).
════════════════════════════════════════════════════════════════ */
.browser-tip {
display: inline-flex;
align-items: center;
gap: 7px;
margin: 0;
padding: 6px 11px 6px 9px;
border: 1px solid rgba(255, 255, 255, 0.34);
border-radius: 999px;
background: rgba(255, 255, 255, 0.06);
color: rgba(255, 255, 255, 0.92);
font: 500 12px/1 'Pretendard Variable', Pretendard, 'Noto Sans KR', -apple-system, BlinkMacSystemFont, sans-serif;
letter-spacing: -0.01em;
text-shadow: 0 1px 8px rgba(6, 18, 34, 0.5);
cursor: pointer;
-webkit-tap-highlight-color: transparent;
transition: background-color 0.18s, border-color 0.18s;
}
.browser-tip:hover { background: rgba(255, 255, 255, 0.16); border-color: rgba(255, 255, 255, 0.6); color: #fff; transform: none; }
.browser-tip:focus-visible { outline: 2px solid #fff; outline-offset: 2px; }
.browser-tip svg { width: 18px; height: 18px; flex: 0 0 18px; }
.browser-tip::after { content: attr(data-label); white-space: nowrap; }
@media (max-width: 600px) {
.browser-tip { padding: 6px 8px; border-color: transparent; background: transparent; }
.browser-tip::after { content: none; }
.browser-tip svg { width: 20px; height: 20px; flex-basis: 20px; }
}
/* 카드 — 상담 FAB(1500)·배너 위에 오도록 */
.home-guide-modal,
.welcome-modal { z-index: 10000; }
.home-guide-modal.show .dim-card,
.welcome-modal.show .dim-card { transform: none; }
.dim-title .hanja-shin { font-size: 1.2em !important; }
.dim-steps {
list-style: none;
margin: 14px 0 0;
padding: 0;
display: grid;
gap: 8px;
}
.dim-steps[hidden] { display: none; }
.dim-steps li {
display: flex;
gap: 12px;
align-items: flex-start;
font-size: 14px;
line-height: 1.55;
color: var(--ink, #10203a);
}
.dim-steps li b { font-weight: 600; color: var(--accent, #0b4a76); }
.dim-steps kbd {
font: inherit;
font-size: 0.92em;
padding: 1px 6px;
border: 1px solid var(--line-strong, #c3d0dc);
border-bottom-width: 2px;
border-radius: 4px;
background: var(--ground, #f2f5f8);
color: var(--ink, #10203a);
}
.dim-step-n {
flex: 0 0 22px;
height: 22px;
border-radius: 50%;
background: var(--accent-soft, #e3eef7);
color: var(--accent, #0b4a76);
font: 600 12px/22px 'EB Garamond', 'Noto Serif KR', serif;
text-align: center;
}
.dim-device {
display: flex;
justify-content: space-between;
align-items: center;
gap: 8px;
flex-wrap: wrap;
margin-top: 14px;
padding-top: 11px;
border-top: 1px solid var(--line, #d9e2ea);
font: 500 12px/1 'EB Garamond', 'Noto Serif KR', serif;
letter-spacing: 0.06em;
color: var(--ink-light, #7b8899);
}
.dim-device[hidden] { display: none; }
.dim-device::before { content: "DEVICE"; }
.dim-chips { display: flex; gap: 6px; flex-wrap: wrap; }
.dim-chip {
padding: 6px 9px;
border: 1px solid var(--line, #d9e2ea);
border-radius: 999px;
background: #fff;
color: var(--ink-light, #7b8899);
font: 500 11px/1 'Pretendard Variable', Pretendard, 'Noto Sans KR', sans-serif;
letter-spacing: 0;
cursor: pointer;
transition: background-color 0.15s, color 0.15s, border-color 0.15s;
}
.dim-chip:hover { border-color: #9cc3e6; color: var(--ink, #10203a); }
.dim-chip.on { background: var(--accent, #0b4a76); border-color: var(--accent, #0b4a76); color: #fff; }
.dim-btn.copied { border-color: var(--accent-2, #2d7fc0); color: var(--accent, #0b4a76); }
.dim-sign {
margin: 12px 0 0;
text-align: right;
font-size: 13px;
color: var(--ink-light, #7b8899);
}
/* 설치 완료 토스트 */
.install-success {
background: var(--navy, #0b3d63);
color: #fff;
border-radius: 8px;
padding: 14px 22px;
font: 600 14px/1.45 'Pretendard Variable', Pretendard, 'Noto Sans KR', sans-serif;
box-shadow: 0 20px 50px rgba(6, 20, 40, 0.4);
animation: none;
z-index: 10001;
}
.install-success .hanja-shin { color: #ffd3cb !important; }
@media (max-width: 480px) {
.dim-steps li { font-size: 13.5px; }
}
/* ════════════════════════════════════════════════════════════════
✈️🛸 약속 박스 입구 둘 — 흰 실루엣 정박↔이륙 (2026-09-12 · 조변 선택 A / 드물게 / 정박 60%)
- 원판 셋(노랑 비행기·청록 노스포트·청색 셔틀) → 실루엣 둘. 노스포트 게이트는 마크업째 삭제.
- styles.css 의 옛 #skyhaven-gate / #starship-gate 원판 규칙(배경·테두리·펄스·::after 글리프)은 여기서 무력화한다.
#northport-gate 규칙은 죽은 코드(todo.md 정리 항목).
- 움직임은 script.js initTrustBandFlights 가 transform 으로 준다. 박스 밖으로 나간 기체는 overflow:hidden 이 가린다.
- reduced-motion(조변 PC)에서는 JS 가 아예 돌지 않아 정박 상태만 보인다.
════════════════════════════════════════════════════════════════ */
#section-trust { overflow: hidden; }
#skyhaven-gate,
#starship-gate {
width: auto !important;
height: auto !important;
padding: 6px; /* 실루엣보다 넓은 터치 여유 */
border-radius: 6px !important;
background: none !important;
border: 0 !important;
box-shadow: none !important;
animation: none !important;
opacity: 0.6;
transition: opacity 0.25s ease;
will-change: transform;
}
#skyhaven-gate::before, #skyhaven-gate::after,
#starship-gate::before, #starship-gate::after { content: none !important; display: none !important; }
#skyhaven-gate { top: 22px !important; right: 18px !important; }
#starship-gate { bottom: 18px !important; left: 18px !important; }
#skyhaven-gate svg { display: block; width: 36px; height: 20px; transform: scaleX(-1); filter: drop-shadow(0 1px 2px rgba(0, 0, 0, 0.4)); }
#starship-gate svg { display: block; width: 34px; height: 19px; filter: drop-shadow(0 1px 2px rgba(0, 0, 0, 0.4)); }
#skyhaven-gate:hover, #skyhaven-gate.flying, #skyhaven-gate:focus-visible,
#starship-gate:hover, #starship-gate:focus-visible { opacity: 1; }
#skyhaven-gate:hover, #starship-gate:hover { animation: none; }
#skyhaven-gate:not(.flying):hover, #starship-gate:hover { transform: none; } /* styles.css 의 scale(1.12) 호버 해제 */
#skyhaven-gate:focus-visible, #starship-gate:focus-visible { outline: 2px solid rgba(255, 255, 255, 0.85); outline-offset: 2px; }
.trust-board-btn { z-index: 3; } /* 지나가는 비행기는 알약 뒤로 */
.trust-flight { position: absolute; inset: 0; z-index: 1; pointer-events: none; }
.trust-flight svg { position: absolute; inset: 0; width: 100%; height: 100%; overflow: visible; }
@media (max-width: 768px) {
#skyhaven-gate { top: 24px !important; right: 16px !important; }
#starship-gate { bottom: 16px !important; left: 16px !important; }
#skyhaven-gate svg { width: 32px; height: 18px; }
#starship-gate svg { width: 30px; height: 17px; }
}
@media (prefers-reduced-motion: reduce) {
#skyhaven-gate, #starship-gate { transition: none; }
}
/* ── 🛸 접시 «출항» + 성간 셔틀 관측 보고 모달 (2026-09-12 · 조변 지시 «접시도 비행기처럼») ── */
#starship-gate.aglow { opacity: 1; } /* 출항 중엔 불이 켜진다 */
#starship-gate.aglow svg { filter: drop-shadow(0 0 3px #d9f0ff) drop-shadow(0 0 9px rgba(120, 200, 255, 0.75)); }
.trust-flight .tf-ring { fill: none; stroke: #bfe6ff; stroke-width: 1.5; }
/* 모달 컨테이너 — 다른 차원이동 모달은 styles.css 옛 규칙이 열고 닫지만 이건 신설이라 여기서 맡는다. 색·여백은 .dim-backdrop */
.starship-modal-backdrop { display: none; position: fixed; inset: 0; z-index: 10000; align-items: center; justify-content: center; }
.starship-modal-backdrop.active { display: flex; }
.starship-modal-backdrop.active .dim-card { transform: none; }
.dim-route.tf-route::before { content: "OBSERVED"; }
/* 폰은 아래 여백이 27px 뿐이라 접시가 본문 마지막 줄 위를 지났다(2026-09-12 실측) — 여백을 접시 높이만큼 늘린다 */
@media (max-width: 768px) {
.trust-band { padding-bottom: 3rem; }
}
/* ════════════════════════════════════════════════════════════════
🪐 무한공간 입구 — 고리 행성 + 드문 반짝 + 유성 (2026-09-13 · 조변 선택 D)
- styles.css 의 옛 빛 덩어리 규칙(#blackhole-easteregg 배경·박스섀도·::before 번짐·::after 십자광채·infinity-soft/-breathe/star-flare)은
여기서 무력화한다 — 죽은 코드(todo.md). position/top/right/z-index/cursor 는 styles.css 것을 그대로 쓴다.
- 모양은 index.html 안 인라인 SVG. 유성은 script.js initInfinityMeteor 가 .hero-meteor 층(글자 뒤)에 그린다.
- reduced-motion(조변 PC)에서는 반짝임·유성이 없고, 그림만 2~4분마다 조용히 바뀐다(2026-09-16 · script.js quietSwap).
════════════════════════════════════════════════════════════════ */
#blackhole-easteregg {
width: 34px !important;
height: 34px !important;
top: 4px !important;
right: 16px !important;
background: none !important;
box-shadow: none !important;
border-radius: 0 !important;
opacity: 0.88;
animation: none !important;
transition: opacity 0.25s ease, transform 0.35s ease;
}
#blackhole-easteregg::before,
#blackhole-easteregg::after { content: none !important; display: none !important; }
#blackhole-easteregg svg {
position: absolute;
inset: 0;
width: 100%;
height: 100%;
overflow: visible;
filter: drop-shadow(0 0 4px rgba(255, 255, 255, 0.45));
animation: planet-flare 34s ease-in-out infinite;
}
#blackhole-easteregg:hover,
#blackhole-easteregg:focus-visible { opacity: 1; transform: scale(1.08); }
#blackhole-easteregg:hover svg { filter: drop-shadow(0 0 7px rgba(255, 255, 255, 0.9)); }
#blackhole-easteregg:focus-visible { outline: 2px solid rgba(255, 255, 255, 0.85); outline-offset: 4px; }
#blackhole-easteregg.flare svg { animation: planet-blink 1.1s ease-in-out 1; }
/* 34초에 한 번 짧게 — 종전 star-flare 와 같은 박자. 규칙적 호흡은 장식으로 읽히지만 드문 반짝임은 눈이 따라간다 */
@keyframes planet-flare {
0%, 88%, 100% { opacity: 0.92; filter: drop-shadow(0 0 4px rgba(255, 255, 255, 0.45)); }
91% { opacity: 1; filter: drop-shadow(0 0 10px rgba(255, 255, 255, 0.95)); }
94% { opacity: 0.92; filter: drop-shadow(0 0 4px rgba(255, 255, 255, 0.45)); }
}
@keyframes planet-blink {
0%, 100% { filter: drop-shadow(0 0 4px rgba(255, 255, 255, 0.45)); }
40% { filter: drop-shadow(0 0 11px rgba(255, 255, 255, 1)); }
}
.site-title h1,
.site-tagline,
.site-subtitle { position: relative; z-index: 2; } /* 유성은 글자 뒤로 지나간다 */
/* 연출층은 제목 상자보다 위로 60px · 오른쪽으로 16px 더 열어 둔다(2026-09-13).
위 — 게이트가 상자 윗변에 붙어 있어 위로 오르는 로켓이 윗변에서 머리가 잘렸다.
오른쪽 — 폰(≤768)에선 게이트가 상자 오른쪽 밖으로 4~6px 나가 있어 퇴장 배우(40px)가 10px 잘렸다(접시에서 눈에 띔).
제목 상자 오른쪽 여백은 모든 폭에서 20px 이상이라(320~1440 실측) 16px 은 가로 스크롤을 만들지 않는다. 왼쪽·아래는 종전대로 상자에서 자른다.
svg 는 그만큼 안쪽에 앉혀 좌표계(제목 상자 기준)를 그대로 둔다. */
.hero-meteor { position: absolute; inset: -60px -16px 0 0; z-index: 1; pointer-events: none; overflow: hidden; }
.hero-meteor svg { position: absolute; top: 60px; left: 0; right: 16px; bottom: 0; width: calc(100% - 16px); height: calc(100% - 60px); overflow: visible; }
@media (max-width: 768px) {
#blackhole-easteregg { width: 28px !important; height: 28px !important; top: -2px !important; right: -4px !important; }
}
@media (prefers-reduced-motion: reduce) {
#blackhole-easteregg svg,
#blackhole-easteregg.flare svg { animation: none !important; }
#blackhole-easteregg { transition: none; }
}
/* ── 🪐✈️🛸 히어로 회전 게이트 (2026-09-13 · 조변 제안) — 행성·비행기·접시가 한 자리를 돌아가며 선다. 연출은 script.js initHeroGate ── */
#blackhole-easteregg { transition: opacity 0.9s ease, transform 0.35s ease; } /* 다음 그림이 떠오르는 0.9초 */
#blackhole-easteregg.moving { transition: opacity 0.2s ease; } /* 퇴장 순간 단추는 빨리 비운다 */
#blackhole-easteregg[data-skin="plane"] svg,
#blackhole-easteregg[data-skin="saucer"] svg { filter: drop-shadow(0 0 3px rgba(255, 255, 255, 0.5)); }
.hero-meteor .hg-actor { filter: drop-shadow(0 0 2px rgba(255, 255, 255, 0.5)); } /* 글로우는 얇게 — 실루엣이 뭉개지지 않게 */
.hero-meteor .hg-actor.aglow { filter: drop-shadow(0 0 3px #d9f0ff) drop-shadow(0 0 9px rgba(120, 200, 255, 0.75)); }
@media (max-width: 768px) {
#blackhole-easteregg[data-skin="plane"],
#blackhole-easteregg[data-skin="saucer"] { width: 32px !important; height: 32px !important; top: -4px !important; right: -6px !important; } /* 실루엣은 행성보다 커야 읽힌다 */
}
/* ── 🚀 회전 게이트 넷째: 로켓 + 노스포트 발사 관제 모달 (2026-09-13) ── */
#blackhole-easteregg[data-skin="rocket"] svg { filter: drop-shadow(0 0 3px rgba(255, 255, 255, 0.5)); }
@media (max-width: 768px) {
#blackhole-easteregg[data-skin="rocket"] { width: 32px !important; height: 32px !important; top: -4px !important; right: -6px !important; }
}
.northport-modal-backdrop { display: none; position: fixed; inset: 0; z-index: 10000; align-items: center; justify-content: center; }
.northport-modal-backdrop.active { display: flex; }
.northport-modal-backdrop.active .dim-card { transform: none; }
.dim-route.np-route::before { content: "LAUNCH CYCLE"; }
/* ═══════════════════════════════════════════════════════════════════════════
서비스 카드 «설명 한 줄» (2026-09-21 · 랩 lab2 에서 세 시안을 견주고 조변이 고른 안)
폰 3열 정사각 → 2열로 넓히고 제목 아래 설명 한 줄. 이미지는 쓰지 않는다.
🚨 카드 모양을 건드리는 규칙은 .service-card 와 .smart-site-card 에 «항상 함께» 적는다
— 둘은 클래스가 다른데 같은 격자를 쓴다. 한쪽만 적으면 사이트 카드만 키가 두 배가 된다.
═══════════════════════════════════════════════════════════════════════════ */
.services-grid {
grid-template-columns: repeat(2, 1fr) !important;
gap: 0.7rem !important;
grid-auto-rows: 1fr; /* 설명이 한 줄인 카드와 두 줄인 카드의 키를 맞춘다 */
}
.service-card,
.smart-site-card {
aspect-ratio: auto !important;
min-height: 0 !important;
padding: 0.6rem 0.7rem 0.65rem !important;
justify-content: center;
}
/* 아이콘 아래 여백 — 카드 키를 줄이려고 조인다 */
.service-card .service-icon,
.smart-site-card .service-icon {
margin-bottom: 0.3rem !important;
}
/* 🚨 제목·설명 자리를 «두 줄분»으로 고정한다.
`grid-auto-rows: 1fr` 은 «그 격자 안에서만» 키를 맞춘다. 그래서 업무도구 격자에 제목이 두 줄인 카드가
하나라도 있으면(신구주소·우편번호 관할법원 찾기) 그 한 장이 열여덟 장을 전부 밀어 올려,
옆 카테고리보다 두꺼워 보인다(2026-09-21 조변 제보 · 폭 453~480px 에서 업무 134 / 사이트 116).
자리를 미리 잡아 두면 줄 수가 달라도 카드 키가 같다. */
.service-title {
white-space: normal;
font-size: clamp(0.82rem, 3.4vw, 0.95rem) !important;
-webkit-line-clamp: 2;
min-height: 2.5em;
}
.service-tagline {
min-height: 2.65em; /* 위 주석과 같은 이유 — 설명이 한 줄인 카드와 두 줄인 카드의 키를 맞춘다 */
font-family: var(--font-body);
font-size: 0.72rem;
font-weight: 500;
line-height: 1.35;
letter-spacing: -0.02em;
color: var(--ink-soft);
margin: 2px 0 0; /* 제목 자리를 두 줄로 잡아 두므로, 한 줄짜리 제목 아래가 벌어져 보이지 않게 붙인다 */
word-break: keep-all;
overflow: hidden;
display: -webkit-box;
-webkit-line-clamp: 2;
-webkit-box-orient: vertical;
}
/* 설명이 그 자리를 대신하므로 파란 보조 문구는 접는다 */
.google-store-text,
.special-info-text {
display: none !important;
}
.smart-site-content {
display: flex;
flex-direction: column;
align-items: center;
}
/* 카드가 넓어지면 설명은 한 줄로 끝난다 — 두 줄 자리를 잡아 둘 이유가 없다.
(두 칸이어도 480px 부터는 카드 안쪽이 200px 을 넘어 설명이 한 줄에 들어간다) */
@media (min-width: 480px) {
.service-tagline {
min-height: 1.4em;
}
}
@media (min-width: 600px) {
.services-grid {
grid-template-columns: repeat(3, 1fr) !important;
gap: 0.9rem !important;
}
}
@media (min-width: 1024px) {
.services-grid {
grid-template-columns: repeat(4, 1fr) !important;
gap: 1.1rem !important;
}
.service-card,
.smart-site-card {
padding: 0.85rem 0.85rem 0.8rem !important;
}
.service-tagline {
font-size: 0.78rem;
}
}
/* ═══════════════════════════════════════════════════════════════════════════
「새로 단장한 도구」 띠 (2026-09-21 · 조변 «최근 개편한 3~5개만 16:9 카드로 · 매달 갈아 끼워»)
폰은 다음 카드가 살짝 보이게 밀어 넘기고, 1024px 이상에서는 다섯 장이 한 줄로 선다.
═══════════════════════════════════════════════════════════════════════════ */
.fresh-band {
margin-bottom: 2.2rem;
}
.fresh-month {
font-family: var(--font-body, sans-serif);
font-size: 0.78rem;
font-weight: 600;
color: var(--ink-light, #7b8899);
letter-spacing: -0.01em;
white-space: nowrap;
}
/* 가로로 미는 띠 — 폰에서는 다음 카드가 살짝 보여 «더 있다»를 알린다 */
.fresh-rail {
display: grid;
grid-auto-flow: column;
grid-auto-columns: 78%;
gap: 0.75rem;
overflow-x: auto;
overflow-y: hidden;
scroll-snap-type: x mandatory;
-webkit-overflow-scrolling: touch;
padding: 2px 2px 10px;
scrollbar-width: thin;
scrollbar-color: var(--line-strong, #c3d0dc) transparent;
}
.fresh-rail::-webkit-scrollbar {
height: 6px;
}
.fresh-rail::-webkit-scrollbar-thumb {
background: var(--line-strong, #c3d0dc);
border-radius: 999px;
}
.fresh-card {
display: block;
text-decoration: none;
color: inherit;
scroll-snap-align: start;
background: var(--card, #fff);
border: 1px solid var(--line, #d9e2ea);
border-radius: var(--r-md, 14px);
overflow: hidden;
cursor: pointer;
box-shadow: var(--shadow-card, 0 1px 2px rgba(16, 32, 58, 0.04));
transition: transform 0.25s ease, box-shadow 0.25s ease, border-color 0.25s ease;
}
.fresh-card:hover,
.fresh-card:focus-visible {
transform: translateY(-3px);
box-shadow: var(--shadow-card-hover, 0 14px 30px -14px rgba(11, 74, 118, 0.32));
border-color: var(--line-strong, #c3d0dc);
outline: none;
}
.fresh-thumb {
display: block; /* 🚨 이라 기본이 inline 이다 — block 을 주지 않으면 aspect-ratio 가
안 먹고 카드 본문(제목·설명)이 잘려 그림만 보인다(2026-09-21 실제로 겪었다) */
position: relative;
aspect-ratio: 16 / 9;
background: var(--accent-soft, #e3eef7);
}
.fresh-thumb img {
width: 100%;
height: 100%;
object-fit: cover;
display: block;
}
.fresh-tag {
position: absolute;
left: 9px;
top: 9px;
background: var(--seal, #c8432f);
color: #fff;
font-family: var(--font-body, sans-serif);
font-size: 0.63rem;
font-weight: 700;
letter-spacing: -0.02em;
padding: 3px 8px;
border-radius: 999px;
box-shadow: 0 2px 6px rgba(200, 67, 47, 0.28);
}
.fresh-body {
display: block;
padding: 0.7rem 0.85rem 0.85rem;
}
.fresh-title {
display: block;
font-family: var(--font-body, sans-serif);
font-size: 0.95rem;
font-weight: 700;
color: var(--ink, #10203a);
margin: 0;
letter-spacing: -0.03em;
word-break: keep-all;
}
.fresh-desc {
display: block;
font-family: var(--font-body, sans-serif);
font-size: 0.76rem;
font-weight: 500;
line-height: 1.4;
color: var(--ink-soft, #44546a);
margin: 4px 0 0;
letter-spacing: -0.02em;
word-break: keep-all;
}
@media (min-width: 600px) {
.fresh-rail {
grid-auto-columns: 45%;
gap: 0.9rem;
}
}
/* 넓은 화면에서는 다섯 장이 한눈에 — 밀 필요가 없다 */
@media (min-width: 1024px) {
.fresh-rail {
grid-auto-flow: row;
grid-template-columns: repeat(5, 1fr);
grid-auto-columns: auto;
overflow: visible;
gap: 1rem;
padding-bottom: 2px;
}
.fresh-title {
font-size: 0.92rem;
}
}
@media (prefers-reduced-motion: reduce) {
.fresh-card,
.fresh-card:hover {
transition: none;
transform: none;
}
}
/* 또박노트 카드 «Google Play 공식 앱» 표지 (2026-10-09 조변 «공식 앱 · 다운로드 가능을 특화된 톤으로») */
.service-card .google-store-text.store-badge {
display: inline-flex !important; /* 다른 보조 문구는 접혀 있다(위 «설명이 그 자리를 대신») · 이 표지만 다시 편다 */
flex-direction: column;
align-items: center;
gap: 1px;
margin: 6px auto 0;
padding: 3px 9px 4px;
border-radius: 999px;
background: linear-gradient(180deg, #f2f8fd, #e3eef7);
border: 1px solid #b9d3ea;
color: var(--accent);
line-height: 1.15;
}
.service-card .store-badge .store-k {
display: inline-flex; align-items: center; gap: 4px;
font-family: var(--font-utility);
font-size: .66rem; font-weight: 700; letter-spacing: .05em; text-transform: uppercase;
}
.service-card .store-badge .store-k::before { /* 재생 삼각 */
content: ""; width: 0; height: 0;
border-left: 6px solid #2d7fc0; border-top: 4px solid transparent; border-bottom: 4px solid transparent;
}
/* 또박노트는 설명 한 줄 대신 이 표지를 보여 준다 — 표지를 더 얹으면 같은 묶음 카드 스무 장이 다 같이 40px 커진다(2026-10-09 조변 «1번») */
.service-card[data-service-id="ttobaknote"] .service-tagline { display: none !important; }
.service-card .store-badge .store-v { font-size: .66rem; font-weight: 800; letter-spacing: -0.02em; color: var(--ink); white-space: nowrap; }
/* 설명 한 줄(17px + 2px)과 같은 높이에 맞춘다 — 넓은 카드는 한 줄, 좁은 카드는 두 줄을 촘촘히 */
.service-card .google-store-text.store-badge { margin-top: 2px; padding: 1px 9px 2px; line-height: 1.1; }
@media (min-width: 760px) {
.service-card .google-store-text.store-badge { flex-direction: row; gap: 5px; padding: 1px 9px; }
}