castad/o2o-infinith-demo
9
0
Fork 0
Code Issues Pull Requests Packages Projects Releases Wiki Activity

spacing(supporters): 회복 일정 페이지 간격을 전역 규격에 맞춤

Browse Source 
- 히어로 통계 위 이중 여백 제거(섹션 머리 1.6rem만), 숫자 크기 전역 .stat b 그대로
- 다크 날짜 카드 패딩을 전역 .stat(1.5rem 1.6rem)으로, 6장을 3×2 고정
- 타임라인 행 간격 1.1rem·행 패딩 1rem 1.2rem(영상 목록 .vlist/.vitem 규격), 숙소 그리드 간격 1.25rem(.grid 규격), 범례 음수 마진 제거
- 모바일: 전역 모바일 규격과 충돌하던 히어로·섹션·카드 패딩 덮어쓰기 제거

Co-Authored-By: Claude Fable 5.1 <noreply@anthropic.com>
This commit is contained in:
Haewon Kam 2026-09-10 17:02:29 +09:00
parent 295401f356
commit e47c5e2fc6
1 changed files with 10 additions and 17 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

27
supporters/src/styles/plan.css
View File

@ -7,14 +7,12 @@
.plan-hero h1 { font-family: "Playfair Display", Georgia, serif; font-size: 2.3rem; font-weight: 700; letter-spacing: 0; line-height: 1.15; display: inline-block; background: linear-gradient(to right, var(--purple-300), var(--blue-300)); -webkit-background-clip: text; background-clip: text; color: transparent; margin: 0; } .plan-hero h1 { font-family: "Playfair Display", Georgia, serif; font-size: 2.3rem; font-weight: 700; letter-spacing: 0; line-height: 1.15; display: inline-block; background: linear-gradient(to right, var(--purple-300), var(--blue-300)); -webkit-background-clip: text; background-clip: text; color: transparent; margin: 0; }
.plan-hero .lede { color: rgba(255,255,255,0.82); font-size: 1.02rem; max-width: 760px; margin: 0.6rem 0 0; } .plan-hero .lede { color: rgba(255,255,255,0.82); font-size: 1.02rem; max-width: 760px; margin: 0.6rem 0 0; }
.plan-hero .lede strong { color: #fff; } .plan-hero .lede strong { color: #fff; }
.lang-links { display: flex; flex-wrap: wrap; gap: 0.6rem; margin-top: 1.2rem; }
.lang-links a { display: inline-flex; align-items: center; gap: 0.5rem; padding: 0.45rem 1rem 0.45rem 0.55rem; border-radius: 999px; background: rgba(255,255,255,0.08); border: 1px solid rgba(255,255,255,0.16); color: #fff; text-decoration: none; font-size: 0.9rem; font-weight: 600; } .lang-links a { display: inline-flex; align-items: center; gap: 0.5rem; padding: 0.45rem 1rem 0.45rem 0.55rem; border-radius: 999px; background: rgba(255,255,255,0.08); border: 1px solid rgba(255,255,255,0.16); color: #fff; text-decoration: none; font-size: 0.9rem; font-weight: 600; }
.lang-links a .ico { display: inline-grid; place-items: center; width: 26px; height: 26px; border-radius: 999px; background: rgba(255,255,255,0.12); font-family: Inter, sans-serif; font-size: 0.66rem; letter-spacing: 0.06em; color: var(--purple-200); } .lang-links a .ico { display: inline-grid; place-items: center; width: 26px; height: 26px; border-radius: 999px; background: rgba(255,255,255,0.12); font-family: Inter, sans-serif; font-size: 0.66rem; letter-spacing: 0.06em; color: var(--purple-200); }
.lang-links a.on { background: linear-gradient(to right, var(--grad-start), var(--grad-end)); border-color: transparent; } .lang-links a.on { background: linear-gradient(to right, var(--grad-start), var(--grad-end)); border-color: transparent; }
.lang-links a.on .ico { background: rgba(255,255,255,0.2); color: #fff; } .lang-links a.on .ico { background: rgba(255,255,255,0.2); color: #fff; }
.lang-links a:hover { text-decoration: none; border-color: rgba(216,180,254,0.6); } .lang-links a:hover { text-decoration: none; border-color: rgba(216,180,254,0.6); }
.plan-hero .stats { margin-top: 1.8rem; grid-template-columns: repeat(auto-fit, minmax(160px, 1fr)); } .plan-hero .stats { grid-template-columns: repeat(auto-fit, minmax(160px, 1fr)); }
.plan-hero .stat b { font-size: 2.2rem; }
/* 입력 단계 카드 (틴트 섹션) */ /* 입력 단계 카드 (틴트 섹션) */
.steps-grid { display: grid; grid-template-columns: minmax(260px, 1fr) 2fr; gap: 1.25rem; } .steps-grid { display: grid; grid-template-columns: minmax(260px, 1fr) 2fr; gap: 1.25rem; }
@ -22,13 +20,12 @@
@media (max-width: 860px) { .steps-grid { grid-template-columns: 1fr; } } @media (max-width: 860px) { .steps-grid { grid-template-columns: 1fr; } }
.card .cat.step { display: inline-flex; align-items: center; gap: 0.45rem; } .card .cat.step { display: inline-flex; align-items: center; gap: 0.45rem; }
.card .cat.step .n { display: inline-grid; place-items: center; width: 1.35rem; height: 1.35rem; border-radius: 999px; background: linear-gradient(to right, var(--grad-start), var(--grad-end)); color: #fff; font-family: "Playfair Display", Georgia, serif; font-size: 0.8rem; font-weight: 700; } .card .cat.step .n { display: inline-grid; place-items: center; width: 1.35rem; height: 1.35rem; border-radius: 999px; background: linear-gradient(to right, var(--grad-start), var(--grad-end)); color: #fff; font-family: "Playfair Display", Georgia, serif; font-size: 0.8rem; font-weight: 700; }
.card h3.serif { font-family: "Playfair Display", Georgia, serif; font-size: 1.2rem; } .card h3.serif { font-family: "Playfair Display", Georgia, serif; font-size: 1.12rem; }
.card .sub2 { font-size: 0.88rem; color: var(--slate-600); margin: 0; flex: 0; } .card .sub2 { font-size: 0.88rem; color: var(--slate-600); margin: 0; flex: 0; }
.card .hint { font-size: 0.83rem; color: var(--slate-500); margin: 0.4rem 0 0; flex: 0; } .card .hint { font-size: 0.83rem; color: var(--slate-500); margin: 0.4rem 0 0; flex: 0; }
.field { display: grid; gap: 0.35rem; margin-top: 0.5rem; } .field { display: grid; gap: 0.35rem; margin-top: 0.5rem; }
.field label { font-size: 0.82rem; font-weight: 600; color: var(--slate-600); } .field label { font-size: 0.82rem; font-weight: 600; color: var(--slate-600); }
.field select, .field input[type="date"] { font: inherit; font-size: 1rem; padding: 0.6rem 0.8rem; border: 1px solid var(--slate-200); border-radius: 12px; background: #fff; color: var(--indigo); max-width: 320px; } .field select, .field input[type="date"] { font: inherit; font-size: 1rem; padding: 0.6rem 0.8rem; border: 1px solid var(--slate-200); border-radius: 12px; background: #fff; color: var(--indigo); max-width: 320px; }
.lang-inline { display: inline-flex; gap: 0.35rem; }
.lang-inline a { border: 1px solid var(--slate-200); background: #fff; color: var(--slate-600); border-radius: 999px; padding: 0.35rem 0.9rem; font-size: 0.85rem; font-weight: 600; text-decoration: none; } .lang-inline a { border: 1px solid var(--slate-200); background: #fff; color: var(--slate-600); border-radius: 999px; padding: 0.35rem 0.9rem; font-size: 0.85rem; font-weight: 600; text-decoration: none; }
.lang-inline a.on { background: var(--primary-900); color: #fff; border-color: var(--primary-900); } .lang-inline a.on { background: var(--primary-900); color: #fff; border-color: var(--primary-900); }
@ -62,8 +59,8 @@ button.btn { font: inherit; cursor: pointer; border: 0; }
.tag.diet { background: var(--slate-100); color: var(--slate-700); } .tag.diet { background: var(--slate-100); color: var(--slate-700); }
/* 다크 섹션 핵심 날짜: 글래스 통계 카드 변형 */ /* 다크 섹션 핵심 날짜: 글래스 통계 카드 변형 */
.stats.dates { grid-template-columns: repeat(auto-fit, minmax(190px, 1fr)); } .stats.dates { grid-template-columns: repeat(3, minmax(0, 1fr)); }
.stats.dates .stat { padding: 1.2rem 1.3rem; display: flex; flex-direction: column; } .stats.dates .stat { display: flex; flex-direction: column; }
.stats.dates .stat .label { order: -1; margin: 0 0 0.35rem; font-size: 0.8rem; color: rgba(255,255,255,0.72); font-weight: 600; letter-spacing: 0.02em; } .stats.dates .stat .label { order: -1; margin: 0 0 0.35rem; font-size: 0.8rem; color: rgba(255,255,255,0.72); font-weight: 600; letter-spacing: 0.02em; }
.stats.dates .stat b { font-size: 1.75rem; display: flex; flex-wrap: wrap; align-items: baseline; gap: 0.4rem; } .stats.dates .stat b { font-size: 1.75rem; display: flex; flex-wrap: wrap; align-items: baseline; gap: 0.4rem; }
.stats.dates .stat b .wd { font-family: Pretendard, Inter, sans-serif; font-size: 0.85rem; font-weight: 600; color: rgba(255,255,255,0.7); } .stats.dates .stat b .wd { font-family: Pretendard, Inter, sans-serif; font-size: 0.85rem; font-weight: 600; color: rgba(255,255,255,0.7); }
@ -84,10 +81,10 @@ button.btn { font: inherit; cursor: pointer; border: 0; }
.card.warn .fine, .card.ok .fine { color: inherit; opacity: 0.85; } .card.warn .fine, .card.ok .fine { color: inherit; opacity: 0.85; }
/* 타임라인 (틴트 섹션 위 흰 카드) */ /* 타임라인 (틴트 섹션 위 흰 카드) */
.legend { display: flex; flex-wrap: wrap; gap: 0.5rem 1.2rem; font-size: 0.85rem; color: var(--slate-600); margin: -0.4rem 0 1.2rem; } .legend { display: flex; flex-wrap: wrap; gap: 0.5rem 1.2rem; font-size: 0.85rem; color: var(--slate-600); margin: 0 0 1.25rem; }
.legend span { display: inline-flex; align-items: center; gap: 0.35rem; } .legend span { display: inline-flex; align-items: center; gap: 0.35rem; }
.timeline { display: grid; gap: 0.6rem; } .timeline { display: grid; gap: 1.1rem; }
.day { display: grid; grid-template-columns: 160px 1fr; gap: 0.6rem 1.2rem; align-items: start; padding: 0.95rem 1.2rem; border-radius: 16px; border: 1px solid var(--slate-100); background: #fff; box-shadow: var(--shadow); } .day { display: grid; grid-template-columns: 160px 1fr; gap: 0.6rem 1.2rem; align-items: start; padding: 1rem 1.2rem; border-radius: 16px; border: 1px solid var(--slate-100); background: #fff; box-shadow: var(--shadow); }
.day.mark { border-color: var(--st-good-border); background: #FBFAFF; } .day.mark { border-color: var(--st-good-border); background: #FBFAFF; }
.day .d { display: grid; gap: 0.1rem; } .day .d { display: grid; gap: 0.1rem; }
.day .d b { color: var(--primary-900); font-size: 1rem; font-family: "Playfair Display", Georgia, serif; font-weight: 700; } .day .d b { color: var(--primary-900); font-size: 1rem; font-family: "Playfair Display", Georgia, serif; font-weight: 700; }
@ -104,7 +101,7 @@ button.btn { font: inherit; cursor: pointer; border: 0; }
@media (max-width: 640px) { .day { grid-template-columns: 1fr; } } @media (max-width: 640px) { .day { grid-template-columns: 1fr; } }
/* 예약 (다크 섹션 위 흰 카드) */ /* 예약 (다크 섹션 위 흰 카드) */
.hotel-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(230px, 1fr)); gap: 1rem; } .hotel-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(230px, 1fr)); gap: 1.25rem; }
.hotel-grid .card small { color: var(--slate-500); font-size: 0.78rem; } .hotel-grid .card small { color: var(--slate-500); font-size: 0.78rem; }
.hotel-grid .card .links { display: flex; gap: 0.7rem; flex-wrap: wrap; font-size: 0.85rem; font-weight: 600; } .hotel-grid .card .links { display: flex; gap: 0.7rem; flex-wrap: wrap; font-size: 0.85rem; font-weight: 600; }
.book-row { display: grid; grid-template-columns: repeat(auto-fit, minmax(280px, 1fr)); gap: 1.25rem; margin-top: 1.5rem; } .book-row { display: grid; grid-template-columns: repeat(auto-fit, minmax(280px, 1fr)); gap: 1.25rem; margin-top: 1.5rem; }
@ -127,22 +124,18 @@ button.btn { font: inherit; cursor: pointer; border: 0; }
/* 모바일 (≤720px): 통계·날짜 카드 2열, 타임라인 날짜 머리 가로 배치, 히어로 여백 축소 */ /* 모바일 (≤720px): 통계·날짜 카드 2열, 타임라인 날짜 머리 가로 배치, 히어로 여백 축소 */
@media (max-width: 720px) { @media (max-width: 720px) {
.plan-hero { padding: 2.4rem 0 2.2rem; }
.plan-hero h1 { font-size: 1.9rem; } .plan-hero h1 { font-size: 1.9rem; }
.plan-hero .lede { font-size: 0.95rem; } .plan-hero .lede { font-size: 0.95rem; }
.plan-hero .stats, .stats.dates { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 0.7rem; } .plan-hero .stats, .stats.dates { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 0.7rem; }
.plan-hero .stat, .stats.dates .stat { padding: 0.95rem 1rem; } .plan-hero .stat, .stats.dates .stat { padding: 1.2rem 1.2rem; }
.plan-hero .stat b { font-size: 1.8rem; } .plan-hero .stat b { font-size: 1.8rem; }
.plan-hero .stat .label { font-size: 0.9rem; } .plan-hero .stat .label { font-size: 0.9rem; }
.plan-hero .stat .desc { font-size: 0.78rem; } .plan-hero .stat .desc { font-size: 0.78rem; }
.stats.dates .stat b { font-size: 1.35rem; } .stats.dates .stat b { font-size: 1.35rem; }
.stats.dates .stat .desc { font-size: 0.78rem; } .stats.dates .stat .desc { font-size: 0.78rem; }
.section.tint.plan-input { padding: 2.4rem 0 !important; }
.sec-head h2 { font-size: 1.6rem; }
.card { padding: 1.15rem 1.2rem; }
.field select, .field input[type="date"] { max-width: none; width: 100%; font-size: 16px; } .field select, .field input[type="date"] { max-width: none; width: 100%; font-size: 16px; }
.proc-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); } .proc-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
.day { padding: 0.85rem 1rem; gap: 0.5rem; } .day { gap: 0.5rem; }
.day .d { display: flex; flex-wrap: wrap; align-items: baseline; gap: 0.2rem 0.6rem; } .day .d { display: flex; flex-wrap: wrap; align-items: baseline; gap: 0.2rem 0.6rem; }
.day .picks a, .day .picks span.pick { font-size: 0.82rem; padding: 0.3rem 0.65rem; } .day .picks a, .day .picks span.pick { font-size: 0.82rem; padding: 0.3rem 0.65rem; }
.book-row { grid-template-columns: 1fr; } .book-row { grid-template-columns: 1fr; }