@import url('https://cdn.jsdelivr.net/gh/orioncactus/pretendard@1.3.9/dist/web/static/pretendard.css'); @import url('https://fonts.googleapis.com/css2?family=Nanum+Myeongjo:wght@400;700;800&display=swap'); /* [T116 §H-7] index.html의 보강 — 삼성 인터넷/크롬의 "웹사이트 다크 모드" 강제 반전을 막는다. 다크 테마 신설이 아니라 "라이트 전용" 선언. */ html { color-scheme: light only; } /* [T230-G, 대표 지시 — "설명문이 줄 끝에서 어색하게 끊긴다... 마침표마다 강제 줄바꿈하지 마라"] text-wrap:pretty는 브라우저가 문단 마지막 줄에 한 단어만 남는 "고아 단어"를 피하도록 줄바꿈을 재배치한다(지원 브라우저에서만, 미지원은 기존 normal과 동일하게 조용히 무시 — 점진적 향상이라 전 로케일에 안전하게 걸 수 있음). 이 SPA는 설명문 클래스가 `.card-desc`/`.location-desc`/ `.login-desc`/`.oi-desc`/`.people-desc`/`.t-desc`/`.h2-save-tile-desc`처럼 화면마다 접미사만 같은 개별 클래스로 흩어져 있어(단일 `.desc` 클래스 없음, 실측 확인) `p`(문단 요소 전반)에 거는 게 더 안전·완전하다 — 이미 한 줄인 문단엔 영향이 없는 순수 화장용 속성이라 넓게 걸어도 부작용이 없다. word-break:keep-all은 한국어 전용으로 :lang(ko) 스코프 — 이 문서()는 로케일 전환마다 lang.js의 setLang()이 갱신한다(그 파일 주석 참고, 예전엔 "ko"로 고정돼 있어 :lang() 선택자가 무의미했다). ja/zh-Hant는 실측 결과(대표 확정) keep-all을 걸면 공백 없는 CJK 텍스트가 유효한 줄바꿈 지점을 못 찾아 넘칠 위험이 있어 기본값(normal, 문자 단위 줄바꿈 허용) 그대로 둔다 — text-wrap:pretty만 공통 적용. */ p { text-wrap: pretty; } :lang(ko) p { word-break: keep-all; } /* ── 명조 폰트 단축 ── */ :root { --myeongjo: 'Nanum Myeongjo', 'MaruBuri', 'Gungsuh', Georgia, serif; --pretendard: 'Pretendard', -apple-system, BlinkMacSystemFont, 'Apple SD Gothic Neo', 'Noto Sans KR', sans-serif; /* #지시서_20260714저녁 1 */ } :root { /* ── 배경 (한지 팔레트) ── */ /* [T308-6 §1, 대표 지시 — "전 화면 바탕을 흰색으로, --tg-surface는 그대로"] body 캔버스를 흰색으로 통일 — --bg만 바꾼다(body{background:var(--bg)}, 아래 1줄이 유일한 소비처, 실측 확인). --bg-2는 손대지 않는다 — 이 토큰은 body 데스크톱 재정의(아래 미디어쿼리) 외에 서브카드 배경 7곳(라인 629/692/950/1070/1184/1355/1905)에서도 쓰여, 여기서 값을 바꾸면 "페이지 바탕"이 아니라 그 서브카드들까지 같이 흰색으로 바뀐다(대표 지시 범위 밖 — "카드· 섹션 면"은 그대로 두라는 지시와 충돌). 대신 데스크톱 재정의 셀렉터(아래) 쪽에서 --bg-2 참조를 걷어내고 이미 흰색인 --bg-1을 직접 쓴다 — --bg-2 토큰 자체와 그 다른 7개 소비처는 전부 무변경. --tg-surface(카드·보조버튼·안내박스 면, .shop-band-card 1곳만 참조)도 완전히 별개 토큰이라 애초에 무관. */ --bg: #FFFFFF; /* 흰 캔버스 — body 배경(구 한지 미색 #FBF7EF) */ --bg-1: #FFFFFF; /* 백자 흰 — 카드/화면 */ --bg-2: #F5F0E8; /* 살짝 아이보리 — 서브 카드(무변경, 페이지 배경과 무관) */ --bg-nav: rgba(251,247,239,0.97); /* 네비 오버레이 */ --bg-modal: rgba(26,22,20,0.55); /* 모달 딤 — 어두운 채로 유지 */ --bg-over: rgba(251,247,239,0.85); /* 반투명 오버레이 */ /* ── 텍스트 계층 (먹 계열) ── */ --text-1: #1A1614; /* 먹색 — primary */ --text-2: #6B5E52; /* 담먹 — secondary */ --text-3: #9A8F80; /* 옅은 먹 — muted */ --line: #E8E0D4; /* 한지 경계 — border */ /* ── 쪽빛 액센트 (틸→쪽빛) ── */ --accent: #26547C; --accent-dk:#1A3F6B; --ac-70: rgba(38,84,124,0.7); --ac-60: rgba(38,84,124,0.6); --ac-50: rgba(38,84,124,0.5); --ac-35: rgba(38,84,124,0.35); --ac-30: rgba(38,84,124,0.3); --ac-25: rgba(38,84,124,0.25); --ac-20: rgba(38,84,124,0.2); --ac-18: rgba(38,84,124,0.18); --ac-15: rgba(38,84,124,0.15); --ac-12: rgba(38,84,124,0.12); --ac-10: rgba(38,84,124,0.1); --ac-08: rgba(38,84,124,0.08); /* ── 그림자 (라이트 모드 — 훨씬 옅게) ── */ --sh-65: rgba(0,0,0,0.12); --sh-60: rgba(0,0,0,0.1); --sh-50: rgba(0,0,0,0.08); --sh-40: rgba(0,0,0,0.06); /* ── 기능 확장색 (CSS 변수로만 사용 — hex 직접 금지) ── */ --warn: #B8912A; /* 금박 — 부분완료·내여행 탭 */ --accent-hover: #b03428; /* 단청 호버 — 버튼 :hover 다크 */ --border-mid: #C8C0B4; /* 중간 경계 — 진한 구분선 */ } /* [T308 §0, 1차 지시 — 네이비/빨강 2색] 폐기됨, 이력만 보존. [T308-1c, 대표 확정 — "트리플 결 밝은 팔레트 + 오션 시안"] 폐기됨(아래 1d가 정정) — 1c는 --tg-red까지 오션 값으로 재도색해 "행동(CTA)"과 "선택 상태"를 하나의 색으로 합쳤는데, 이 토큰이 로고("!go!" 글자, views/index.html .h2-logo .go)에도 체인으로 물려 있어(§0 코멘트가 "로고는 이 토큰 체계와 무관"이라 잘못 적어놨었다 — 실제로는 .h2-logo .go{color:var(--h2-coral)} → --h2-coral:var(--tg-red) 2단 체인으로 로고까지 오션으로 물들었다) 로고와 CTA가 둘 다 시안이 되는 결함으로 이어졌다. [T308-1d, 대표 확정(최종) — "1c 색 배정 정정"] 역할별로 다시 분리한다: 로고·주요 CTA 버튼(일정 만들기·성지 보기·일정 열기 류)·상단 메뉴 활성 밑줄 = 빨강(--tg-red, 리터럴 값으로 복원, 더 이상 오션 값을 재참조하지 않음). 선택 상태(활성 탭·칩·선택 링·담기 체크)·필터·보조 요소는 오션 그대로(--tg-navy 계열은 1c 값 유지, 이번에 건드리지 않는다). 이번 라운드부터는 토큰 값 바꿔치기가 아니라 소비처 단위로 재배선하는 원칙 — 로고는 아예 공유 토큰 체인에서 빼서 전용 값을 쓴다(아래 §0-b, views/index.html .h2-logo .go 규칙 참고). 기존 --accent(#26547C 쪽빛)·--accent-hover는 정적 SEO 1,964장·미개편 화면이 계속 참조하므로 무변경(전량 재생성 금지 원칙). */ :root { --tg-accent: #0a9cbf; /* 밝은 오션 — 선택 상태(칩 테두리·선택 링·아이콘) 전용, 흰 글자 얹지 않음 */ --tg-accent-dark: #0881a0; /* 진한 오션 — 선택 상태 중 흰 글자가 얹히는 채움(활성 탭·칩 배경)용, 대비 4.51:1 통과 */ --tg-accent-light: #e4f4f8; /* 연한 칩 배경 */ --tg-surface: #f2f7f9; /* 카드 배경·보조 버튼·안내 박스 면 */ --tg-navy: var(--tg-accent-dark); /* [1c 유지, 1d 무변경] 선택 상태 계열 */ --tg-navy-bg: var(--tg-accent-light); /* [1c 유지, 1d 무변경] 선택 상태 옅은 배경 */ /* [1d 정정] --tg-red를 리터럴 빨강으로 복원 — 오션 값 재참조를 끊는다. 이 토큰을 직접/간접 (--h2-coral 경유) 소비하는 요소는 전부 원래 빨강으로 돌아간다: CTA 버튼(일정 만들기·성지 보기 등)·상단 메뉴 활성 밑줄·3단계 뱃지(01/02/03)·검색 아이콘. 로고만은 이 토큰조차 거치지 않도록 별도 값으로 뺐다(views/index.html 참고) — 다음 색 라운드에서 이 토큰이 다시 바뀌어도 로고가 영향받지 않게 하기 위함. */ --tg-red: #d94436; --tg-red-hover: #b3352a; /* [1d 신설] CTA 버튼 호버 전용 — 이전 라운드엔 정의된 호버가 없었다 */ --tg-bg: #FFFFFF; /* 본문 흰 바탕(§0) — 미개편 화면은 여전히 --bg(한지톤) 참조 */ /* [1d 정정 — 대표 확정 "푸터 색 변경"] 연한 면 폐기 → 진한 오션 채움(흰 글자)으로 재변경. 밝은 면 버전(1c 한 라운드만 쓰인 값)은 폐기 — 아래 footer 규칙도 전부 흰 글자용으로 같이 고쳤다. */ --tg-footer: var(--tg-accent-dark); } /* [T131 재발행 — 레이아웃 전용 개선, 색 변경 없음] 여백·컨테이너·라운드 토큰 — 색 토큰은 위 블록에서 단 1px도 안 건드렸다(값 무변경 증명은 커밋 보고에 hex 집합 대조로 첨부). 컨테이너 폭은 그동안 화면마다 1120px/1180px 두 값이 따로 있었다(views/index.html #app-root 기본 vs 홈(#screen1)만 별도 override, .h2-wrap도 자체적으로 두 값이 충돌) — 여기 하나로 합쳐서 그 값들을 대체한다. 스페이싱 스케일은 기존에 실제로 가장 많이 쓰이던 값들(app.css 전체 여백값 실측 집계 — 16px×27회, 14px×24회, 8px×21회, 12px×19회, 24px×13회가 최빈값)을 그대로 스케일로 승격한 것이지 새로 발명한 임의 값이 아니다. */ :root { --content-max: 1240px; /* [T131] 데스크톱 콘텐츠 최대폭 통일 — 이전 1120px/1180px 두 값을 대체 */ --bottom-nav-h: 64px; /* [T131 재발행 §4c 승인] .bottom-nav 높이 — 여러 곳에서 64px를 매직넘버로 따로 박아 쓰고 있었다(.screen 패딩, 이어하기 미니바 bottom 값). 이 변수 하나로 참조하게 정리 */ --space-1: 4px; --space-2: 8px; --space-3: 12px; --space-4: 16px; --space-5: 24px; --space-6: 32px; --space-7: 48px; --radius-sm: 10px; /* 칩/입력 등 작은 요소 */ --radius-md: 14px; /* 일반 카드 */ --radius-lg: 20px; /* 큰 카드/시트 */ /* ── 레이어 z-index(고정 계층) — [T205, 대표 지시 "임시 땜질이 아니라 모달은 항상 최상위 레이어 컨테이너에 마운트 원칙으로"] 실측(모바일 시트·데스크톱 팝오버 둘 다) — 확인/경고 모달 다수가 .h2-sheet(10000)·.h2-popover(10001)보다 낮은 9800~10000대 z-index를 써서 그 아래 깔렸다(views/index.html의 warnModal·zoneModal·departSearchModal, app.css의 .location-modal·.cs-modal, ui-core2.js가 동적 생성하는 한도/로그인 모달 4종 전부 동일 결함 — 상세 목록은 T205 보고서 §2). 새 모달을 추가할 때는 반드시 --z-modal-top을 재사용할 것(매직넘버 금지) — 이 토큰 하나만 올리면 전체가 함께 올라가 재발을 막는다. */ --z-sheet: 10000; /* .h2-sheet(원박스 위젯 모바일 시트) — 화면 전체를 덮는 1차 레이어 */ --z-popover: 10001; /* .h2-popover·.cal-overlay 등 시트/화면 위에서 여는 보조 팝오버 */ --z-modal-top: 10500; /* 확인·경고·한도 모달 전용 — 시트·팝오버 어느 쪽이 열려 있어도 항상 그 위 */ } * { margin: 0; padding: 0; box-sizing: border-box; } /* [T131 재발행 §4 승인] 키보드 포커스 링 전면 신설 — 이 파일도 views/index.html도 :focus-visible이 단 한 곳도 없었다(마우스 클릭시엔 안 보이고 Tab 키 이동시에만 보이는 현대적 방식이라 클릭 사용자 경험엔 무해). 기존 --accent 토큰을 그대로 재사용(신규 색 추가 아님, "색상 값 무변경" 원칙 준수) — outline은 배경색과 별개 레이어라 어떤 배경 위에서도 항상 보인다. */ :focus-visible { outline: 2px solid var(--accent); outline-offset: 2px; } /* [T92-R §B-5 재수정, 대표 실측] 홈 히어로(#h2Hero, views/index.html)의 100vw 풀블리드 브레이크아웃이 스크롤바 폭만큼 넘치지 않게 하려면 overflow-x:hidden이 "진짜 뷰포트 전체 폭인" 요소에 있어야 한다 — #app-root(데스크톱에서 max-width:1120px "폰 프레임")나 그 안의 #h2Root에 걸면 그 좁은 경계에서 브레이크아웃이 잘려버린다(실측 재현 원인). body는 전 화면·모든 콘텐츠에 공용이라 여기 두는 게 유일하게 안전한 지점(가로 스크롤바 자체를 막는 흔한 관행이라 다른 화면에도 무해). */ body { background: var(--bg); color: var(--text-1); font-family: 'Apple SD Gothic Neo', 'Noto Sans KR', sans-serif; min-height: 100vh; overflow-x: hidden; display: flex; justify-content: center; } /* ─── 앱 전체 래퍼 ─── [T308, 대표 지시 — "#app-root의 max-width:480px 전역 제한을 제거하고, 그 폭 제한을 화면별 컨테이너 클래스(.screen-narrow)로 내린다"] 이전엔 데스크톱에서도 항상 480px 폰 목업(그림자 프레임)이었다 — 이제 #app-root 자체는 폭 제한이 없는 순수 래퍼(배경·그림자 장식도 제거, "폰 목업 그림자 프레임 장식은 제거" 지시)이고, 개편 대상 화면(홈 등)은 진짜 반응형으로 퍼지며, 아직 개편 안 된 화면은 각자 .screen-narrow를 붙여 기존 480px 중앙 정렬 외관만 유지한다(흰 풀폭 배경 가운데 480 콘텐츠 — 그림자 카드 느낌은 없음). */ #app-root { width: 100%; min-height: 100vh; position: relative; background: var(--bg-1); /* [T308 §0 "본문 흰 바탕"] 배경은 유지(--bg-1은 이미 흰색) — 지시 대상은 max-width·그림자(폰 목업 장식)뿐, 배경 무변경. */ } /* [T308-1, 정지점2 갱신] 미개편 화면 전용 — 기존 480px 폭·중앙정렬만 재현(그림자·배경색 없음). 정지점2에서 §4(screen5·screen7)·§5(screen3)가 이 클래스에서 빠져나가 남은 대상은 6개 (screen2·4·6·8·9·10, 아래 320행 인근 코멘트도 같이 갱신). */ .screen-narrow { max-width: 480px; margin: 0 auto; width: 100%; } /* [T308-1, 정지점2 — §4 탈프레임 새 셸] screen5(커뮤니티)·screen7(내 여행)는 screen3(§5)처럼 자체 데스크톱 그리드가 없던 단순 리스트/카드형 화면이라, home의 .h2-wrap(1240px, 마케팅 레이아웃)을 그대로 쓰기엔 넓다 — 목록·설정류 화면에 흔한 중간 폭(760px)으로 새 셸을 준다. .screen-inner 자체에 적용(내부 tab bar padding:0 20px 등 기존 좌우 패딩은 그대로 유지되고, 이 규칙은 그 바깥에서 전체를 가운데로 좁히기만 한다 — 내부 마크업 무수정). */ #screen5 > .screen-inner, #screen7 > .screen-inner { max-width: 760px; margin: 0 auto; width: 100%; } /* [T308-7 C-2, 대표 지시 — "독립 섹션으로 분리해 새 카드 서식으로 보존"] 여행 스타일·페이스 카드(#tripStyleCard, views/index.html) 등 결과 화면의 일반 카드 섹션에 쓰는 공용 클래스 — 흰 배경+옅은 테두리로, T308 마라톤 전체가 써온 카드 관례(예: 아래 .mytrip-hero-card)와 같은 문법. */ .h2-section-card{background:var(--h2-bg,#fff);border:1px solid var(--h2-line);border-radius:16px;padding:16px;margin-bottom:14px;} /* [T308-3 §E, 대표 지시 — "내 여행 시안 레이아웃"] 히어로 카드(예정 탭 최상단 1건)와 컴팩트 사진 카드(나머지 전부) 공용 CSS. <768px는 그리드 1열(지시 원문), 히어로는 세로 스택(사진 위·콘텐츠 아래) — 768px부터 히어로는 좌우 분할, 그리드는 다열로 넓어진다. */ .mytrip-hero-card{display:flex;flex-direction:column;background:var(--h2-cream);border:1px solid var(--h2-line);border-radius:16px;overflow:hidden;margin-bottom:16px;} .mytrip-hero-photo{height:160px;background-size:cover;background-position:center;background-color:var(--h2-line);cursor:pointer;flex-shrink:0;} .mytrip-hero-body{padding:16px;} @media(min-width:768px){ .mytrip-hero-card{flex-direction:row;} .mytrip-hero-photo{width:38%;height:auto;min-height:200px;} .mytrip-hero-body{flex:1;padding:22px;} } .mytrip-grid{display:grid;grid-template-columns:1fr;gap:12px;} @media(min-width:768px){ .mytrip-grid{grid-template-columns:repeat(auto-fill,minmax(200px,1fr));} } .mytrip-compact-card{position:relative;border-radius:14px;overflow:hidden;height:150px;background-size:cover;background-position:center;background-color:var(--h2-line);cursor:pointer;transition:filter .15s;} .mytrip-compact-overlay{position:absolute;left:0;right:0;bottom:0;padding:10px 12px;background:linear-gradient(transparent,rgba(0,0,0,.62));} /* ─── §대표님 지시(2026-07-24): 데스크톱 화면배치 정리 — A안 ─── 물놀이 지도 오버레이(#_wpOverlay, document.body에 직접 fixed로 붙는 모바일 전용 오버레이)가 데스크톱 넓은 뷰포트에서 뷰포트 전체 폭(100vw)으로 퍼져 #app-root(480px 프레임)와 어긋나던 문제. JS의 인라인 style(top:0;left:0;right:0;bottom:0;width:100%)은 미디어쿼리를 가질 수 없어 !important로 데스크톱 폭에서만 좌우를 좁혀 #app-root와 동일한 중앙 정렬 프레임을 적용한다. 모바일(768px 미만)은 media query 밖이라 기존 풀폭 그대로 — 회귀 없음. .demo-nav(위 93~99행)가 이미 쓰는 것과 동일한 left:50%+translateX(-50%) 중앙정렬 패턴 재사용. */ @media (min-width: 768px) { #_wpOverlay { left: 50% !important; right: auto !important; width: 100% !important; max-width: 480px !important; transform: translateX(-50%); } } /* [T45-3] 데스크톱(≥768px) 프레임 톤 정리, 앱 컨테이너 그림자 소폭 축소. 모바일(768px 미만)은 media query 밖이라 무변. DOM 변경 없음. [T308-6 §1, 대표 지시 — "전 화면 바탕을 흰색으로"] 여기서 쓰던 --bg-2(서브카드와 공유하는 토큰, 위 :root 코멘트 참고)를 걷어내고 이미 흰색인 --bg-1을 직접 쓴다 — --bg-2 자체 값은 무변경으로 남겨 다른 7곳 소비처에 영향 없음. */ @media (min-width: 768px) { body { background: var(--bg-1); } #app-root { box-shadow: 0 0 40px var(--sh-50); } } /* ─── 화면 공통 ─── */ .screen { display: none; min-height: 100vh; background: var(--bg-1); flex-direction: column; overflow-y: auto; } .screen.active { display: flex; } /* 지도 화면: 고정 높이로 카카오맵 정상 렌더링 */ #screen8 { min-height: unset; height: 100vh; overflow: hidden; } #screen8 .screen-inner { height: 100%; overflow: hidden; } /* [T79-G §G4] 대표님 실기기 판정: 33vh 고정이 하단 흰 공간(탭바 위 빈 영역)을 남김 — 뷰포트 기준 높이로 변경, 남은 공간을 전부 차지하도록 flex:1로 전환(#mapBodyRow가 이미 flex:1;display:flex;min-height:0로 준비돼 있어 별도 계산식 없이 자연히 탭바 바로 위까지 채워짐). 과거(T77-3 B2) "flex:1은 hidden 상태에서 0이 됨" 우려는 map.js의 initKakaoMap() 내 ResizeObserver 대기 로직(0크기면 실제 표시될 때까지 대기 후 재진입)이 이미 방어하고 있어 무접촉으로 확인. */ #screen8 #kakaoMapWrap { flex: 1; height: auto; min-height: 220px; } #screen8 #kakaoMapContainer { height: 100% !important; min-height: 220px; } /* 입력 폼 CTA 버튼 가림 방지 — §[T40-3 A-6-3](2026-07-29, Fable 판정): 하드코딩 150px 폐지. --bottombar-h는 JS(lang.js _updateBottomBarPad)가 .bottom-bar 실측 높이로 채운다. JS 실행 전(최초 페인트) 폴백으로만 150px 유지 — 평상시엔 실측값이 우선한다. */ #screen2 .container { padding-bottom: calc(var(--bottombar-h, 150px) + env(safe-area-inset-bottom, 0px)); } /* ─── 진행 바 (상단 데모 네비) ─── */ .demo-nav { position: fixed; top: 0; left: 50%; transform: translateX(-50%); width: 100%; max-width: 480px; z-index: 9999; background: var(--bg-nav); backdrop-filter: blur(8px); border-bottom: 1px solid var(--line); padding: 8px 16px; display: flex; align-items: center; gap: 6px; } .demo-nav span { font-size: 11px; color: var(--text-3); letter-spacing: 0.3px; margin-right: 6px; white-space: nowrap; } .demo-dot { flex: 1; height: 4px; border-radius: 2px; background: var(--line); cursor: pointer; transition: background 0.2s; position: relative; } .demo-dot::after { content: attr(data-label); position: absolute; top: 8px; left: 50%; transform: translateX(-50%); font-size: 10px; color: var(--text-3); white-space: nowrap; } .demo-dot.active { background: var(--accent); } .demo-dot.active::after { color: var(--accent); } .demo-dot:hover { background: var(--ac-50); } /* ─── 로그인 버튼 (우상단) ─── */ .demo-login-btn { background: transparent; border: 1px solid var(--line); color: var(--text-2); font-size: 11px; font-weight: 600; padding: 4px 10px; border-radius: 10px; cursor: pointer; white-space: nowrap; font-family: inherit; /* [T79 §A2] .demo-dot(진행바)가 display:none으로 빠지면서 flex 스페이서 역할을 잃어 로그인 버튼이 로고 옆(좌측)에 붙어버림 — margin-left:auto로 우측 고정. */ margin-left: auto; } .demo-login-btn:hover { border-color: var(--accent); color: var(--accent); } /* ─── 진행률 대시보드 탭 버튼 ─── */ .progress-tab-btn { background: var(--ac-15); border: 1px solid var(--ac-30); color: var(--accent); font-size: 11px; font-weight: 700; padding: 4px 10px; border-radius: 10px; cursor: pointer; white-space: nowrap; flex-shrink: 0; } .progress-tab-btn:hover { background: var(--ac-25); } /* ─── 화면 래퍼 (데모 바 높이 보상) ─── */ .screen-inner { margin-top: 36px; flex: 1; display: flex; flex-direction: column; } /* ─── 진행률 대시보드 화면 ─── */ .progress-screen { display: none; position: fixed; inset: 36px 0 0 0; background: var(--bg-1); overflow-y: auto; z-index: 9990; } .progress-screen.active { display: block; } .progress-screen .ps-inner { max-width: 600px; margin: 0 auto; padding: 24px 20px 60px; } .ps-title { font-size: 18px; font-weight: 800; margin-bottom: 4px; } .ps-sub { font-size: 13px; color: var(--text-3); margin-bottom: 24px; } /* 전체 진행률 큰 원형 */ .overall-ring { display: flex; align-items: center; gap: 20px; background: var(--ac-08); border: 1px solid var(--ac-20); border-radius: 16px; padding: 20px; margin-bottom: 20px; } .ring-wrap { position: relative; width: 80px; height: 80px; flex-shrink: 0; } .ring-wrap svg { transform: rotate(-90deg); } .ring-center { position: absolute; inset: 0; display: flex; flex-direction: column; align-items: center; justify-content: center; } .ring-pct { font-size: 20px; font-weight: 800; color: var(--accent); } .ring-label { font-size: 9px; color: var(--text-3); } .overall-info .oi-title { font-size: 16px; font-weight: 800; margin-bottom: 4px; } .overall-info .oi-day { font-size: 13px; color: var(--accent); font-weight: 700; margin-bottom: 4px; } .overall-info .oi-desc { font-size: 12px; color: var(--text-3); line-height: 1.5; } /* 섹션 헤더 */ .ps-section-title { font-size: 12px; color: var(--text-3); letter-spacing: 0.5px; text-transform: uppercase; margin-bottom: 10px; margin-top: 20px; } /* 진행률 행 */ .prog-row { display: flex; align-items: center; gap: 10px; margin-bottom: 10px; } .prog-label { font-size: 13px; min-width: 130px; color: var(--text-2); flex-shrink: 0; } .prog-bar-wrap { flex: 1; height: 6px; background: var(--line); border-radius: 3px; overflow: hidden; } .prog-bar { height: 100%; border-radius: 3px; transition: width 0.6s ease; } .prog-bar.done { background: var(--accent); } .prog-bar.partial { background: var(--warn); } .prog-bar.none { background: var(--line); width: 100% !important; } .prog-pct { font-size: 12px; font-weight: 700; min-width: 36px; text-align: right; flex-shrink: 0; } .prog-pct.done { color: var(--accent); } .prog-pct.partial { color: var(--warn); } .prog-pct.none { color: var(--text-3); } /* 화면별 3열 진행률 */ .screen-grid { display: grid; grid-template-columns: repeat(2, 1fr); gap: 10px; margin-bottom: 4px; } .screen-card { background: var(--line); border: 1px solid var(--line); border-radius: 12px; padding: 14px; } .sc-name { font-size: 13px; font-weight: 700; margin-bottom: 10px; } .sc-row { display: flex; justify-content: space-between; align-items: center; margin-bottom: 6px; } .sc-row-label { font-size: 11px; color: var(--text-3); } .sc-row-pct { font-size: 11px; font-weight: 700; } .sc-bar-wrap { width: 100%; height: 4px; background: var(--line); border-radius: 2px; overflow: hidden; margin-top: 2px; } .sc-bar { height: 100%; border-radius: 2px; } .close-progress { width: 100%; margin-top: 24px; padding: 14px; background: var(--line); border: 1px solid var(--line); color: var(--text-2); border-radius: 12px; font-size: 14px; cursor: pointer; } /* ════════════════════════════ SCREEN 1 — 랜딩 ════════════════════════════ */ .top-bar { display: flex; justify-content: flex-end; padding: 20px 28px; } .lang-btn { background: var(--line); border: 1px solid var(--line); color: var(--text-1); padding: 6px 14px; border-radius: 20px; font-size: 13px; cursor: pointer; position: relative; } .lang-btn:hover { background: var(--line); } /* ─── 하단 네비게이션 바 ─── */ .bottom-nav { position: fixed; bottom: 0; left: 50%; transform: translateX(-50%); width: 100%; max-width: 480px; height: var(--bottom-nav-h); background: var(--bg-1); border-top: 1px solid var(--line); display: flex; align-items: center; justify-content: space-around; z-index: 9000; padding-bottom: env(safe-area-inset-bottom, 0); box-shadow: 0 -1px 0 var(--line); } .nav-item { display: flex; flex-direction: column; align-items: center; gap: 3px; cursor: pointer; padding: 6px 16px; border-radius: 12px; transition: background 0.15s; color: var(--text-3); font-size: 10px; font-weight: 500; border: none; background: none; position: relative; overflow: hidden; text-decoration: none; /* [T206 §1] 추천코스 항목은 라 브라우저 기본 밑줄 방지 — 나머지