:root { --ink:#18323d; --muted:#64757c; --teal:#087d81; --teal-dark:#05676c; --mint:#d8f0e9; --paper:#f8f7f3; --line:#e5e6df; --coral:#de6654; }
* { box-sizing:border-box; }
body { margin:0; color:var(--ink); background:var(--paper); font-family:"DM Sans","Noto Sans KR",sans-serif; }
button,input,textarea { font:inherit; }
button { cursor:pointer; }
[hidden] { display:none !important; }
.page-shell { min-height:100vh; }
.login-layout { min-height:100vh; display:grid; grid-template-columns:minmax(360px, 1fr) minmax(400px, 1fr); }
.brand-panel { position:relative; overflow:hidden; padding:clamp(3rem,9vw,8rem); background:#e4f2eb; display:flex; flex-direction:column; justify-content:center; }
.brand-panel::before { content:""; position:absolute; width:38rem; height:38rem; border:1px solid #b3d8ce; border-radius:50%; right:-17rem; bottom:-15rem; }
.brand-panel h1 { position:relative; margin:.45rem 0 1.5rem; font-size:clamp(4.5rem,9vw,8.5rem); line-height:.78; letter-spacing:-.09em; }
.brand-panel h1 em { color:var(--teal); font-style:normal; }
.brand-panel > p:not(.eyebrow) { position:relative; margin:0; color:#4b6669; font-size:1.1rem; line-height:1.8; }
.eyebrow { margin:0; color:var(--teal); font-size:.68rem; font-weight:700; letter-spacing:.14em; }
.pin-illustration { position:absolute; right:13%; bottom:13%; width:82px; height:82px; border-radius:50% 50% 50% 0; background:var(--coral); transform:rotate(-45deg); box-shadow:0 14px 30px #a8cfc380; }
.pin-illustration span { display:block; width:27px; height:27px; margin:27px; background:#fff8; border-radius:50%; }
.login-card { width:min(100%, 430px); align-self:center; justify-self:center; padding:3rem; }
.card { background:#fff; border:1px solid #ebebe6; border-radius:18px; box-shadow:0 9px 30px #2a47450d; }
.login-card h2 { margin:.55rem 0 .7rem; font-size:2rem; letter-spacing:-.06em; line-height:1.25; }
.form-intro { color:var(--muted); font-size:.9rem; margin:0 0 2rem; line-height:1.6; }
label { display:block; margin:1rem 0; color:#40555b; font-size:.82rem; font-weight:600; }
input, textarea { display:block; width:100%; margin-top:.5rem; padding:.85rem .9rem; color:var(--ink); background:#fbfcfa; border:1px solid #dfe5df; border-radius:9px; outline:none; }
input:focus,textarea:focus { border-color:var(--teal); box-shadow:0 0 0 3px #087d8118; }
textarea { height:82px; resize:vertical; }
.primary-button { width:100%; margin-top:1.1rem; border:0; border-radius:9px; padding:1rem 1.2rem; color:white; background:var(--teal); font-weight:700; transition:.2s; }
.primary-button:hover { background:var(--teal-dark); transform:translateY(-1px); }.primary-button:disabled { cursor:wait; opacity:.65; transform:none; }
.primary-button span { float:right; font-size:1.2rem; }.primary-button .pin-icon { float:none; margin-right:.35rem; font-size:.75rem; color:#c0f0dd; }
.message { min-height:1.25rem; margin:.85rem 0 0; color:var(--teal); font-size:.82rem; }.message.error { color:#b54234; }
.topbar { max-width:1120px; margin:auto; min-height:80px; padding:0 1.5rem; display:flex; justify-content:space-between; align-items:center; }.wordmark { color:var(--ink); text-decoration:none; font-size:1.4rem; font-weight:700; letter-spacing:-.07em; }.wordmark strong { color:var(--teal); }
.profile { display:flex; gap:.65rem; align-items:center; font-size:.78rem; }.profile strong,.profile small { display:block; }.profile small { color:var(--muted); margin-top:.15rem; }.avatar { display:grid; place-items:center; width:34px; height:34px; border-radius:50%; background:var(--mint); color:var(--teal-dark); font-weight:700; }.text-button,.refresh-button { border:0; color:var(--muted); background:none; font-size:.78rem; }.text-button { margin-left:.7rem; text-decoration:underline; }
.content { max-width:1120px; margin:auto; padding:3.2rem 1.5rem 5rem; }.hero { margin-bottom:3rem; }.hero h1 { margin:.6rem 0 1rem; font-size:clamp(2rem,4vw,3.35rem); letter-spacing:-.07em; line-height:1.2; }.hero > p:not(.eyebrow) { color:var(--muted); font-size:.92rem; }
.my-location-grid { display:grid; grid-template-columns:1.25fr .75fr; gap:1.25rem; }.share-card,.last-location { padding:1.8rem; }.section-heading { display:flex; align-items:start; justify-content:space-between; gap:1rem; }.section-heading h2 { margin:.35rem 0 0; font-size:1.4rem; letter-spacing:-.05em; }.privacy-badge { border-radius:99px; padding:.35rem .6rem; color:var(--teal-dark); background:var(--mint); font-size:.7rem; font-weight:700; }.share-card label { margin:1.55rem 0 .2rem; }.share-card label span { color:var(--muted); font-weight:400; }.empty-state { margin-top:1.6rem; color:var(--muted); font-size:.87rem; line-height:1.8; }.last-location h3 { margin:1.35rem 0 .35rem; font-size:1rem; line-height:1.5; }.last-location p { margin:.3rem 0; color:var(--muted); font-size:.8rem; }.note-text { padding-top:.55rem; }.map-link { display:inline-block; margin-top:1rem; color:var(--teal); font-size:.8rem; font-weight:700; }.delete-button { display:block; margin-top:1rem; padding:0; border:0; color:#b54234; background:none; font-size:.78rem; font-weight:700; text-decoration:underline; }.delete-button:disabled { cursor:wait; opacity:.65; }
.team-section { margin-top:4rem; }.refresh-button { color:var(--teal); font-weight:700; }.team-summary { margin:.8rem 0 1.2rem; color:var(--muted); font-size:.84rem; }.team-grid { display:grid; grid-template-columns:repeat(3,1fr); gap:1rem; }.member-card { padding:1.4rem; }.member-head { display:flex; align-items:center; gap:.7rem; }.member-card h3 { margin:0; font-size:1rem; }.member-card .email { margin:.18rem 0 1.3rem; color:var(--muted); font-size:.72rem; overflow-wrap:anywhere; }.location-name { min-height:2.7rem; margin:0; font-size:.86rem; font-weight:600; line-height:1.55; }.member-card .meta { margin:.65rem 0; color:var(--muted); font-size:.73rem; }.member-card .card-note { min-height:2.3rem; color:#52666b; font-size:.78rem; line-height:1.5; }.map-button { display:inline-block; margin-top:.8rem; padding:.5rem .7rem; border:1px solid #b8d8d2; border-radius:7px; color:var(--teal-dark); text-decoration:none; font-size:.74rem; font-weight:700; }.empty-team { padding:2.5rem; border:1px dashed #cbd6ce; border-radius:14px; color:var(--muted); text-align:center; font-size:.9rem; }
@media (max-width:720px) { .login-layout { grid-template-columns:1fr; }.brand-panel { min-height:34vh; padding:3rem 2rem; }.brand-panel h1 { font-size:4.5rem; }.pin-illustration { right:15%; bottom:12%; width:56px; height:56px; }.pin-illustration span { width:18px; height:18px; margin:19px; }.login-card { width:calc(100% - 2.5rem); margin:2rem 1.25rem 3rem; padding:2rem; }.topbar { padding:0 1rem; }.profile small,.text-button { display:none; }.content { padding:2rem 1rem 3rem; }.my-location-grid,.team-grid { grid-template-columns:1fr; }.team-section { margin-top:3rem; } }