/* ============================================================================ * planner-redesign.css — proto-f 리디자인 스킨 오버레이 (S213) * ---------------------------------------------------------------------------- * 정본 문서: docs/PLANNER.md (§5 프리뷰·롤백 / §0 라우팅 / §7 토큰 / §8 불변식) * 시각 원본: .tmp/planner-prototypes/proto-f.html * * 로드 규칙 (inc/travel-planner-v2/bootstrap.php enqueueAssets): * - t2w_planner_skin_active() 가 true 일 때만 enqueue (프리뷰 ?t2w_planner_skin=1 또는 옵션). * - 캐스케이드 맨 끝(dep = t2w-planner-overrides) → 동일 특정성에서 우세. * - 활성 시 에 .t2w-planner-skin 클래스(서버 렌더). 모든 규칙을 그 아래로 스코프. * * 불변식 (docs/PLANNER.md §8): * - #t2w-planner-v2 스코프 · raw hex 금지(var() 토큰만) · !important 지양(캐스케이드 끝이라 불필요) * - 보존 필수 JS-타겟 id 훼손 금지 · 터치 ≥44px · 768/1024/375 반응형 * * 토큰 출처 (css/variables.css, t2w-variables 핸들): * 샴페인 --t2w-gg / -lite / -deep / -ink / -paper / -dim * hp 페이퍼 --t2w-hp-paper / -2 / -3, --t2w-font-display * 커머스 골드 --color-primary / 네이비 --color-secondary (기존, 행동요소 전용) * ==========================================================================*/ /* --- 스킨 로컬 별칭 (planner 스코프에서 짧게 쓰기) + 활성 검증 마커 -------- */ body.t2w-planner-skin #t2w-planner-v2 { --t2w-skin: "redesign-s213"; /* Phase A 활성 검증용(무시각) — getComputedStyle 로 확인 */ --sk-champ: var(--t2w-gg); --sk-champ-lite: var(--t2w-gg-lite); --sk-champ-deep: var(--t2w-gg-deep); --sk-ink: var(--t2w-gg-ink); --sk-paper: var(--t2w-hp-paper); --sk-paper-2: var(--t2w-hp-paper-2); --sk-gold: var(--color-primary); --sk-navy: var(--color-secondary); --sk-font-display: var(--t2w-font-display); /* 파생 토큰 — proto-f 라인·그림자·틴트. raw hex 금지 규약을 지키려고 * color-mix()로 위 토큰에서 반투명값을 파생(네이비 hairline·샴페인 액센트·웜 그림자). */ --sk-line: color-mix(in srgb, var(--sk-navy) 12%, transparent); /* 기본 hairline */ --sk-line-2: color-mix(in srgb, var(--sk-navy) 7%, transparent); /* 더 옅은 divider */ --sk-line-3: color-mix(in srgb, var(--sk-navy) 18%, transparent); /* 진한 테두리 */ --sk-champ-line: color-mix(in srgb, var(--sk-champ) 32%, transparent); /* 샴페인 테두리 */ --sk-champ-wash: color-mix(in srgb, var(--sk-champ-lite) 20%, transparent); /* 샴페인 배경 워시 */ --sk-glass: color-mix(in srgb, var(--sk-paper) 92%, transparent); /* 헤더 글래스 */ --sk-sh-xs: 0 2px 8px color-mix(in srgb, var(--sk-champ-deep) 12%, transparent); --sk-sh-sm: 0 8px 20px color-mix(in srgb, var(--sk-champ-deep) 15%, transparent); --sk-sh-md: 0 18px 42px color-mix(in srgb, var(--sk-champ-deep) 22%, transparent); } /* ============================================================================ * 아래는 Phase B~D에서 채운다 (proto-f 이식). Phase A = 골격·로드 배선만. * 각 블록 = docs/PLANNER.md §0 라우팅표의 관심사와 1:1. 편집 시 그 표에서 진입. * ==========================================================================*/ /* --- [Phase B] 헤더 / 툴바 (PLANNER.md §1.1 "헤더바") ---------------------- * 대상: #t2w-planner-header.t2w-v29-planner-header (planner-v2.php 정적). * proto-f .hdr 조합: ← 돌아가기 · 제목✎ · 직접고르기 · 저장(ghost) · 공유(navy). * ⚠ display는 만지지 않는다 — 기존 규칙이 모바일 숨김/데스크 flex를 담당(캔버스 포함). * ⚠ "ALL PLANNER" 워드마크는 실제 DOM에 없음(홈아이콘+뒤로+제목뿐) → 워드마크 요소는 * PHP/JS 패스에서 추가해야 함(CSS-only 스코프 밖). 여기선 있는 요소만 리스킨한다. * ------------------------------------------------------------------------- */ body.t2w-planner-skin #t2w-planner-v2 .t2w-v29-planner-header { background: var(--sk-glass); backdrop-filter: blur(16px) saturate(1.3); -webkit-backdrop-filter: blur(16px) saturate(1.3); border-bottom: 1px solid var(--sk-line-2); } body.t2w-planner-skin #t2w-planner-v2 .t2w-v29-ph-left, body.t2w-planner-skin #t2w-planner-v2 .t2w-v29-ph-right { gap: 10px; } /* 홈 아이콘 + 뒤로 링크 — 담백한 잉크, hover 시 샴페인 */ body.t2w-planner-skin #t2w-planner-v2 .t2w-v29-ph-home, body.t2w-planner-skin #t2w-planner-v2 .t2w-v29-ph-back { color: var(--sk-navy); border-radius: 999px; font-weight: 700; transition: background .2s, color .2s; } body.t2w-planner-skin #t2w-planner-v2 .t2w-v29-ph-home:hover, body.t2w-planner-skin #t2w-planner-v2 .t2w-v29-ph-back:hover { background: var(--sk-champ-wash); color: var(--sk-champ-deep); } /* 세로 divider hairline */ body.t2w-planner-skin #t2w-planner-v2 .t2w-v29-ph-divider { background: var(--sk-line); } /* 여행 제목 + 연필 — 네이비 강조 + 샴페인딥 연필 */ body.t2w-planner-skin #t2w-planner-v2 .t2w-v29-ph-title { color: var(--sk-navy); font-weight: 800; letter-spacing: -.01em; border-radius: 10px; } body.t2w-planner-skin #t2w-planner-v2 .t2w-v29-ph-title .material-symbols-outlined { color: var(--sk-champ-deep); } /* 직접 골라 만들기 — ghost 필 */ body.t2w-planner-skin #t2w-planner-v2 .t2w-v29-ph-pick { color: var(--sk-navy); background: var(--sk-paper); border: 1px solid var(--sk-line); border-radius: 999px; font-weight: 800; transition: transform .18s, border-color .2s, color .2s; } body.t2w-planner-skin #t2w-planner-v2 .t2w-v29-ph-pick:hover { transform: translateY(-1px); border-color: var(--sk-champ); color: var(--sk-champ-deep); } body.t2w-planner-skin #t2w-planner-v2 .t2w-v29-ph-pick .material-symbols-outlined { color: var(--sk-champ-deep); } /* 저장(bookmark)=ghost / 공유(share)=navy — 아이콘 버튼 두 종을 data-action으로 분기 */ body.t2w-planner-skin #t2w-planner-v2 .t2w-v29-ph-icon { border-radius: 999px; transition: transform .18s, background .2s, color .2s, border-color .2s; } body.t2w-planner-skin #t2w-planner-v2 .t2w-v29-ph-icon[data-action="bookmark"] { color: var(--sk-navy); background: var(--sk-paper); border: 1px solid var(--sk-line); } body.t2w-planner-skin #t2w-planner-v2 .t2w-v29-ph-icon[data-action="bookmark"]:hover { transform: translateY(-1px); border-color: var(--sk-champ); color: var(--sk-champ-deep); } body.t2w-planner-skin #t2w-planner-v2 .t2w-v29-ph-icon[data-action="share"] { color: var(--sk-paper); background: var(--sk-navy); border: 1px solid var(--sk-navy); } body.t2w-planner-skin #t2w-planner-v2 .t2w-v29-ph-icon[data-action="share"]:hover { transform: translateY(-1px); filter: brightness(1.08); } /* 식사 계획하기 CTA(기본 숨김) — 행동요소 = 커머스 골드 */ body.t2w-planner-skin #t2w-planner-v2 .t2w-v29-ph-cta { color: var(--sk-navy); background: var(--sk-gold); border-radius: 999px; font-weight: 900; box-shadow: var(--sk-sh-xs); } /* --- [Phase B] 데이 레일 / 날짜 전환 (PLANNER.md §1.1 "데이 전환") ---------- * 대상: #t2w-calendar (T2W.Calendar) 데스크 pill-bar + ui.js 모바일 chips. * 1차 패스 = 가로 pill-bar를 샴페인 pill로 리스킨(세로 레일 재구조화는 라이브 이관 — 마스터 지시). * ------------------------------------------------------------------------- */ /* ── 데스크톱: 가로 pill-bar ── */ body.t2w-planner-skin #t2w-planner-v2 .t2w-cal-pill-bar { display: flex; align-items: center; gap: 8px; } body.t2w-planner-skin #t2w-planner-v2 .t2w-cal-pill { background: var(--sk-paper); border: 1px solid var(--sk-line); border-radius: 16px; color: var(--sk-navy); transition: background .2s, border-color .2s, box-shadow .2s, transform .2s; } body.t2w-planner-skin #t2w-planner-v2 .t2w-cal-pill:hover { border-color: var(--sk-champ-line); background: var(--sk-champ-wash); } body.t2w-planner-skin #t2w-planner-v2 .t2w-cal-pill-day { font-weight: 800; color: var(--sk-navy); } body.t2w-planner-skin #t2w-planner-v2 .t2w-cal-pill-date { font-weight: 700; color: color-mix(in srgb, var(--sk-navy) 62%, transparent); } body.t2w-planner-skin #t2w-planner-v2 .t2w-cal-pill-dots { display: inline-flex; gap: 3px; } body.t2w-planner-skin #t2w-planner-v2 .t2w-cal-dot { background: var(--sk-champ); } /* 활성 데이 = 샴페인 채움 + 리프트 */ body.t2w-planner-skin #t2w-planner-v2 .t2w-cal-pill--active { background: var(--sk-paper); border-color: var(--sk-champ); box-shadow: var(--sk-sh-sm); transform: translateY(-1px); } body.t2w-planner-skin #t2w-planner-v2 .t2w-cal-pill--active .t2w-cal-pill-day { color: var(--sk-champ-deep); } body.t2w-planner-skin #t2w-planner-v2 .t2w-cal-pill--active .t2w-cal-dot { background: var(--sk-champ-deep); } /* prev/next/overview — 담백한 샴페인 hover */ body.t2w-planner-skin #t2w-planner-v2 .t2w-cal-prev, body.t2w-planner-skin #t2w-planner-v2 .t2w-cal-next, body.t2w-planner-skin #t2w-planner-v2 .t2w-cal-overview { color: var(--sk-navy); background: var(--sk-paper); border: 1px solid var(--sk-line); border-radius: 999px; transition: border-color .2s, color .2s, background .2s; } body.t2w-planner-skin #t2w-planner-v2 .t2w-cal-prev:hover, body.t2w-planner-skin #t2w-planner-v2 .t2w-cal-next:hover, body.t2w-planner-skin #t2w-planner-v2 .t2w-cal-overview:hover { border-color: var(--sk-champ); color: var(--sk-champ-deep); background: var(--sk-champ-wash); } /* ── 모바일: 데이 chips (≤768px, ui.js) ── */ body.t2w-planner-skin #t2w-planner-v2 .t2w-mob-chip { background: var(--sk-paper); border: 1px solid var(--sk-line); border-radius: 14px; color: var(--sk-navy); min-height: 44px; padding: 5px 11px; gap: 5px; font-size: 12px; font-weight: 700; transition: background .2s, border-color .2s; } body.t2w-planner-skin #t2w-planner-v2 .t2w-mob-chip-day { font-size: 13px; font-weight: 900; line-height: 1; color: var(--sk-navy); } body.t2w-planner-skin #t2w-planner-v2 .t2w-mob-chip-date { font-size: 10.5px; font-weight: 700; line-height: 1; color: color-mix(in srgb, var(--sk-navy) 60%, transparent); } body.t2w-planner-skin #t2w-planner-v2 .t2w-mob-chip-count { width: 17px; height: 17px; font-size: 10px; font-weight: 800; color: var(--sk-champ-deep); } body.t2w-planner-skin #t2w-planner-v2 .t2w-mob-chip--active { background: var(--sk-navy); border-color: var(--sk-navy); } body.t2w-planner-skin #t2w-planner-v2 .t2w-mob-chip--active .t2w-mob-chip-day { color: var(--sk-paper); } body.t2w-planner-skin #t2w-planner-v2 .t2w-mob-chip--active .t2w-mob-chip-date, body.t2w-planner-skin #t2w-planner-v2 .t2w-mob-chip--active .t2w-mob-chip-count { color: var(--sk-champ-lite); } /* --- [Phase B] 챕터 헤더 (심플) + 타임라인 카드 ---------------------------- * 대상: #t2w-timeline .t2w-tl-body (T2W.Timeline / timeline.js 카드 문자열). * proto-f: 심플 페이퍼 챕터 헤더 + 컴팩트 카드(썸네일·샴페인 액센트 바) * + 이동 leg(맥락 라벨) + 식사 슬롯 + 데이 요약. * ⚠ 타임라인 렌더러 2개(데스크 t2w-v29-* / 모바일 t2w-mrp-*) 둘 다 리스킨. * ------------------------------------------------------------------------- */ /* ══ 챕터 헤더 (PLANNER.md §1.1 "타임라인 헤더") ══ * .t2w-tl-header = 심플 페이퍼 챕터 헤더(제목 + hairline divider), controls는 조용한 샴페인. */ body.t2w-planner-skin #t2w-planner-v2 .t2w-tl-header { border-bottom: 1px solid var(--sk-line-2); padding-bottom: 14px; } body.t2w-planner-skin #t2w-planner-v2 .t2w-tl-date { font-family: var(--sk-font-display); font-weight: 900; letter-spacing: -.02em; color: var(--sk-ink); } body.t2w-planner-skin #t2w-planner-v2 .t2w-tl-controls { display: inline-flex; align-items: center; gap: 4px; } body.t2w-planner-skin #t2w-planner-v2 .t2w-tl-ctrl { color: var(--sk-navy); background: var(--sk-paper); border: 1px solid var(--sk-line); border-radius: 999px; transition: border-color .2s, color .2s, background .2s; } body.t2w-planner-skin #t2w-planner-v2 .t2w-tl-ctrl:hover { border-color: var(--sk-champ); color: var(--sk-champ-deep); background: var(--sk-champ-wash); } body.t2w-planner-skin #t2w-planner-v2 .t2w-tl-ctrl--reset:hover { color: var(--sk-champ-deep); } body.t2w-planner-skin #t2w-planner-v2 .t2w-tl-day-count { font-weight: 800; color: var(--sk-navy); } body.t2w-planner-skin #t2w-planner-v2 .t2w-tl-add-zone { color: var(--sk-champ-deep); border: 1px dashed var(--sk-champ-line); border-radius: 999px; background: transparent; } /* ══ 존 블록 (PLANNER.md §1.1 "존 블록") ══ * .t2w-v29-zone-sep = 얇은 샴페인 구분바. 존 dot은 JS 인라인 색상(zone_type) → 크기만 손댐. */ body.t2w-planner-skin #t2w-planner-v2 .t2w-v29-zone-sep { background: var(--sk-paper); border: 1px solid var(--sk-line-2); border-radius: 14px; box-shadow: var(--sk-sh-xs); } body.t2w-planner-skin #t2w-planner-v2 .t2w-zone-card-grip { color: color-mix(in srgb, var(--sk-navy) 45%, transparent); } body.t2w-planner-skin #t2w-planner-v2 .t2w-v29-zone-dot { border-radius: 999px; } body.t2w-planner-skin #t2w-planner-v2 .t2w-v29-zone-name { font-family: var(--sk-font-display); font-weight: 900; letter-spacing: -.02em; color: var(--sk-ink); } body.t2w-planner-skin #t2w-planner-v2 .t2w-v29-zone-meta { color: var(--sk-champ-deep); font-weight: 700; } body.t2w-planner-skin #t2w-planner-v2 .t2w-zone-block-delete { color: color-mix(in srgb, var(--sk-navy) 45%, transparent); transition: color .2s; } body.t2w-planner-skin #t2w-planner-v2 .t2w-zone-block-delete:hover { color: var(--sk-navy); } /* "장소 추가" 점선 버튼 */ body.t2w-planner-skin #t2w-planner-v2 .t2w-zb-add-place { color: var(--sk-navy); background: var(--sk-paper); border: 1.5px dashed var(--sk-line-3); border-radius: 14px; font-weight: 800; transition: border-color .2s, color .2s, background .2s; } body.t2w-planner-skin #t2w-planner-v2 .t2w-zb-add-place:hover { border-color: var(--sk-champ); border-style: solid; color: var(--sk-champ-deep); background: var(--sk-champ-wash); } body.t2w-planner-skin #t2w-planner-v2 .t2w-zb-add-place .material-symbols-outlined { color: var(--sk-champ-deep); } /* ══ 타임라인 척추 + 노드 ══ */ body.t2w-planner-skin #t2w-planner-v2 .t2w-v29-line { background: linear-gradient(180deg, var(--sk-champ-lite) 0, var(--sk-line) 88%); } body.t2w-planner-skin #t2w-planner-v2 .t2w-v29-time { color: var(--sk-champ-deep); font-weight: 900; } body.t2w-planner-skin #t2w-planner-v2 .t2w-v29-circle { background: var(--sk-paper); border: 2px solid var(--sk-champ); box-shadow: 0 3px 8px color-mix(in srgb, var(--sk-champ-deep) 22%, transparent); } body.t2w-planner-skin #t2w-planner-v2 .t2w-v29-circle, body.t2w-planner-skin #t2w-planner-v2 .t2w-v29-circle .material-symbols-outlined { color: var(--sk-champ-deep); } body.t2w-planner-skin #t2w-planner-v2 .t2w-v29-now-label { color: var(--sk-champ-deep); font-weight: 800; } /* now 상태 = 샴페인 채움 / done 상태 = 흐리게 (기존 blue/gray 대체) */ body.t2w-planner-skin #t2w-planner-v2 .t2w-v29-item--now .t2w-v29-circle { background: var(--sk-champ); border-color: var(--sk-champ); } body.t2w-planner-skin #t2w-planner-v2 .t2w-v29-item--now .t2w-v29-circle, body.t2w-planner-skin #t2w-planner-v2 .t2w-v29-item--now .t2w-v29-circle .material-symbols-outlined { color: var(--sk-paper); } body.t2w-planner-skin #t2w-planner-v2 .t2w-v29-item--now .t2w-v29-time { color: var(--sk-champ-deep); } body.t2w-planner-skin #t2w-planner-v2 .t2w-v29-item--done .t2w-v29-circle { background: var(--sk-paper); border-color: var(--sk-line-3); } body.t2w-planner-skin #t2w-planner-v2 .t2w-v29-item--done .t2w-v29-circle, body.t2w-planner-skin #t2w-planner-v2 .t2w-v29-item--done .t2w-v29-circle .material-symbols-outlined { color: color-mix(in srgb, var(--sk-navy) 40%, transparent); } body.t2w-planner-skin #t2w-planner-v2 .t2w-v29-item--done .t2w-v29-time { color: color-mix(in srgb, var(--sk-navy) 45%, transparent); } /* ══ 장소 카드 — 데스크톱 (PLANNER.md §1.1 "장소 카드(데스크)") ══ * .t2w-v29-card = 페이퍼 표면 + hairline + 왼쪽 샴페인 액센트 바(::before). */ body.t2w-planner-skin #t2w-planner-v2 .t2w-v29-card { position: relative; background: var(--sk-paper); border: 1px solid var(--sk-line-2); border-radius: 16px; box-shadow: var(--sk-sh-xs); transition: box-shadow .28s, transform .2s, border-color .25s; } /* 왼쪽 샴페인 액센트 바 — 기본 0px, hover/확장 시 나타남 */ body.t2w-planner-skin #t2w-planner-v2 .t2w-v29-card::before { content: ""; position: absolute; left: 0; top: 10px; bottom: 10px; width: 0; border-radius: 999px; background: linear-gradient(180deg, var(--sk-champ), var(--sk-champ-deep)); transition: width .3s cubic-bezier(.19,1,.22,1); } body.t2w-planner-skin #t2w-planner-v2 .t2w-v29-card:hover { box-shadow: var(--sk-sh-sm); transform: translateY(-1px); border-color: var(--sk-champ-line); } body.t2w-planner-skin #t2w-planner-v2 .t2w-v29-card:hover::before, body.t2w-planner-skin #t2w-planner-v2 .t2w-v29-item--now .t2w-v29-card::before { width: 3px; } /* MUST 카드 = 샴페인 테두리 강조 */ body.t2w-planner-skin #t2w-planner-v2 .t2w-v29-card--must { border-color: var(--sk-champ-line); } /* 드래그 그립 */ body.t2w-planner-skin #t2w-planner-v2 .t2w-v7-grip { color: color-mix(in srgb, var(--sk-navy) 40%, transparent); } /* 미니 썸네일 — 둥근 모서리 + 웜 배경 */ body.t2w-planner-skin #t2w-planner-v2 .t2w-v29-card-thumb-mini { border-radius: 12px; background-color: var(--sk-paper-2); box-shadow: 0 4px 10px color-mix(in srgb, var(--sk-champ-deep) 12%, transparent); } /* 시각 레인지(확장 시) */ body.t2w-planner-skin #t2w-planner-v2 .t2w-v29-time-range { color: var(--sk-champ-deep); font-weight: 700; } body.t2w-planner-skin #t2w-planner-v2 .t2w-v29-time-range .material-symbols-outlined { color: var(--sk-champ-deep); } /* 제목 */ body.t2w-planner-skin #t2w-planner-v2 .t2w-v29-card-title h3 { color: var(--sk-ink); font-weight: 900; letter-spacing: -.02em; word-break: keep-all; } /* 평점 배지 = 샴페인 별 / MUST 배지 = 커머스 골드 */ body.t2w-planner-skin #t2w-planner-v2 .t2w-v29-badge-rating { color: var(--sk-champ-deep); background: var(--sk-champ-wash); border-radius: 999px; font-weight: 900; } body.t2w-planner-skin #t2w-planner-v2 .t2w-v29-badge-rating .material-symbols-outlined { color: var(--sk-champ); } body.t2w-planner-skin #t2w-planner-v2 .t2w-v29-badge-mustgo { color: var(--sk-navy); background: var(--sk-gold); border-radius: 999px; font-weight: 900; } /* 카테고리·별점 줄 */ body.t2w-planner-skin #t2w-planner-v2 .t2w-v29-card-cat, body.t2w-planner-skin #t2w-planner-v2 .t2w-v29-rating-num { color: color-mix(in srgb, var(--sk-navy) 62%, transparent); font-weight: 700; } body.t2w-planner-skin #t2w-planner-v2 .t2w-v29-card-rating .material-symbols-outlined { color: var(--sk-champ); } /* ± 체류 스테퍼 = 샴페인 필 (터치 ≥44px는 모바일 미디어쿼리에서) */ body.t2w-planner-skin #t2w-planner-v2 .t2w-v7-dur { background: var(--sk-paper-2); border: 1px solid var(--sk-line); border-radius: 999px; } body.t2w-planner-skin #t2w-planner-v2 .t2w-v7-dur-btn { color: var(--sk-navy); border-radius: 50%; transition: background .18s, color .18s; } body.t2w-planner-skin #t2w-planner-v2 .t2w-v7-dur-btn:hover { background: var(--sk-paper); color: var(--sk-champ-deep); } body.t2w-planner-skin #t2w-planner-v2 .t2w-v7-dur-time { color: var(--sk-ink); font-weight: 900; } body.t2w-planner-skin #t2w-planner-v2 .t2w-v7-dur-range { color: color-mix(in srgb, var(--sk-navy) 55%, transparent); } /* 펼치기/접기 토글 — 조용하게 */ body.t2w-planner-skin #t2w-planner-v2 .t2w-v7-toggle { color: color-mix(in srgb, var(--sk-navy) 55%, transparent); transition: color .2s; } body.t2w-planner-skin #t2w-planner-v2 .t2w-v7-toggle:hover { color: var(--sk-champ-deep); } /* 확장 뷰(hero + body) — 가벼운 샴페인 액센팅 */ body.t2w-planner-skin #t2w-planner-v2 .t2w-v44-name { color: var(--sk-ink); font-weight: 900; letter-spacing: -.02em; } body.t2w-planner-skin #t2w-planner-v2 .t2w-v44-name-en { color: color-mix(in srgb, var(--sk-navy) 55%, transparent); } body.t2w-planner-skin #t2w-planner-v2 .t2w-v44-hook { color: var(--sk-ink); font-style: italic; } body.t2w-planner-skin #t2w-planner-v2 .t2w-v44-tag { background: var(--sk-champ-wash); color: var(--sk-champ-deep); border-radius: 999px; font-weight: 800; } body.t2w-planner-skin #t2w-planner-v2 .t2w-v44-badge--must { background: var(--sk-gold); color: var(--sk-navy); } /* ══ 장소 카드 — 모바일 (PLANNER.md §1.1 "장소 카드(모바일)") ══ * .t2w-mobile-review-place > .t2w-mrp-card = 페이퍼 컴팩트 로우. */ body.t2w-planner-skin #t2w-planner-v2 .t2w-mobile-review-place__node { background: var(--sk-paper); border: 2px solid var(--sk-champ); color: var(--sk-champ-deep); font-weight: 900; } body.t2w-planner-skin #t2w-planner-v2 .t2w-mrp-card { background: var(--sk-paper); border: 1px solid var(--sk-line-2); border-radius: 16px; box-shadow: var(--sk-sh-xs); } body.t2w-planner-skin #t2w-planner-v2 .t2w-mrp-thumb { border-radius: 12px; background-color: var(--sk-paper-2); } body.t2w-planner-skin #t2w-planner-v2 .t2w-mrp-thumb--ph { color: var(--sk-champ-deep); } body.t2w-planner-skin #t2w-planner-v2 .t2w-mrp-time { background: none; /* 기존 일몰 그라데 텍스트 제거 → 샴페인 단색 */ -webkit-text-fill-color: var(--sk-champ-deep); color: var(--sk-champ-deep); font-weight: 900; } body.t2w-planner-skin #t2w-planner-v2 .t2w-mrp-name { color: var(--sk-ink); font-weight: 900; letter-spacing: -.02em; word-break: keep-all; } body.t2w-planner-skin #t2w-planner-v2 .t2w-mobile-review-place__badge { background: var(--sk-champ-wash); color: var(--sk-champ-deep); border-radius: 999px; font-weight: 800; } body.t2w-planner-skin #t2w-planner-v2 .t2w-mrp-dur { background: var(--sk-paper-2); border: 1px solid var(--sk-line); border-radius: 999px; } body.t2w-planner-skin #t2w-planner-v2 .t2w-mrp-dur-val { color: var(--sk-ink); font-weight: 900; } body.t2w-planner-skin #t2w-planner-v2 .t2w-mrp-dur .t2w-place-dur-btn { color: var(--sk-navy); } /* ══ 이동 leg (PLANNER.md §1.1 "이동 leg") ══ * .t2w-v29-transport.t2w-trp-v2 = 조용한 맥락 라벨 + 샴페인 모드 칩. */ body.t2w-planner-skin #t2w-planner-v2 .t2w-trp-v2-icon { color: var(--sk-champ-deep); } body.t2w-planner-skin #t2w-planner-v2 .t2w-trp-v2-label { color: color-mix(in srgb, var(--sk-navy) 68%, transparent); font-weight: 700; } body.t2w-planner-skin #t2w-planner-v2 .t2w-trp-v2-dist { color: color-mix(in srgb, var(--sk-navy) 55%, transparent); font-weight: 700; } body.t2w-planner-skin #t2w-planner-v2 .t2w-trp-v2-dot { background: var(--sk-line-3); } body.t2w-planner-skin #t2w-planner-v2 .t2w-trp-v2-est, body.t2w-planner-skin #t2w-planner-v2 .t2w-trp-v2-warn { color: var(--sk-champ-deep); font-weight: 800; } /* 모드 칩 — paper/hairline, 선택 시 샴페인 */ body.t2w-planner-skin #t2w-planner-v2 .t2w-trp-v2-chip { background: var(--sk-paper); border: 1px solid var(--sk-line); color: var(--sk-navy); border-radius: 999px; transition: border-color .2s, color .2s, background .2s; } body.t2w-planner-skin #t2w-planner-v2 .t2w-trp-v2-chip:hover { border-color: var(--sk-champ-line); } body.t2w-planner-skin #t2w-planner-v2 .t2w-trp-v2-chip--on { background: var(--sk-champ-wash); border-color: var(--sk-champ); color: var(--sk-champ-deep); font-weight: 800; } body.t2w-planner-skin #t2w-planner-v2 .t2w-trp-v2-nav { color: var(--sk-navy); border: 1px solid var(--sk-line); border-radius: 999px; transition: border-color .2s, color .2s; } body.t2w-planner-skin #t2w-planner-v2 .t2w-trp-v2-nav:hover { border-color: var(--sk-champ); color: var(--sk-champ-deep); } /* ══ 식사 슬롯 (PLANNER.md §1.1 "식사 슬롯") ══ * .t2w-v29-item--meal > .t2w-v29-card--meal = 점선 샴페인 테두리 + 페이퍼 그라데. */ body.t2w-planner-skin #t2w-planner-v2 .t2w-v29-circle--meal { background: linear-gradient(140deg, var(--sk-champ-lite), var(--sk-champ)); border-color: var(--sk-champ); } body.t2w-planner-skin #t2w-planner-v2 .t2w-v29-circle--meal .material-symbols-outlined { color: var(--sk-paper); } body.t2w-planner-skin #t2w-planner-v2 .t2w-v29-card--meal { background: linear-gradient(180deg, var(--sk-paper-2), var(--sk-paper)); border: 1px dashed var(--sk-champ-line); border-radius: 16px; } body.t2w-planner-skin #t2w-planner-v2 .t2w-v29-meal-header h4 { color: var(--sk-navy); font-weight: 900; } body.t2w-planner-skin #t2w-planner-v2 .t2w-v29-meal-header h4 .material-symbols-outlined { color: var(--sk-champ-deep); } body.t2w-planner-skin #t2w-planner-v2 .t2w-v29-meal-price { color: var(--sk-champ-deep); font-weight: 800; } body.t2w-planner-skin #t2w-planner-v2 .t2w-v29-meal-photo { border-radius: 12px; background-color: var(--sk-paper-3); } body.t2w-planner-skin #t2w-planner-v2 .t2w-v29-meal-name { color: var(--sk-ink); font-weight: 900; } body.t2w-planner-skin #t2w-planner-v2 .t2w-v29-meal-hook { color: color-mix(in srgb, var(--sk-navy) 62%, transparent); } body.t2w-planner-skin #t2w-planner-v2 .t2w-v29-meal-dist { color: var(--sk-champ-deep); font-weight: 700; } /* 식사 액션 — 다른 추천=ghost / 선택하기=골드 */ body.t2w-planner-skin #t2w-planner-v2 .t2w-v29-meal-btn--alt { color: var(--sk-navy); background: var(--sk-paper); border: 1px solid var(--sk-line); border-radius: 999px; font-weight: 800; transition: border-color .2s, color .2s; } body.t2w-planner-skin #t2w-planner-v2 .t2w-v29-meal-btn--alt:hover { border-color: var(--sk-champ); color: var(--sk-champ-deep); } body.t2w-planner-skin #t2w-planner-v2 .t2w-v29-meal-btn--select { color: var(--sk-navy); background: var(--sk-gold); border: none; border-radius: 999px; font-weight: 900; box-shadow: var(--sk-sh-xs); } /* ══ 데이 하단 — 요약 + 전체 루트 (PLANNER.md §1.1 "데이 하단") ══ */ body.t2w-planner-skin #t2w-planner-v2 .t2w-day-overview { display: flex; align-items: center; gap: 8px; flex-wrap: wrap; } body.t2w-planner-skin #t2w-planner-v2 .t2w-day-ov-chip { color: var(--sk-navy); background: var(--sk-paper-2); border: 1px solid var(--sk-line-2); border-radius: 999px; font-weight: 700; } body.t2w-planner-skin #t2w-planner-v2 .t2w-day-ov-chip .material-symbols-outlined { color: var(--sk-champ-deep); } body.t2w-planner-skin #t2w-planner-v2 .t2w-day-ov-chip--focus { color: var(--sk-champ-deep); background: var(--sk-champ-wash); border-color: var(--sk-champ-line); } /* 구글맵 전체 루트 링크 카드 */ body.t2w-planner-skin #t2w-planner-v2 .t2w-fullday-nav { background: var(--sk-paper); border: 1px solid var(--sk-line); border-radius: 16px; box-shadow: var(--sk-sh-xs); transition: border-color .2s, box-shadow .2s, transform .2s; } body.t2w-planner-skin #t2w-planner-v2 .t2w-fullday-nav:hover { border-color: var(--sk-champ-line); box-shadow: var(--sk-sh-sm); transform: translateY(-1px); } body.t2w-planner-skin #t2w-planner-v2 .t2w-fullday-nav-icon .material-symbols-outlined, body.t2w-planner-skin #t2w-planner-v2 .t2w-fullday-nav-title .material-symbols-outlined, body.t2w-planner-skin #t2w-planner-v2 .t2w-fullday-nav-ext { color: var(--sk-champ-deep); } body.t2w-planner-skin #t2w-planner-v2 .t2w-fullday-nav-title { color: var(--sk-navy); font-weight: 800; } body.t2w-planner-skin #t2w-planner-v2 .t2w-fullday-nav-sub { color: color-mix(in srgb, var(--sk-navy) 60%, transparent); font-weight: 700; } /* ══ 터치 타깃 ≥44px (모바일 ≤768px) — 반응형 규약 ══ */ @media (max-width: 768px) { body.t2w-planner-skin #t2w-planner-v2 .t2w-v7-dur-btn { width: 44px; height: 44px; } body.t2w-planner-skin #t2w-planner-v2 .t2w-mrp-dur .t2w-place-dur-btn { min-width: 44px; min-height: 44px; } body.t2w-planner-skin #t2w-planner-v2 .t2w-trp-v2-chip, body.t2w-planner-skin #t2w-planner-v2 .t2w-trp-v2-nav { min-height: 44px; } body.t2w-planner-skin #t2w-planner-v2 .t2w-v29-meal-btn--alt, body.t2w-planner-skin #t2w-planner-v2 .t2w-v29-meal-btn--select { min-height: 44px; } body.t2w-planner-skin #t2w-planner-v2 .t2w-cal-prev, body.t2w-planner-skin #t2w-planner-v2 .t2w-cal-next, body.t2w-planner-skin #t2w-planner-v2 .t2w-cal-overview, body.t2w-planner-skin #t2w-planner-v2 .t2w-tl-ctrl { min-width: 44px; min-height: 44px; } } /* =========================================================================== * [Phase B+] proto-f 2열 재구성 (데스크톱 ≥1025px) — redesign-skin.js 와 짝 * 네비레일 숨김 + [슬림 세로 데이레일 | 타임라인 | 지도] 2열(+레일). PLANNER.md §4. * 모바일은 기존 하단 네비바 유지 → 이 블록 전체 데스크톱 전용. * ========================================================================== */ @media (min-width: 1025px) { /* 기존 4탭 네비레일 숨김(핸들러는 살아있음 — .click 위임 대상) */ body.t2w-planner-skin #t2w-planner-v2.t2w-skin-2col #t2w-sidebar { display: none; } /* 셸 = 3트랙 그리드: [슬림 레일 | 타임라인 1fr | 지도] */ body.t2w-planner-skin #t2w-planner-v2.t2w-skin-2col .t2w-v5-left { grid-column: 2; width: auto; max-width: none; min-width: 0; border-right: 1px solid var(--sk-line-2); } body.t2w-planner-skin #t2w-planner-v2.t2w-skin-2col .t2w-v5-right { grid-column: 3; width: auto; max-width: none; min-width: 0; position: relative; } /* 포커스독(중앙, 기본 숨김)이 그리드 트랙 먹지 않게 */ body.t2w-planner-skin #t2w-planner-v2.t2w-skin-2col #t2w-focus-dock { grid-column: 2; } /* --- 슬림 세로 데이레일 (redesign-skin.js 주입) --- */ body.t2w-planner-skin #t2w-planner-v2 .t2w-skin-rail { grid-column: 1; display: flex; flex-direction: column; align-items: stretch; gap: 10px; padding: 16px 10px; background: var(--sk-paper-2); border-right: 1px solid var(--sk-line); } body.t2w-planner-skin #t2w-planner-v2 .t2w-skin-rail__brand { display: flex; justify-content: center; margin-bottom: 2px; } body.t2w-planner-skin #t2w-planner-v2 .t2w-skin-rail__logo { width: 40px; height: 40px; border-radius: 12px; display: grid; place-items: center; background: linear-gradient(135deg, var(--sk-champ-lite), var(--sk-champ-deep)); color: var(--sk-ink); font-weight: 900; font-size: 17px; box-shadow: var(--sk-sh-sm); } body.t2w-planner-skin #t2w-planner-v2 .t2w-skin-rail__label { writing-mode: vertical-rl; text-orientation: mixed; letter-spacing: .32em; font-size: 10px; font-weight: 800; color: var(--sk-champ-deep); align-self: center; margin: 4px 0 8px; opacity: .8; } /* 데이레일: 날짜 pill-bar 를 세로로 */ /* proto-f: 날짜 표기(base 는 display:none) — 레일에서 노출 */ body.t2w-planner-skin #t2w-planner-v2 .t2w-skin-rail__days .t2w-cal-pill--active .t2w-cal-pill-date { color: var(--sk-champ-deep); opacity: 1; } body.t2w-planner-skin #t2w-planner-v2 .t2w-skin-rail__days .t2w-cal-leg-label, body.t2w-planner-skin #t2w-planner-v2 .t2w-skin-rail__days .t2w-cal-leg-sep { display: none; } /* prev/next 화살표는 세로 레일에서 군더더기 → 숨김(pill 직접 클릭) */ body.t2w-planner-skin #t2w-planner-v2 .t2w-skin-rail__days .t2w-cal-prev, body.t2w-planner-skin #t2w-planner-v2 .t2w-skin-rail__days .t2w-cal-next { display: none; } body.t2w-planner-skin #t2w-planner-v2 .t2w-skin-rail__days .t2w-cal-overview { width: 100%; margin-top: 4px; font-size: 11px; } /* 도구/상품/지도 슬림 버튼 */ body.t2w-planner-skin #t2w-planner-v2 .t2w-skin-rail__nav { margin-top: auto; display: flex; flex-direction: column; gap: 4px; } body.t2w-planner-skin #t2w-planner-v2 .t2w-skin-rail__navbtn { display: flex; flex-direction: column; align-items: center; gap: 2px; padding: 9px 4px; border-radius: 12px; border: 0; background: transparent; color: var(--sk-navy); font-weight: 700; font-size: 11px; cursor: pointer; transition: background .2s, color .2s; } body.t2w-planner-skin #t2w-planner-v2 .t2w-skin-rail__navbtn .material-symbols-outlined { font-size: 22px; color: var(--sk-champ-deep); } body.t2w-planner-skin #t2w-planner-v2 .t2w-skin-rail__navbtn:hover { background: var(--sk-champ-wash); color: var(--sk-champ-deep); } } /* 모바일/태블릿: 주입된 레일 숨김(기존 하단 네비바가 담당) */ @media (max-width: 1024px) { body.t2w-planner-skin #t2w-planner-v2 .t2w-skin-rail { display: none; } } /* --- [Phase C] 올플 코파일럿 드로어 + FAB --------------------------------- * 대상: #t2w-assistant-panel (T2W.Assistant, openPanel). redesign-skin.js 가 FAB 주입. * proto-f: 우측 풀높이 샴페인 드로어 + "올플에게 물어보기" 글래스 FAB. 상세 PLANNER.md §0. * ------------------------------------------------------------------------- */ /* 코파일럿 FAB — 지도 컬럼 하단(데스크) / 하단 네비바 위(모바일). 전역 챗 FAB와 분리. */ body.t2w-planner-skin #t2w-planner-v2 .t2w-skin-copilot-fab { position: absolute; right: 16px; bottom: 16px; z-index: 60; display: inline-flex; align-items: center; gap: 9px; padding: 12px 18px; border: 1px solid var(--sk-champ-line); border-radius: 999px; background: color-mix(in srgb, var(--sk-ink) 88%, transparent); color: var(--sk-paper); font-weight: 800; font-size: 13.5px; cursor: pointer; box-shadow: var(--sk-sh-md); backdrop-filter: blur(8px); transition: transform .18s, box-shadow .2s; } body.t2w-planner-skin #t2w-planner-v2 .t2w-skin-copilot-fab:hover { transform: translateY(-2px); } body.t2w-planner-skin #t2w-planner-v2 .t2w-skin-copilot-fab .material-symbols-outlined { font-size: 20px; color: var(--sk-champ-lite); } @media (max-width: 1024px) { /* 모바일: 어시스턴트가 다른 UI(도구 탭)로 열려 openPanel 이 빈 패널이 됨 → 깨진 FAB 노출 대신 숨김. 모바일 assistant 접근 = 하단 네비바 '도구' 탭. (FAB 는 데스크 전용) */ body.t2w-planner-skin #t2w-planner-v2 .t2w-skin-copilot-fab { display: none; } } /* S261: 지도 우하단 겹침 해소 — 시설 토글(화장실/BBQ)이 FAB(높이 46px + bottom 16px)에 가려짐 → FAB가 뜨는 데스크톱에서만 시설 컨트롤 열을 FAB 위로 올림 */ @media (min-width: 1025px) { body.t2w-planner-skin #t2w-planner-v2 .t2w-map-facility-ctrl { margin-bottom: 72px; } } /* 어시스턴트 패널 → proto-f 샴페인 드로어 (데스크=우측 풀높이 / 모바일=바텀시트) */ body.t2w-planner-skin #t2w-planner-v2 #t2w-assistant-panel.t2w-assistant-panel { border: 1px solid var(--sk-champ-line); background: linear-gradient(180deg, var(--sk-paper), var(--sk-paper-2)); box-shadow: var(--t2w-hp-sh-lg); } @media (min-width: 1025px) { body.t2w-planner-skin #t2w-planner-v2 #t2w-assistant-panel.t2w-assistant-panel { top: 12px; bottom: 12px; right: 12px; left: auto; width: min(400px, 40vw); height: auto; max-height: none; overflow-y: auto; border-radius: var(--t2w-hp-r-lg, 22px); } } @media (max-width: 1024px) { body.t2w-planner-skin #t2w-planner-v2 #t2w-assistant-panel.t2w-assistant-panel { left: 0; right: 0; bottom: 0; top: auto; width: 100%; max-width: 100%; height: auto; max-height: 85vh; overflow-y: auto; border-radius: var(--t2w-hp-r-lg, 22px) var(--t2w-hp-r-lg, 22px) 0 0; } } body.t2w-planner-skin #t2w-planner-v2 .t2w-assistant-panel__head { border-bottom: 1px solid var(--sk-line-2); } /* 다듬기 칩 = 샴페인 페이퍼 필 */ body.t2w-planner-skin #t2w-planner-v2 .t2w-assistant-actions button, body.t2w-planner-skin #t2w-planner-v2 .t2w-assistant-brief button { border-radius: 999px; border-color: var(--sk-line); } body.t2w-planner-skin #t2w-planner-v2 .t2w-assistant-actions button:hover { border-color: var(--sk-champ); color: var(--sk-champ-deep); } /* 제안 [적용] = 커머스 골드 / [무시] = ghost (proposals 계약 유지) */ body.t2w-planner-skin #t2w-planner-v2 .t2w-assistant-proposals { border-top: 1px solid var(--sk-line-2); } /* --- [Phase C] "왜 이 순서" 근거 노트 (redesign-skin.js 가 실데이터 주입) ---------- * 대상: .t2w-skin-why (드로어 head 다음). 데이터=State .micro_copy/.evidence_line + 훅 + zone.transition_bridge. * ------------------------------------------------------------------------- */ body.t2w-planner-skin #t2w-planner-v2 .t2w-skin-why { padding: 14px 16px 4px; border-bottom: 1px solid var(--sk-line-2); } body.t2w-planner-skin #t2w-planner-v2 .t2w-skin-why[hidden] { display: none; } body.t2w-planner-skin #t2w-planner-v2 .t2w-skin-why__label { font-size: 11px; font-weight: 800; letter-spacing: .12em; color: var(--sk-champ-deep); margin-bottom: 10px; text-transform: none; } body.t2w-planner-skin #t2w-planner-v2 .t2w-skin-why__note { position: relative; padding: 0 0 12px 16px; margin-bottom: 2px; } /* 세로 라인 + 샴페인 노드 */ body.t2w-planner-skin #t2w-planner-v2 .t2w-skin-why__note::before { content: ""; position: absolute; left: 3px; top: 5px; bottom: -2px; width: 1px; background: var(--sk-champ-line); } body.t2w-planner-skin #t2w-planner-v2 .t2w-skin-why__note::after { content: ""; position: absolute; left: 0; top: 4px; width: 7px; height: 7px; border-radius: 50%; background: var(--sk-champ); } body.t2w-planner-skin #t2w-planner-v2 .t2w-skin-why__note:last-child::before { display: none; } body.t2w-planner-skin #t2w-planner-v2 .t2w-skin-why__tag { font-size: 12.5px; font-weight: 800; color: var(--sk-navy); margin-bottom: 2px; } body.t2w-planner-skin #t2w-planner-v2 .t2w-skin-why__body { font-size: 12.5px; line-height: 1.5; color: var(--sk-ink); opacity: .82; } /* --- [Phase D] 지도 (밝은 Google풍 — Voyager 타일) ------------------------ * 대상: #t2w-map (T2W.Map / Leaflet). redesign-skin.js 가 CartoDB Voyager(밝음)로 교체. * 마스터: 다크가 너무 어둡다 → 밝은 지도. 마커(파랑)·동선(초록)·네이티브 컨트롤(줌/범례/시설=흰 칩)은 * 밝은 지도에 원래 잘 맞으므로 스킨 override 제거(다크 리스킨 전량 삭제) → 기본값으로 복귀. * ------------------------------------------------------------------------- */ body.t2w-planner-skin #t2w-planner-v2 #t2w-map { background: var(--sk-paper); /* 타일 로드 전 밝은 바탕 */ } /* --- [Phase D+] 지도 요약 오버레이 (좌하단 "N일·M곳") -------------------- * 실데이터 요약. DOM = redesign-skin.js 주입(days:changed + #t2w-timeline 옵저버). * 밝은 Google풍 지도라 라이트 글래스. 다크 시절 타일밝기필터·비네트·네이티브컨트롤 다크리스킨은 * Voyager 전환하며 전량 제거(범례/시설/줌/마커/동선 = 밝은 지도용 기본으로 복귀). * ------------------------------------------------------------------------- */ body.t2w-planner-skin #t2w-planner-v2 #t2w-map .t2w-skin-map-summary { position: absolute; left: 16px; bottom: 16px; z-index: 700; pointer-events: none; display: none; /* 데스크(≥1025)에서만 노출 — 아래 @media */ flex-direction: column; align-items: flex-start; padding: 11px 16px; border-radius: 14px; background: color-mix(in srgb, var(--sk-paper) 92%, transparent); -webkit-backdrop-filter: blur(10px); backdrop-filter: blur(10px); border: 1px solid color-mix(in srgb, var(--sk-navy) 12%, transparent); box-shadow: var(--sk-sh-sm); } body.t2w-planner-skin #t2w-planner-v2 #t2w-map .t2w-skin-map-summary__eye { font-size: 9.5px; font-weight: 800; letter-spacing: .2em; text-transform: uppercase; color: var(--sk-champ-deep); margin-bottom: 6px; } body.t2w-planner-skin #t2w-planner-v2 #t2w-map .t2w-skin-map-summary__stats { display: flex; align-items: center; gap: 13px; } body.t2w-planner-skin #t2w-planner-v2 #t2w-map .t2w-skin-map-summary__stat { display: flex; align-items: baseline; gap: 4px; } body.t2w-planner-skin #t2w-planner-v2 #t2w-map .t2w-skin-map-summary__stat b { font-size: 18px; font-weight: 900; color: var(--sk-navy); letter-spacing: -.01em; } body.t2w-planner-skin #t2w-planner-v2 #t2w-map .t2w-skin-map-summary__stat span { font-size: 11px; font-weight: 700; color: color-mix(in srgb, var(--sk-navy) 55%, transparent); } body.t2w-planner-skin #t2w-planner-v2 #t2w-map .t2w-skin-map-summary__div { width: 1px; height: 24px; background: color-mix(in srgb, var(--sk-navy) 14%, transparent); } /* 데스크 전용 노출 */ /* --- [Phase D+] 오른쪽 열 = 지도 100% + 진행률 상단 이전 (마스터 지시) ------- * 마스터: "오른쪽은 지도만". 진행률(게이지 링)만 일정 상단 우측으로, 경로최적화는 지도 컨트롤로, * 나머지(트립 제목·하이라이트·식사추가/공유)는 코파일럿/헤더가 담당 → 숨김. * redesign-skin.js 가 #t2w-context-panel 을 .t2w-trip-header 로 노드 이동 + 경로최적화 지도버튼 주입. * 데스크(≥1025) 전용 — 모바일은 기존 레이아웃 유지. * ------------------------------------------------------------------------- */ @media (min-width: 1025px) { /* 오른쪽 열 = 지도 전용, 열 전체 높이. 앱셸 모델(.t2w-v5-main overflow:hidden 고정높이 + * 일정 열 내부 스크롤)이라 페이지가 스크롤되지 않음 → 지도는 자동 고정(sticky 불필요). */ body.t2w-planner-skin #t2w-planner-v2 .t2w-v5-right { display: block; height: calc(100vh - 45px); /* 45px = .t2w-v29-planner-header */ padding: 0; } body.t2w-planner-skin #t2w-planner-v2 .t2w-v5-right > #t2w-map { height: 100%; min-height: 0; } /* 트립 헤더 = 제목(좌) + 진행률 링(우) */ body.t2w-planner-skin #t2w-planner-v2 .t2w-skin-triphead { position: relative; } /* 이동된 컨텍스트 패널 — 글래스·패딩 제거, 헤더 우측에 게이지 링만. * ⚠ 기본 .t2w-context-panel 은 .t2w-v5-right 밖에선 display:none → 명시적으로 켠다. */ body.t2w-planner-skin #t2w-planner-v2 .t2w-skin-triphead #t2w-context-panel { display: block; position: absolute; top: 50%; right: 0; transform: translateY(-50%); width: auto; min-width: 0; max-width: none; height: auto; margin: 0; padding: 0; background: transparent; border: none; box-shadow: none; overflow: visible; } /* 게이지 링만 노출 — 제목·하이라이트·액션·체크리스트 숨김("진행률만 상단") */ body.t2w-planner-skin #t2w-planner-v2 .t2w-skin-triphead #t2w-context-panel .t2w-ctx-header, body.t2w-planner-skin #t2w-planner-v2 .t2w-skin-triphead #t2w-context-panel .t2w-ctx-highlights, body.t2w-planner-skin #t2w-planner-v2 .t2w-skin-triphead #t2w-context-panel .t2w-ctx-actions, body.t2w-planner-skin #t2w-planner-v2 .t2w-skin-triphead #t2w-context-panel .t2w-ctx-gauge-steps { display: none; } body.t2w-planner-skin #t2w-planner-v2 .t2w-skin-triphead #t2w-context-panel .t2w-ctx-gauge-wrap { margin: 0; padding: 0; gap: 0; } /* 경로 최적화 = 지도 안 컨트롤(좌하단, 요약 위) */ body.t2w-planner-skin #t2w-planner-v2 #t2w-map .t2w-skin-map-optimize:hover { border-color: var(--sk-gold); background: color-mix(in srgb, var(--sk-gold) 14%, transparent); } body.t2w-planner-skin #t2w-planner-v2 #t2w-map .t2w-skin-map-optimize .material-symbols-outlined { font-size: 18px; color: var(--sk-gold); } } /* --- [Phase D] 모바일 일정 간격 축소 (goal 폴리시) ------------------------- * 대상: .t2w-mobile-review-timeline / -hop / -place (모바일 mrp 렌더러). * 카드 사이 이동표시(hop)가 세로 3줄 59px → 컴팩트(터치 44px 유지) + 타임라인 gap 축소. * ------------------------------------------------------------------------- */ @media (max-width: 1024px) { body.t2w-planner-skin #t2w-planner-v2 .t2w-mobile-review-timeline { gap: 2px; } body.t2w-planner-skin #t2w-planner-v2 .t2w-mobile-review-hop { margin-top: 0; margin-bottom: 0; } body.t2w-planner-skin #t2w-planner-v2 .t2w-mrp-hop-btn { min-height: 44px; /* 터치 유지 */ padding-top: 0; padding-bottom: 0; gap: 0; justify-content: center; } body.t2w-planner-skin #t2w-planner-v2 .t2w-mrp-hop-btn .material-symbols-outlined { font-size: 17px; } body.t2w-planner-skin #t2w-planner-v2 .t2w-mrp-hop-btn .t2w-mrp-hop-t { line-height: 1.1; } body.t2w-planner-skin #t2w-planner-v2 .t2w-mobile-review-place { padding-top: 3px; padding-bottom: 3px; } /* 카드 자체 컴팩트: 패딩 13→8, 이름 위 여백 9→4 (카드 114→~96px) */ body.t2w-planner-skin #t2w-planner-v2 .t2w-mrp-card { padding-top: 8px; padding-bottom: 8px; gap: 11px; } body.t2w-planner-skin #t2w-planner-v2 .t2w-mrp-name { margin-top: 4px; } } /* --- [Phase D] 모바일 하단 네비바 + map-mode ------------------------------ * 대상: #t2w-mobile-next-row (mobile-actions.js) + .t2w-planner--map-mode. * proto-f 룩으로 리스킨. 지도 = '지도' 탭 → 풀스크린(기존 패턴 유지, 38vh 스티키 폐기). * docs/PLANNER.md §4. * ------------------------------------------------------------------------- */ /* --- [S247] Planner micro polish — recover proto-f product feel ------------ * 목적: 기능/DOM 재배치 없이 스킨에서 숨겨진 장소 카드 시각 정보와 지도 대비를 복구. * legacy planner-overrides 에 display:none !important 가 있어, 사진/체류 컨트롤 복구에만 * 동일한 important 를 좁게 사용한다. 모바일은 식사 제안 밀도만 낮춘다. * ------------------------------------------------------------------------- */ @media (min-width: 1025px) { body.t2w-planner-skin #t2w-planner-v2.t2w-skin-2col .t2w-v5-main { /* (S270 접기: L755 병합) */ display: grid; grid-template-columns: 96px minmax(0, 1fr) clamp(400px, 46%, 760px); align-items: stretch; gap: 0; grid-template-columns: 96px minmax(640px, 1fr) clamp(560px, 43vw, 680px); } body.t2w-planner-skin #t2w-planner-v2 .t2w-v5-left { background: linear-gradient(180deg, color-mix(in srgb, var(--sk-paper) 96%, var(--sk-champ-lite)), var(--sk-paper)); } body.t2w-planner-skin #t2w-planner-v2 .t2w-v29-card--collapsed { border-radius: 16px; box-shadow: var(--sk-sh-xs); } body.t2w-planner-skin #t2w-planner-v2 .t2w-v29-card--collapsed .t2w-v29-card-header { display: grid; grid-template-columns: minmax(0, 1fr) minmax(106px, auto) 34px; align-items: center; min-height: 88px; padding: 12px 14px; gap: 12px; } body.t2w-planner-skin #t2w-planner-v2 .t2w-v29-card--collapsed .t2w-v29-card-header:has(.t2w-v29-card-thumb-mini) { grid-template-columns: 78px minmax(0, 1fr) minmax(106px, auto) 34px; } body.t2w-planner-skin #t2w-planner-v2 .t2w-v29-card--collapsed .t2w-v7-grip { display: none; } body.t2w-planner-skin #t2w-planner-v2 .t2w-v29-card--collapsed .t2w-v29-card-thumb-mini { display: block !important; grid-column: 1; grid-row: 1; align-self: center; width: 78px !important; height: 78px !important; min-width: 78px; margin: 0; border-radius: 15px; background-size: cover; background-position: center; box-shadow: 0 10px 24px color-mix(in srgb, var(--sk-champ-deep) 18%, transparent); } body.t2w-planner-skin #t2w-planner-v2 .t2w-v29-card--collapsed .t2w-v7-content { grid-column: 1; grid-row: 1; min-width: 0; display: grid; gap: 4px; } body.t2w-planner-skin #t2w-planner-v2 .t2w-v29-card--collapsed .t2w-v29-card-header:has(.t2w-v29-card-thumb-mini) .t2w-v7-content { grid-column: 2; } body.t2w-planner-skin #t2w-planner-v2 .t2w-v29-card--collapsed .t2w-v29-time-range { display: inline-flex !important; align-items: center; gap: 4px; width: max-content; max-width: 100%; padding: 0; color: var(--sk-champ-deep); font-size: 12px; line-height: 1.2; } body.t2w-planner-skin #t2w-planner-v2 .t2w-v29-card--collapsed .t2w-v29-time-range .material-symbols-outlined { font-size: 15px; } body.t2w-planner-skin #t2w-planner-v2 .t2w-v29-card--collapsed .t2w-v29-card-title { min-width: 0; display: grid; gap: 5px; } body.t2w-planner-skin #t2w-planner-v2 .t2w-v29-card--collapsed .t2w-v29-name-check { min-width: 0; display: flex; flex-wrap: wrap; align-items: center; gap: 6px; } body.t2w-planner-skin #t2w-planner-v2 .t2w-v29-card--collapsed .t2w-v29-card-title h3 { max-width: 100%; font-size: 16px; line-height: 1.24; } body.t2w-planner-skin #t2w-planner-v2 .t2w-v29-card--collapsed .t2w-v7-dur { display: inline-flex !important; grid-column: 2; grid-row: 1; align-items: center; justify-content: center; min-width: 108px; min-height: 42px; padding: 3px 4px; justify-self: end; align-self: center; } body.t2w-planner-skin #t2w-planner-v2 .t2w-v29-card--collapsed .t2w-v29-card-header:has(.t2w-v29-card-thumb-mini) .t2w-v7-dur { grid-column: 3; } body.t2w-planner-skin #t2w-planner-v2 .t2w-v29-card--collapsed .t2w-v7-dur-btn { width: 30px; height: 30px; min-width: 30px; } body.t2w-planner-skin #t2w-planner-v2 .t2w-v29-card--collapsed .t2w-v7-dur-display { min-width: 42px; } body.t2w-planner-skin #t2w-planner-v2 .t2w-v29-card--collapsed .t2w-v7-dur-range { display: none; } body.t2w-planner-skin #t2w-planner-v2 .t2w-v29-card--collapsed .t2w-v7-toggle { grid-column: 3; grid-row: 1; justify-self: end; align-self: center; width: 34px; height: 34px; min-width: 34px; border-radius: 999px; background: color-mix(in srgb, var(--sk-champ-lite) 34%, transparent); color: var(--sk-champ-deep); } body.t2w-planner-skin #t2w-planner-v2 .t2w-v29-card--collapsed .t2w-v29-card-header:has(.t2w-v29-card-thumb-mini) .t2w-v7-toggle { grid-column: 4; } body.t2w-planner-skin #t2w-planner-v2 .t2w-v29-card--collapsed .t2w-v7-toggle-text { display: none; } body.t2w-planner-skin #t2w-planner-v2 #t2w-map .leaflet-tile-pane { filter: saturate(.82) contrast(.96) sepia(.07); } body.t2w-planner-skin #t2w-planner-v2 #t2w-map .t2w-skin-map-summary { /* (S270 접기: L1114 병합) */ display: flex; background: color-mix(in srgb, var(--sk-navy) 90%, transparent); color: var(--sk-paper); border-color: color-mix(in srgb, var(--sk-paper) 18%, transparent); box-shadow: 0 18px 44px color-mix(in srgb, var(--sk-navy) 38%, transparent); } body.t2w-planner-skin #t2w-planner-v2 #t2w-map .t2w-skin-map-summary__eye, body.t2w-planner-skin #t2w-planner-v2 #t2w-map .t2w-skin-map-summary__stat span { color: color-mix(in srgb, var(--sk-paper) 74%, transparent); } body.t2w-planner-skin #t2w-planner-v2 #t2w-map .t2w-skin-map-summary__stat b { color: var(--sk-gold); } body.t2w-planner-skin #t2w-planner-v2 #t2w-map .t2w-skin-map-optimize { /* (S270 접기: L1166 병합) */ position: absolute; left: 16px; bottom: 84px; /* 좌하단 요약(bottom16) 위 */ z-index: 700; display: inline-flex; align-items: center; gap: 7px; padding: 10px 15px; border-radius: 12px; border: 1px solid color-mix(in srgb, var(--sk-navy) 14%, transparent); background: color-mix(in srgb, var(--sk-paper) 94%, transparent); -webkit-backdrop-filter: blur(10px); backdrop-filter: blur(10px); color: var(--sk-navy); font-weight: 800; font-size: 13px; box-shadow: var(--sk-sh-sm); cursor: pointer; transition: border-color .2s, background .2s; background: color-mix(in srgb, var(--sk-navy) 88%, transparent); color: var(--sk-paper); border-color: color-mix(in srgb, var(--sk-paper) 16%, transparent); box-shadow: 0 14px 34px color-mix(in srgb, var(--sk-navy) 30%, transparent); } body.t2w-planner-skin #t2w-planner-v2 #t2w-map .t2w-map-day-selector { display: none; } body.t2w-planner-skin #t2w-planner-v2 .t2w-skin-rail__days { width: 100%; } body.t2w-planner-skin #t2w-planner-v2 .t2w-skin-rail__days #t2w-calendar, body.t2w-planner-skin #t2w-planner-v2 .t2w-skin-rail__days .t2w-cal--shell-agenda { width: 100%; padding: 0; box-sizing: border-box; } body.t2w-planner-skin #t2w-planner-v2 .t2w-skin-rail__days .t2w-cal-pill-bar { /* (S270 접기: L820 병합) */ flex-direction: column; gap: 8px; align-items: stretch; width: 100%; height: auto; padding: 0; border: 0; background: transparent; align-items: center; } body.t2w-planner-skin #t2w-planner-v2 .t2w-skin-rail__days .t2w-cal-pills { /* (S270 접기: L825 병합) */ flex-direction: column; gap: 8px; overflow: visible; width: 100%; flex: 0 0 auto; align-items: center; gap: 8px; counter-reset: skin-day-num; } body.t2w-planner-skin #t2w-planner-v2 .t2w-skin-rail__days .t2w-cal-pill { /* (S270 접기: L830 병합) */ width: 100%; flex-direction: column; align-items: center; gap: 2px; padding: 10px 4px; text-align: center; min-height: 56px; counter-increment: skin-day-num; width: 62px; min-width: 62px; min-height: 66px; margin: 0 auto; justify-content: center; padding: 8px 4px; box-sizing: border-box; } body.t2w-planner-skin #t2w-planner-v2 .t2w-skin-rail__days .t2w-cal-pill .t2w-cal-pill-day::before { content: "D" counter(skin-day-num); font-size: 20px; line-height: 1; letter-spacing: 0; } body.t2w-planner-skin #t2w-planner-v2 .t2w-skin-rail__days .t2w-cal-pill-date { /* (S270 접기: L840 병합) */ display: block; font-size: 10.5px; font-weight: 700; color: var(--sk-champ-deep); opacity: .85; display: block; margin-top: 4px; font-size: 10px; line-height: 1.1; } }