palnetworks
/
pal-hom-2026
8
0
Fork 0
Code Issues Pull Requests Projects Releases Wiki Activity
Browse Source

feat : main section1 반응형 추가

remotes/origin/main
이시연 2 weeks ago
parent
95aea7c5ec
commit
9cd57aae3e
2 changed files with 66 additions and 135 deletions
Whitespace
Show all changes Ignore whitespace when comparing lines Ignore changes in amount of whitespace Ignore changes in whitespace at EOL
Split View
Diff Options
Show Stats Download Patch File Download Diff File
  1. BIN
      public/images/main_utm_img.png
  2. 199
      src/css/main.css

BIN
public/images/main_utm_img.png
View File

Binary file not shown.
Side by Side Swipe Overlay

Before

Width:  |  Height:  |  Size: 1.1 MiB

After

Width:  |  Height:  |  Size: 1.2 MiB

199
src/css/main.css
Unescape View File

@ -117,188 +117,119 @@ body{overflow-x:hidden;}
/* UTM */
.utm-hero { position: relative; overflow: hidden; background: linear-gradient(180deg, #f0f4ff 0%, #f7f9ff 60%, #ffffff 100%); min-height: 100vh; display: flex; align-items: center; padding: 80px 0; }
.utm-hero__blob { position: absolute; border-radius: 50%; pointer-events: none; filter: blur(72px); }
.utm-hero__blob--1 { width: 480px; height: 480px; top: -120px; left: -80px; background: rgba(99,102,241,0.07); }
.utm-hero__blob--2 { width: 360px; height: 360px; bottom: -80px; right: 10%; background: rgba(139,92,246,0.06); }
.utm-hero__inner { max-width: 1200px; margin: 0 auto; padding: 0 40px; display: flex; flex-direction: column; align-items: center; text-align: center; position: relative; z-index: 1; width: 100%; }
.utm-hero__eyebrow { display: inline-block; font-size: 11px; font-weight: 700; letter-spacing: 2.5px; text-transform: uppercase; color: #6366F1; margin-bottom: 24px; }
.utm-hero__title { font-size: clamp(36px, 4.5vw, 64px); font-weight: 800; line-height: 1.15; letter-spacing: -0.03em; color: #0e1120; margin: 0 0 24px; word-break: keep-all; }
.utm-hero__title em { font-style: normal; color: #1A1F5E; -webkit-text-fill-color: #1A1F5E; }
.utm-hero__desc { font-size: 16px; color: #666; line-height: 1.85; margin: 0 0 36px; word-break: keep-all; }
.utm-hero__chips { list-style: none; display: flex; flex-wrap: wrap; justify-content: center; gap: 10px; margin: 0 0 48px; padding: 0; }
.utm-hero__chip { display: flex; align-items: center; gap: 8px; background: rgba(255,255,255,0.75); border: 1px solid rgba(99,102,241,0.18); border-radius: 999px; padding: 7px 16px 7px 10px; backdrop-filter: blur(8px); }
.utm-hero__chip-num { font-size: 10px; font-weight: 700; color: #6366F1; letter-spacing: 0.5px; }
.utm-hero__chip-label { font-size: 13px; font-weight: 600; color: #1A1F5E; }
.utm-hero__showcase {
position: relative;
width: 100%;
border-radius: 20px;
overflow: visible; /* ← 핵심: 패널이 밖으로 나올 수 있게 */
box-shadow: 0 32px 80px rgba(26,31,94,0.16), 0 8px 24px rgba(26,31,94,0.08);
}
/* 지도 full width */
.utm-hero__map-wrap {
position: relative;
width: 100%;
border-radius: 20px;
overflow: hidden;
}
.utm-hero__map-img {
display: block;
width: 100%;
height: 100%;
object-fit: cover;
}
.utm-panel {
position: absolute;
bottom: -32px;
left: -140px;
width: 340px;
background: #1a1d2e;
padding: 24px 20px;
display: flex;
flex-direction: column;
gap: 0;
border-radius: 16px;
overflow: hidden;
box-shadow: 0 24px 60px rgba(0,0,0,0.45), 0 0 0 1px rgba(99,102,241,0.2);
z-index: 5;
}
.utm-hero__showcase { position: relative; width: 100%; border-radius: 20px; overflow: visible; box-shadow: 0 32px 80px rgba(26,31,94,0.16), 0 8px 24px rgba(26,31,94,0.08); }
.utm-hero__map-wrap { position: relative; width: 100%; border-radius: 20px; overflow: hidden; }
.utm-hero__map-img { display: block; width: 100%; height: 100%; object-fit: cover; }
.utm-panel { position: absolute; bottom: -32px; left: -140px; width: 340px; background: #1a1d2e; padding: 24px 20px; display: flex; flex-direction: column; gap: 0; border-radius: 16px; overflow: hidden; box-shadow: 0 24px 60px rgba(0,0,0,0.45), 0 0 0 1px rgba(99,102,241,0.2); z-index: 5; }
.utm-panel__header { display: flex; align-items: center; gap: 10px; margin-bottom: 4px; }
.utm-panel__title { font-size: 14px; font-weight: 700; color: #fff; }
.utm-panel__badge { font-size: 11px; font-weight: 600; background: rgba(249,115,22,0.2); color: #f97316; border-radius: 4px; padding: 2px 8px; }
.utm-panel__table { display: flex; flex-direction: column; border: 1px solid rgba(255,255,255,0.07); border-radius: 10px; overflow: hidden; }
.utm-panel__thead { display: grid; grid-template-columns: 1.1fr 0.8fr 1.2fr 0.7fr 1fr; padding: 8px 12px; background: rgba(255,255,255,0.05); font-size: 11px; color: rgba(255,255,255,0.4); font-weight: 600; }
.utm-panel__row { display: grid; grid-template-columns: 1.1fr 0.8fr 1.2fr 0.7fr 1fr; padding: 10px 12px; border-top: 1px solid rgba(255,255,255,0.05); align-items: center; transition: background 0.2s; }
.utm-panel__row--active { background: rgba(99,102,241,0.1); }
.utm-panel__cell { font-size: 12px; color: rgba(255,255,255,0.75); }
.utm-panel__status { font-size: 11px; font-weight: 600; padding: 2px 8px; border-radius: 4px; display: inline-block; }
.utm-panel__status--wait { background: rgba(251,191,36,0.15); color: #fbbf24; }
.utm-panel__status--done { background: rgba(52,211,153,0.15); color: #34d399; }
.utm-panel__btn { font-size: 11px; margin-left: 8px; font-weight: 600; background: #6366F1; color: #fff; border-radius: 5px; padding: 4px 10px; display: inline-block; }
.utm-panel__btn { font-size: 11px; font-weight: 600; background: #6366F1; color: #fff; border-radius: 5px; padding: 4px 10px; margin-left: 8px; display: inline-block; }
.utm-panel__btn--hover { background: #4f46e5; box-shadow: 0 0 0 3px rgba(99,102,241,0.3); }
/* 상세박스: 아래로 펼쳐지는 애니메이션 */
.utm-panel__detail {
background: rgba(255,255,255,0.04);
border: 1px solid rgba(255,255,255,0.08);
border-radius: 10px;
padding: 0 16px;
max-height: 0;
overflow: hidden;
transition: max-height 0.5s cubic-bezier(0.22, 1, 0.36, 1),
padding 0.3s ease,
margin-top 0.3s ease;
margin-top: 0;
}
.utm-panel__detail--show {
max-height: 400px;
padding: 14px 16px;
margin-top: 16px;
}
.utm-panel__detail { background: rgba(255,255,255,0.04); border: 1px solid rgba(255,255,255,0.08); border-radius: 10px; padding: 0 16px; max-height: 0; overflow: hidden; margin-top: 0; transition: max-height 0.5s cubic-bezier(0.22, 1, 0.36, 1), padding 0.3s ease, margin-top 0.3s ease; }
.utm-panel__detail--show { max-height: 400px; padding: 14px 16px; margin-top: 16px; }
.utm-panel__detail-title { font-size: 13px; font-weight: 700; color: #fff; margin-bottom: 2px; }
.utm-panel__detail-rows { display: flex; flex-direction: column; gap: 6px; }
.utm-panel__detail-row { display: flex; justify-content: space-between; align-items: center; font-size: 12px; }
.utm-panel__detail-row span:first-child { color: rgba(255,255,255,0.4); }
.utm-panel__detail-row span:last-child { color: rgba(255,255,255,0.85); font-weight: 500; }
.utm-panel__detail-actions { display: flex; justify-content: flex-end; margin-top: 14px; }
.utm-panel__approve-btn { font-size: 12px; font-weight: 700; background: #6366F1; color: #fff; border-radius: 6px; padding: 7px 16px; display: inline-block; }
.utm-panel__approve-btn--hover { background: #4f46e5; box-shadow: 0 0 0 3px rgba(99,102,241,0.35); }
.utm-panel__toast { display: flex; align-items: center; gap: 8px; background: rgba(52,211,153,0.15); border: 1px solid rgba(52,211,153,0.3); border-radius: 8px; padding: 10px 14px; font-size: 12px; font-weight: 600; color: #34d399; margin-top: 4px; }
.utm-panel__toast-icon { font-size: 14px; font-weight: 800; }
.utm-panel__confirm-overlay {
position: absolute;
inset: 0;
background: rgba(10, 10, 30, 0.6);
backdrop-filter: blur(6px);
display: flex;
align-items: center;
justify-content: center;
z-index: 20;
border-radius: 16px;
}
.utm-confirm { background: #22253a; border: 1px solid rgba(255,255,255,0.12); border-radius: 16px; padding: 28px 24px; display: flex; flex-direction: column; align-items: center; gap: 12px; width: 260px; text-align: center; box-shadow: 0 32px 80px rgba(0,0,0,0.5), 0 0 0 1px rgba(99,102,241,0.2); gap: 14px;}
.utm-panel__confirm-overlay { position: absolute; inset: 0; background: rgba(10,10,30,0.6); backdrop-filter: blur(6px); display: flex; align-items: center; justify-content: center; z-index: 20; border-radius: 16px; }
.utm-confirm { background: #22253a; border: 1px solid rgba(255,255,255,0.12); border-radius: 16px; padding: 28px 24px; display: flex; flex-direction: column; align-items: center; gap: 14px; width: 260px; text-align: center; box-shadow: 0 32px 80px rgba(0,0,0,0.5), 0 0 0 1px rgba(99,102,241,0.2); }
.utm-confirm__icon { font-size: 32px; }
.utm-confirm__title { font-size: 16px; font-weight: 700; color: #fff; line-height: 1.4; }
.utm-confirm__desc { font-size: 13px; color: rgba(255,255,255,0.5); }
.utm-confirm__btns { display: flex; gap: 10px; margin-top: 8px; width: 100%; }
.utm-confirm__cancel { flex: 1; text-align: center; font-size: 14px; font-weight: 600; padding: 11px; border-radius: 10px; background: rgba(255,255,255,0.08); color: rgba(255,255,255,0.6); }
.utm-confirm__ok { flex: 1; text-align: center; font-size: 14px; font-weight: 700; padding: 11px; border-radius: 10px; background: #6366F1; color: #fff; box-shadow: 0 4px 16px rgba(99,102,241,0.4); }
.utm-cursor { position: absolute; top: 0; left: 0; pointer-events: none; z-index: 100; transition: transform 0.7s cubic-bezier(0.22, 1, 0.36, 1); }
.utm-cursor__dot { width: 20px; height: 20px; background: #fff; border: 2px solid #6366F1; border-radius: 50%; box-shadow: 0 2px 10px rgba(99,102,241,0.45); transition: transform 0.15s ease; }
.utm-cursor--click .utm-cursor__dot { transform: scale(0.65); }
.utm-cursor {
position: absolute;
top: 0;
left: 0;
pointer-events: none;
z-index: 100;
transition: transform 0.7s cubic-bezier(0.22, 1, 0.36, 1);
}
.utm-cursor__dot {
width: 20px;
height: 20px;
background: #fff;
border: 2px solid #6366F1;
border-radius: 50%;
box-shadow: 0 2px 10px rgba(99, 102, 241, 0.45);
transition: transform 0.15s ease;
/* UTM 반응형 */
@media (max-width: 1280px) {
.utm-panel { left: -80px; width: 320px; }
}
.utm-cursor--click .utm-cursor__dot {
transform: scale(0.65);
@media (max-width: 1024px) {
.utm-hero__inner { padding: 0 32px; }
.utm-panel { left: -20px; width: 300px; bottom: -24px; }
}
@media (max-width: 1024px) { .utm-hero__showcase { grid-template-columns: 1fr; } .utm-hero__map-wrap { height: 280px; } }
@media (max-width: 768px) {
.utm-hero { padding: 72px 0 60px; }
.utm-hero__inner { padding: 0 20px; }
.utm-hero__title { font-size: clamp(28px, 7vw, 42px); }
.utm-hero__desc { font-size: 14px; }
.utm-hero__chips { gap: 8px; margin-bottom: 36px; }
@media (max-width: 768px) { .utm-hero { padding: 72px 0 60px; } .utm-hero__inner { padding: 0 20px; } .utm-hero__title { font-size: clamp(28px, 7vw, 42px); } .utm-hero__desc { font-size: 14px; } .utm-hero__chips { gap: 8px; margin-bottom: 36px; } .utm-hero__map-wrap { height: 220px; } .utm-panel { padding: 16px 14px; min-height: auto; } }
/* showcase: flex 세로 배치 */
.utm-hero__showcase {
display: flex;
flex-direction: column;
border-radius: 16px;
overflow: hidden;
box-shadow: 0 16px 48px rgba(26,31,94,0.14);
}
.utm-hero__map-wrap {
border-radius: 0;
min-height: 220px;
}
/* 패널: static으로 풀고 지도 아래에 자연스럽게 */
.utm-panel {
position: static;
left: auto;
bottom: auto;
transform: none;
width: 100%;
border-radius: 0 0 16px 16px;
box-shadow: none;
border-top: 1px solid rgba(255,255,255,0.06);
}
.utm-confirm { width: 200px; padding: 20px 16px; }
.utm-confirm__title { font-size: 13px; }
.utm-confirm__cancel, .utm-confirm__ok { font-size: 12px; padding: 8px; }
.utm-cursor { display: none; }
}
@media (max-width: 480px) { .utm-hero__inner { padding: 0 16px; } .utm-hero__chip { padding: 6px 12px 6px 8px; } .utm-hero__chip-label { font-size: 12px; } }
@media (max-width: 480px) {
.utm-hero__inner { padding: 0 16px; }
.utm-hero__chip { padding: 6px 12px 6px 8px; }
.utm-hero__chip-label { font-size: 12px; }
.utm-panel { padding: 16px 14px; }
.utm-hero__map-wrap { min-height: 180px; }
.utm-panel__thead, .utm-panel__row { grid-template-columns: 1fr 0.8fr 1.1fr 0.7fr 0.9fr; padding: 8px 10px; }
.utm-panel__cell { font-size: 10px; }
.utm-panel__btn { font-size: 10px; padding: 3px 7px; }
}
/* ─── UAM ─── */
.aurora-canvas {position: absolute; inset: 0; width: 100%; height: 100%; pointer-events: none; z-index: 0; }

Write Preview
Loading…
Cancel
Save