diff --git a/supporters/src/styles/plan.css b/supporters/src/styles/plan.css index 5d7959e..4e00b03 100644 --- a/supporters/src/styles/plan.css +++ b/supporters/src/styles/plan.css @@ -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 .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; } -.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 .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 .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); } -.plan-hero .stats { margin-top: 1.8rem; grid-template-columns: repeat(auto-fit, minmax(160px, 1fr)); } -.plan-hero .stat b { font-size: 2.2rem; } +.plan-hero .stats { grid-template-columns: repeat(auto-fit, minmax(160px, 1fr)); } /* 입력 단계 카드 (틴트 섹션) */ .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; } } .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 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 .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 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; } -.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.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); } /* 다크 섹션 핵심 날짜: 글래스 통계 카드 변형 */ -.stats.dates { grid-template-columns: repeat(auto-fit, minmax(190px, 1fr)); } -.stats.dates .stat { padding: 1.2rem 1.3rem; display: flex; flex-direction: column; } +.stats.dates { grid-template-columns: repeat(3, minmax(0, 1fr)); } +.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 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); } @@ -84,10 +81,10 @@ button.btn { font: inherit; cursor: pointer; border: 0; } .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; } -.timeline { display: grid; gap: 0.6rem; } -.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); } +.timeline { display: grid; gap: 1.1rem; } +.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 .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; } @@ -104,7 +101,7 @@ button.btn { font: inherit; cursor: pointer; border: 0; } @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 .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; } @@ -127,22 +124,18 @@ button.btn { font: inherit; cursor: pointer; border: 0; } /* 모바일 (≤720px): 통계·날짜 카드 2열, 타임라인 날짜 머리 가로 배치, 히어로 여백 축소 */ @media (max-width: 720px) { - .plan-hero { padding: 2.4rem 0 2.2rem; } .plan-hero h1 { font-size: 1.9rem; } .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 .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 .label { font-size: 0.9rem; } .plan-hero .stat .desc { font-size: 0.78rem; } .stats.dates .stat b { font-size: 1.35rem; } .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; } .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 .picks a, .day .picks span.pick { font-size: 0.82rem; padding: 0.3rem 0.65rem; } .book-row { grid-template-columns: 1fr; }