115 lines
16 KiB
CSS
115 lines
16 KiB
CSS
.landing-white .landing-shell{display:grid;grid-template-columns:minmax(0,3fr) minmax(320px,1fr)}
|
|
.landing-white .landing-hero{min-width:0;padding-inline:clamp(20px,2.5vw,48px)}
|
|
.landing-white .landing-visual{width:100%;max-width:1500px}
|
|
.landing-white .landing-cards{grid-template-columns:repeat(2,minmax(0,1fr));width:min(820px,95%);gap:20px}
|
|
.landing-white .landing-brand-meta{width:min(310px,29%)}
|
|
.landing-white .landing-title-group{padding-top:38px}
|
|
.landing-white .landing-title{font-size:clamp(46px,5.4vw,94px)}
|
|
.sample-explorer{height:100dvh;min-height:0;min-width:0;padding:24px 22px 18px;display:grid;grid-template-rows:auto minmax(200px,1.5fr) minmax(130px,1fr) auto;gap:18px;background:linear-gradient(150deg,#fff,#f3f8fd);border-left:1px solid #dce6f0;box-shadow:-12px 0 50px #35659108;position:relative;z-index:5;color:#14263d}
|
|
.sample-explorer-head{display:flex;align-items:center;justify-content:space-between;gap:8px}
|
|
.sample-explorer-head>div>span{font-size:9px;letter-spacing:.17em;color:#61829e;font-weight:600}
|
|
.sample-explorer-head h2{font-size:22px;margin:7px 0 0;letter-spacing:-.04em}
|
|
.sample-explorer-head>b{font-size:27px;font-weight:400;color:#087fcb}.sample-explorer-head>b>span{display:block;font-size:8px;letter-spacing:.12em}
|
|
.sample-section-title{display:flex;align-items:center;justify-content:space-between;gap:8px;min-height:25px;margin-bottom:9px}.sample-section-title h3{margin:0;font-size:12px;font-weight:700}.sample-section-title>span{font-size:10px;color:#7690a6}
|
|
.sample-map-section{min-height:0;display:grid;grid-template-rows:auto minmax(0,1fr) auto}
|
|
.sample-map{position:relative;overflow:hidden;border-radius:14px;border:1px solid #dbe7f0;background:#e8f1f8;touch-action:none;cursor:grab;isolation:isolate}
|
|
.sample-map-tiles{position:absolute;inset:0;z-index:0}.sample-map-tiles img{position:absolute;max-width:none;user-select:none}
|
|
.sample-map-markers{position:absolute;inset:0;z-index:1;pointer-events:none}
|
|
.sample-marker{position:absolute;transform:translate(-50%,-50%);border:2px solid white;border-radius:50%;width:26px;height:26px;padding:0;background:#087fcb;color:white;font-size:10px;font-weight:700;box-shadow:0 2px 8px #173f6540;pointer-events:auto;cursor:pointer;transition:box-shadow .2s,background .2s}
|
|
.sample-marker.is-selected{background:#112c49;box-shadow:0 0 0 4px #38bdf84a;z-index:3}.sample-marker.is-hovered{background:#04a5e1;box-shadow:0 0 0 5px #38bdf848;z-index:4}
|
|
.sample-map-zoom{position:absolute;right:9px;top:9px;z-index:3;display:grid;border-radius:7px;overflow:hidden;box-shadow:0 2px 9px #183d6420}.sample-map-zoom button{border:0;border-bottom:1px solid #e5edf3;background:white;color:#31536e;width:27px;height:27px;font-size:17px;cursor:pointer}
|
|
.sample-map-attribution{position:absolute;bottom:0;right:0;background:#ffffffe8;font-size:8px;color:#456078;padding:3px 5px;z-index:4}.sample-map-attribution a{color:inherit}.sample-map-note{font-size:9px;color:#8296a8;margin:6px 0 0}.sample-map-error{position:absolute;bottom:25px;left:10px;background:#ffffffe8;border-radius:4px;padding:5px;font-size:9px;color:#64748b;z-index:4}.sample-map-error[hidden]{display:none}
|
|
.sample-map-modes{display:flex;border:1px solid #dce6f0;border-radius:7px;padding:2px;background:#edf4fa}.sample-map-modes button{font-size:10px;border:0;background:transparent;color:#698095;border-radius:4px;padding:4px 9px;cursor:pointer}.sample-map-modes button[aria-pressed=true]{background:white;color:#087fcb;box-shadow:0 1px 4px #42678a14}
|
|
.sample-list-section{min-height:0;display:grid;grid-template-rows:auto minmax(0,1fr)}.sample-list{overflow:auto;overscroll-behavior:contain;scrollbar-width:thin;scrollbar-color:#c6d8e6 transparent;padding:2px 3px 2px 0;display:flex;flex-direction:column;gap:5px}
|
|
.sample-row{display:flex;align-items:center;gap:12px;text-align:left;width:100%;border:1px solid transparent;background:transparent;padding:10px 11px;border-radius:10px;color:#14263d;cursor:pointer;flex-shrink:0;transition:background .2s,border-color .2s}.sample-row:hover,.sample-row.is-hovered{background:#edf6ff;border-color:#d5e9fa}.sample-row.is-selected{background:#eaf4ff;border-color:#acd5f2}.sample-row-number{font-size:10px;color:#7694ac;display:grid;place-items:center;border:1px solid #dce6f0;border-radius:7px;width:28px;height:30px;background:white}.sample-row.is-selected .sample-row-number{background:#087fcb;color:white;border-color:#087fcb}.sample-row strong{display:block;font-size:12px}.sample-row small{display:block;font-size:10px;color:#7d91a3;margin-top:4px}.sample-row-arrow{margin-left:auto;color:#8aacc5;font-size:15px}
|
|
.sample-selection{border-top:1px solid #dce6f0;padding-top:13px;min-width:0}.sample-selection-body{display:grid;grid-template-columns:46% minmax(0,1fr);gap:12px;align-items:center}.sample-preview{border:1px solid #dce7ef;border-radius:10px;background:#eff5fa;aspect-ratio:2;display:grid;place-items:center;overflow:hidden;color:#718ca0;font-size:10px}.sample-preview img{display:block;width:100%;height:100%;object-fit:contain}.sample-selection-info h3{font-size:17px;letter-spacing:-.03em;margin:0 0 7px}.sample-selection-info p{font-size:10px;color:#5c7589;line-height:1.6;margin:0}.sample-selection-info>span{font-size:9px;color:#8199aa;display:block;margin-top:4px}
|
|
.sample-load{width:100%;margin-top:12px;padding:12px;border:0;border-radius:9px;background:#087fcb;color:white;text-align:left;display:flex;justify-content:space-between;align-items:center;font-size:12px;font-weight:600;cursor:pointer;box-shadow:0 4px 14px #087fcb1b}.sample-load:hover{background:#066fad}.sample-load:disabled{opacity:.6;cursor:progress}
|
|
.sample-explorer #landing-sample-status{font-size:10px;line-height:1.5;color:#747f8a;max-height:44px;overflow:auto;margin:7px 0 0}.sample-explorer #landing-sample-status:empty{display:none}.sample-explorer button:focus-visible{outline:2px solid #087fcb;outline-offset:2px}
|
|
.sample-explorer.is-guided{box-shadow:inset 0 0 0 3px #38bdf8}
|
|
@media(max-height:850px){.sample-explorer{padding:17px 16px 14px;gap:12px;grid-template-rows:auto minmax(180px,1.4fr) minmax(110px,1fr) auto}.sample-explorer-head h2{font-size:19px}.sample-row{padding:8px 9px}.sample-selection-body{grid-template-columns:42% 1fr}.landing-white .landing-cards{translate:0 -3dvh}.landing-white .landing-card{padding:18px}.landing-white .landing-card p{font-size:11px}.landing-white .landing-title-group{padding-top:28px}}
|
|
@media(max-width:1100px){.landing-white .landing-shell{grid-template-columns:minmax(0,1fr) 320px}.landing-white .landing-brand-meta{position:static;width:100%;text-align:center;max-width:none;margin-top:12px}.landing-white .landing-hero-copy{display:block}.landing-white .landing-brand-meta .landing-kicker{justify-content:center}.landing-white .landing-brand-meta .landing-subtitle{display:none}.landing-white .landing-title-group{padding-top:0}.landing-white .landing-title{font-size:48px}.landing-white .landing-cards{gap:10px;width:100%}.landing-white .landing-card{padding:14px}.landing-white .landing-card h3{font-size:18px}.landing-white .landing-card-number,.landing-white .landing-card-note{display:none}.landing-white .landing-primary{font-size:11px}}
|
|
@media(max-width:700px){.landing-white .landing-shell{display:flex;flex-direction:column;overflow:auto}.landing-white .landing-hero{height:660px;flex-shrink:0}.sample-explorer{height:820px;min-height:820px;border-left:0;border-top:1px solid #dce6f0}.landing-white .landing-cards{grid-template-columns:repeat(2,minmax(0,1fr))}.landing-white .landing-title{font-size:44px}.landing-white .landing-company-logos{display:block}}
|
|
|
|
.sample-explorer button{min-height:0;letter-spacing:normal;line-height:1.3}.sample-marker{width:26px!important;height:26px!important;min-width:0!important;min-height:0!important;line-height:22px!important;border-radius:50%!important;box-sizing:border-box;padding:0!important;display:block!important}.sample-map-modes button{min-height:23px}.sample-map-zoom button{min-height:27px}.sample-selection-info>span::after{content:" · 대표 교각"}
|
|
|
|
@media(max-width:700px){
|
|
.landing-white .landing-cards{grid-template-columns:1fr;gap:9px;translate:0 0;align-self:end}
|
|
.landing-white .landing-card{height:84px;min-height:84px;display:grid;grid-template-columns:minmax(0,1fr) auto;padding:10px 12px;animation:none;opacity:1}
|
|
.landing-white .landing-card>div:first-child{padding-left:44px;min-width:0}
|
|
.landing-white .landing-card h3{font-size:15px;white-space:normal}
|
|
.landing-white .landing-card-actions{display:block;margin:0}
|
|
.landing-white .landing-card-top{position:absolute;left:12px;top:50%;transform:translateY(-50%)}
|
|
.landing-white .landing-card .landing-primary{font-size:10px;padding:9px;white-space:nowrap;min-height:42px}
|
|
.landing-white .landing-hero{grid-template-rows:auto minmax(0,1fr) auto auto;padding-bottom:14px}
|
|
.landing-white .landing-brand-meta{margin-top:8px}.landing-white .landing-title-group{padding-top:0}
|
|
}
|
|
/* Integrated 3D / coordinate detail, preserving the three main panel sections. */
|
|
.sample-explorer{grid-template-rows:auto minmax(200px,1.4fr) minmax(100px,.8fr) 370px}
|
|
.sample-selection{display:flex;flex-direction:column;gap:5px;overflow:auto;overscroll-behavior:contain;scrollbar-width:thin;min-height:0;padding-top:9px}
|
|
.sample-selection>.sample-section-title{flex-shrink:0;margin:0;min-height:20px}
|
|
.sample-selection .sample-preview{height:126px;min-height:126px;aspect-ratio:auto;position:relative;display:block;flex-shrink:0;touch-action:none;cursor:grab}
|
|
.sample-preview canvas{width:100%;height:100%;display:block}
|
|
.sample-preview-note{position:absolute;bottom:3px;left:5px;right:5px;font-size:8px;color:#294c64;line-height:1.4;background:#ffffffd9;padding:2px 4px;border-radius:3px;pointer-events:none}
|
|
.sample-preview-tools{position:absolute;right:4px;top:4px;display:flex;gap:3px}.sample-preview-tools button{font-size:8px;padding:4px 5px;border:1px solid #ccdfed;border-radius:4px;background:#fffffff0;color:#315774;min-height:20px;cursor:pointer}.sample-preview-tools button:disabled{opacity:.45}
|
|
.sample-location{flex-shrink:0;padding:7px 8px;background:#f0f6fb;border:1px solid #dbe8f2;border-radius:8px;font-size:9px;color:#45637a;line-height:1.4}
|
|
.sample-location-heading{display:flex;align-items:center;justify-content:space-between;gap:3px}.sample-location-heading strong{font-size:10px;color:#234a68}.sample-locate{background:none;border:0;color:#087fcb;font-size:9px;padding:1px 0;cursor:pointer}
|
|
.sample-address{margin:3px 0;color:#698297}.sample-location dl{display:grid;grid-template-columns:46px minmax(0,1fr);gap:2px 3px;margin:0}.sample-location dt{color:#8095a6}.sample-location dd{margin:0;font-variant-numeric:tabular-nums;overflow-wrap:anywhere}.sample-coordinate-basis{display:block;margin-top:3px;font-size:8px;color:#8496a4}
|
|
.sample-selection .sample-selection-info{display:flex;gap:8px;align-items:center;justify-content:space-between;flex-shrink:0}.sample-selection .sample-selection-info h3{margin:0;font-size:13px}.sample-selection .sample-selection-info p{margin:0;font-size:9px}
|
|
.sample-selection .sample-load{position:sticky;bottom:0;margin:0;padding:10px;min-height:36px;flex-shrink:0;z-index:2;font-size:11px}.sample-explorer #landing-sample-status{margin:0;max-height:32px;flex-shrink:0}
|
|
.sample-preview.is-expanded{position:fixed!important;inset:8vh 8vw!important;width:84vw!important;height:84vh!important;min-height:0!important;z-index:10050;box-shadow:0 0 0 100vmax #18314966;border:1px solid #c0d8eb;border-radius:15px}
|
|
.sample-preview.is-expanded .sample-preview-tools button{font-size:12px;padding:8px 12px}.sample-preview.is-expanded .sample-preview-note{font-size:11px}
|
|
@media(max-height:850px){.sample-explorer{grid-template-rows:auto minmax(150px,1.3fr) minmax(85px,.8fr) 345px;gap:10px}.sample-selection .sample-preview{height:100px;min-height:100px}.sample-section-title{margin-bottom:5px}.sample-map-note{font-size:8px}.sample-row{padding:6px 8px}.sample-selection{gap:4px}.sample-selection .sample-load{min-height:34px;padding:8px}}
|
|
@media(max-width:700px){.sample-explorer{height:1000px;min-height:1000px;grid-template-rows:auto minmax(220px,1.4fr) minmax(130px,.8fr) 370px}.sample-selection .sample-preview{height:126px;min-height:126px}}
|
|
|
|
@media(min-width:701px) and (max-height:850px){.sample-explorer{grid-template-rows:auto minmax(215px,1.3fr) minmax(95px,.8fr) 320px}}
|
|
/* Three-column catalogue: three visible rows, remaining bridges scroll inside. */
|
|
.sample-list{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));grid-auto-rows:46px;gap:6px;align-content:start;max-height:150px;padding:0 2px 0 0}
|
|
.sample-row{display:grid;grid-template-columns:19px minmax(0,1fr);align-items:center;gap:5px;padding:5px;min-height:46px;border:1px solid #e0eaf2;background:#ffffffa6;border-radius:8px}
|
|
.sample-row-number{width:19px;height:23px;font-size:8px;border-radius:5px}.sample-row strong{font-size:10px;white-space:nowrap}.sample-row small{font-size:8px;white-space:nowrap;overflow:hidden;text-overflow:ellipsis;margin-top:3px}.sample-row-arrow{display:none}
|
|
.sample-explorer{grid-template-rows:auto minmax(200px,1fr) 180px 370px}
|
|
@media(min-width:701px) and (max-height:850px){.sample-explorer{grid-template-rows:auto minmax(145px,1fr) 180px 320px}.sample-row{padding:5px}.sample-section-title{margin-bottom:5px}}
|
|
@media(max-width:700px){.sample-explorer{grid-template-rows:auto minmax(220px,1fr) 180px 370px}}
|
|
/* Compact import cards: preserve clear actions while revealing the showcase caption. */
|
|
@media(min-width:701px){
|
|
.landing-white .landing-card{height:clamp(156px,15.6dvh,168px);padding:15px 20px;justify-content:space-between}
|
|
.landing-white .landing-card>div:first-child{display:grid;grid-template-columns:36px minmax(0,1fr);column-gap:12px;align-content:start}
|
|
.landing-white .landing-card-top{display:contents;margin:0}
|
|
.landing-white .landing-card-icon{grid-column:1;grid-row:1 / span 2;width:36px;height:36px}
|
|
.landing-white .landing-card-number{display:none}
|
|
.landing-white .landing-card-eyebrow{grid-column:2;grid-row:1;font-size:9px;line-height:12px;align-self:start}
|
|
.landing-white .landing-card h3{grid-column:2;grid-row:2;margin:2px 0 0;font-size:19px;line-height:23px}
|
|
.landing-white .landing-card p{grid-column:1 / -1;margin-top:8px;max-width:none;font-size:11px;line-height:1.45}
|
|
.landing-white .landing-card-actions{margin-top:8px;gap:8px;min-height:32px}
|
|
.landing-white .landing-card .landing-primary{min-height:32px;padding:7px 11px;font-size:11px}
|
|
.landing-white .landing-card-note{font-size:9px}
|
|
}
|
|
|
|
/* Raise the two import cards slightly; preserve their dimensions and actions. */
|
|
@media(min-width:701px){.landing-white .landing-cards{translate:0 calc(-6dvh - 18px)}}
|
|
@media(min-width:701px) and (max-height:850px){.landing-white .landing-cards{translate:0 calc(-3dvh - 18px)}}
|
|
|
|
/* Preview and catalogue exchange positions; each keeps its own row height. */
|
|
.sample-explorer{grid-template-rows:auto minmax(200px,1fr) 370px 180px}
|
|
.sample-selection{border-top:0;padding-top:0}
|
|
.sample-list-section{border-top:1px solid #dce6f0;padding-top:10px}
|
|
@media(min-width:701px) and (max-height:850px){.sample-explorer{grid-template-rows:auto minmax(145px,1fr) 320px 180px}}
|
|
@media(max-width:700px){.sample-explorer{grid-template-rows:auto minmax(220px,1fr) 370px 180px}}
|
|
|
|
/* Keep the selected project and load action below the catalogue. */
|
|
.sample-explorer{grid-template-rows:auto minmax(200px,1fr) 290px 260px}
|
|
.sample-list-section{grid-template-rows:auto minmax(0,1fr) auto;gap:7px}
|
|
.sample-project-action{min-width:0;padding-top:5px}
|
|
.sample-project-action .sample-selection-info{display:flex;gap:8px;align-items:center;justify-content:space-between}
|
|
.sample-project-action .sample-selection-info h3{margin:0;font-size:13px}
|
|
.sample-project-action .sample-selection-info p{margin:0;font-size:9px}
|
|
.sample-project-action .sample-load{margin-top:7px;min-height:36px;padding:10px}
|
|
@media(min-width:701px) and (max-height:850px){.sample-explorer{grid-template-rows:auto minmax(145px,1fr) 250px 250px}}
|
|
@media(max-width:700px){.sample-explorer{grid-template-rows:auto minmax(220px,1fr) 290px 260px}}
|
|
|
|
/* Let preview content set its height instead of reserving an empty strip. */
|
|
.sample-explorer{grid-template-rows:auto minmax(200px,1fr) auto 260px;gap:12px}
|
|
.sample-map-section{grid-template-rows:auto minmax(0,1fr)}
|
|
.sample-selection{overflow:visible;padding:0;gap:5px}
|
|
@media(min-width:701px) and (max-height:850px){.sample-explorer{grid-template-rows:auto minmax(145px,1fr) auto 250px;gap:10px}}
|
|
@media(max-width:700px){.sample-explorer{grid-template-rows:auto minmax(220px,1fr) auto 260px}}
|