:root{font-family:system-ui,-apple-system,"Noto Sans KR",sans-serif;color:#172748;background:#eef3ff}*{box-sizing:border-box}body{margin:0}.shell{width:min(100%,480px);height:100dvh;min-height:540px;margin:auto;background:#f8faff;display:flex;flex-direction:column;box-shadow:0 12px 50px #153b821c}.auth{min-height:100dvh;display:flex;align-items:center;justify-content:center;padding:26px;background:linear-gradient(157deg,#1957d8,#4d8eff 52%,#ebf3ff 52%)}.authCard{width:min(100%,420px);padding:28px 22px;border-radius:26px;background:white;box-shadow:0 20px 46px #071b6240}.brand{display:flex;align-items:center;gap:12px}.brand img{width:58px;height:58px;object-fit:cover;border-radius:16px}.brand strong{font-size:23px}.brand small{display:block;color:#6c7b9c}.auth h2{margin:32px 0 8px}.auth p{color:#70809c;font-size:13px;line-height:1.6}.field{width:100%;border:1px solid #dce5f6;border-radius:13px;padding:13px 15px;margin:7px 0;font:inherit;outline:none;background:#f9fbff}.field:focus{border-color:#2770ed;box-shadow:0 0 0 3px #347aff22}.button{border:0;border-radius:13px;background:linear-gradient(120deg,#3986ff,#1958dc);color:#fff;padding:12px 18px;font:inherit;font-weight:700;cursor:pointer;box-shadow:0 5px 12px #2365de28}.button:disabled{opacity:.5}.wide{width:100%;margin-top:16px}.muted{color:#7383a0}.link{border:0;background:none;color:#2567dc;cursor:pointer;font:inherit}.authSwitch{text-align:center;margin-top:20px;font-size:13px}.top{background:#fff;padding:calc(12px + env(safe-area-inset-top)) 17px 12px;border-bottom:1px solid #e6edfa;display:flex;align-items:center;gap:10px;min-height:72px}.top img{width:38px;height:38px;border-radius:11px}.topTitle{flex:1;min-width:0}.topTitle strong{display:block;font-size:17px;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}.topTitle small{color:#8090a7;font-size:11px}.iconBtn{border:0;background:#f0f5ff;color:#235ed2;border-radius:12px;padding:9px;min-width:38px;height:38px;cursor:pointer;font-size:17px}.content{flex:1;overflow:auto;padding:14px 14px 8px}.tabs{display:flex;background:#fff;border-top:1px solid #e4ebf8;padding:8px 4px calc(8px + env(safe-area-inset-bottom));gap:2px}.tab{flex:1;border:0;background:transparent;color:#8391ab;display:grid;place-items:center;gap:3px;padding:5px 0;font-size:10px;cursor:pointer}.tab b{font-size:20px}.tab.active{color:#2166e6}.notice{background:#e6eeff;border-radius:10px;padding:10px 12px;font-size:12px;color:#2452ad;margin-bottom:12px}.row{display:flex;align-items:center;gap:11px;background:white;padding:12px;border-radius:16px;margin-bottom:9px;border:1px solid #e7edf9;cursor:pointer}.avatar{width:42px;height:42px;display:grid;place-items:center;border-radius:50%;background:linear-gradient(140deg,#dfeaff,#9bbcff);color:#2257b8;font-weight:800;flex:none}.rowMain{flex:1;min-width:0}.rowMain strong{font-size:14px}.rowMain small{display:block;color:#8a98af;font-size:12px;margin-top:4px;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}.sectionTitle{font-size:13px;color:#627391;margin:9px 0 12px}.messages{display:flex;flex-direction:column;gap:12px}.msg{display:flex;gap:7px;max-width:92%;align-items:flex-end}.msg.mine{align-self:flex-end;flex-direction:row-reverse}.bubble{background:#fff;border:1px solid #e5eaf5;border-radius:6px 17px 17px 17px;padding:10px 12px;line-height:1.5;font-size:13px;overflow-wrap:anywhere;box-shadow:0 3px 9px #1e408209}.mine .bubble{background:linear-gradient(140deg,#428bff,#2769ec);color:white;border:0;border-radius:17px 6px 17px 17px}.bubble img{width:min(100%,240px);border-radius:8px;display:block;margin:4px 0;cursor:pointer}.bubble a{color:#125fdd}.mine .bubble a{color:#fff}.nick{color:#6681ae;font-size:11px;margin:0 0 3px 4px}.time{color:#94a1b7;font-size:9px;white-space:nowrap}.composer{background:white;border-top:1px solid #e7edf9;display:flex;gap:7px;padding:10px 10px calc(10px + env(safe-area-inset-bottom));align-items:end}.composer textarea{flex:1;min-width:0;max-height:100px;resize:none;margin:0}.composer .button{padding:12px}.card{background:white;border:1px solid #e7edf8;border-radius:16px;padding:16px;margin-bottom:12px}.card h3{margin:0 0 10px;font-size:15px}.card p{font-size:13px;line-height:1.6}.empty{text-align:center;color:#8998b2;margin:40px 10px;font-size:13px}.error{color:#d8344b;font-size:12px;min-height:18px}.menu{position:fixed;inset:0;background:#0d1b3566;display:grid;place-items:end center;padding:20px;z-index:10}.menuBody{width:min(100%,440px);background:white;border-radius:20px;padding:20px}.menuBody button{display:block;width:100%;text-align:left;background:none;border:0;border-bottom:1px solid #e8edf5;padding:14px;color:#253958;font:inherit}.menuBody button.danger{color:#d43248}.small{font-size:11px}.pill{background:#edf3ff;color:#2566d8;padding:5px 9px;border-radius:30px;font-size:11px}.adminRow{display:flex;justify-content:space-between;align-items:center;gap:8px;border-bottom:1px solid #edf0f8;padding:10px 0;font-size:12px}.adminRow button{font-size:11px;padding:7px}.authNote{font-size:11px;color:#8290a5;margin:9px 0 0}
html,body{width:100%;min-width:0;min-height:100%;overflow:hidden}
.shell{height:var(--app-height,100dvh);min-height:0;max-height:100dvh;width:min(100%,480px)}
.content{min-height:0;overscroll-behavior:contain}
.top,.composer,.tabs{flex-shrink:0}
.auth{height:var(--app-height,100dvh);min-height:0;overflow-y:auto;padding:max(12px,env(safe-area-inset-top)) 16px max(12px,env(safe-area-inset-bottom))}
.authCard{max-width:420px;margin:auto}
.menu{max-height:100dvh;overflow:auto;padding-bottom:max(16px,env(safe-area-inset-bottom))}
@media(max-width:360px){.top{padding-left:10px;padding-right:10px}.tab{font-size:9px}.tab b{font-size:18px}.tabs{padding-left:0;padding-right:0}.content{padding:10px 9px}.msg{max-width:98%}.bubble{padding:8px 10px}.authCard{padding:19px 16px}.auth h2{margin-top:20px}}
@media(max-height:620px){.top{padding-top:calc(7px + env(safe-area-inset-top));padding-bottom:7px;min-height:56px}.tabs{padding-top:3px}.tab{padding:2px 0}.tab b{font-size:17px}.composer{padding-top:6px}.authCard{padding-top:16px;padding-bottom:16px}.auth h2{margin-top:16px}}
/* 화면 폭·회전·분할 화면·접히는 기기의 보이는 영역에 맞춤 */
.shell{width:100%;max-width:480px;max-height:none;overflow:hidden}
.auth{width:100%;min-width:0}
.rowMain,.topTitle,.adminRow span{min-width:0;overflow-wrap:anywhere}
.card,.row,.notice{max-width:100%;overflow-wrap:anywhere}
.tabs{overflow-x:auto;scrollbar-width:none;touch-action:pan-x}.tabs::-webkit-scrollbar{display:none}
.tab{min-width:0;white-space:nowrap}
.composer textarea{min-width:0}
@media(min-width:700px){.shell{max-width:720px}.content{padding:20px 25px}.top{padding-left:25px;padding-right:25px}.composer{padding-left:20px;padding-right:20px}.authCard{max-width:460px}}
@media(orientation:landscape) and (max-height:500px){.top{min-height:44px;padding-top:5px;padding-bottom:5px}.top img{width:30px;height:30px}.tabs{padding-top:1px;padding-bottom:max(2px,env(safe-area-inset-bottom))}.tab{gap:0}.tab b{font-size:15px}.composer{padding-top:4px;padding-bottom:max(4px,env(safe-area-inset-bottom))}.content{padding-top:6px;padding-bottom:4px}.auth{align-items:flex-start}.authCard{padding:12px 18px}.auth h2{margin:10px 0 4px}.auth .field{margin:4px 0;padding:8px 11px}.auth .wide{margin-top:7px}}
@media(max-width:300px){.tab{font-size:8px}.tab b{font-size:15px}.content{padding-left:6px;padding-right:6px}.topTitle strong{font-size:14px}.composer{gap:4px;padding-left:5px;padding-right:5px}}
/* 포트폴리오 시안: 파란 로그인 카드와 간결한 흰 채팅 화면 */
.svgIcon{width:21px;height:21px;display:block;flex:none}
.auth{background:#fff;overflow-y:auto;padding:0;align-items:stretch;min-height:0}
.authCard{width:100%;max-width:480px;min-height:100%;margin:0 auto;padding:0;background:linear-gradient(155deg,#3f85f8,#1453d2);box-shadow:none;border-radius:0;display:flex;flex-direction:column;justify-content:center}
.authHero{display:flex;flex-direction:column;align-items:center;gap:6px;color:white;text-align:center;padding:20px 20px 10px}
.authHero img{width:100px;height:100px;border-radius:22px;object-fit:cover;box-shadow:0 8px 20px #0b399d55}
.authHero img{clip-path:inset(1px 2px 1px 2px round 22%)}
.authHero strong{font-size:22px;letter-spacing:-.02em}.authHero span{font-size:12px;line-height:1.5;opacity:.9}
.authPanel{background:#fff;margin:10px 12px 24px;border-radius:20px;padding:20px 16px;box-shadow:0 12px 30px #0b399d4d}
.authHeading{text-align:center}.authHeading h2{font-size:19px;margin:5px 0}.authHeading p{font-size:11px;margin:2px 0 16px}
.authPanel .field{background:#fff;border:1px solid #dce6fc;border-radius:8px;padding:12px;margin:5px 0;font-size:13px}
.authPanel .button{border-radius:9px;font-size:14px;padding:12px}
.authPanel .authSwitch{font-size:11px;margin-top:16px}.authPanel .adminLink{display:block;margin:9px auto 0;border:0;background:transparent;color:#7990b1;font-size:11px;padding:6px;cursor:pointer}
.authSignup .authPanel{padding-bottom:23px}
.shell{background:#fff}
.top{min-height:55px;background:#fff;padding:calc(7px + env(safe-area-inset-top)) 11px 7px;border-bottom:1px solid #e6edf9;gap:8px}
.top img{display:none}.topTitle strong{font-size:15px;font-weight:750;color:#15284b}.topTitle small{display:flex;align-items:center;gap:4px;font-size:10px}.topTitle small .svgIcon{width:12px;height:12px}.onlineDot{color:#3373e9!important}
.headerControl{height:32px;min-width:32px;display:grid;place-items:center;border:0;background:transparent;color:#183d80;border-radius:8px;cursor:pointer}.headerControl .svgIcon{width:18px;height:18px}
.content{background:#fff;padding:9px 10px}.notice{background:#e8efff;color:#1d57bd;border-radius:8px;padding:7px 9px;font-size:11px}
.row{box-shadow:none;border:0;border-bottom:1px solid #eef1f8;border-radius:0;margin:0;padding:12px 7px}.row .avatar{width:36px;height:36px}.sectionTitle{font-size:11px;margin:10px 8px}
.empty{margin:25px 10px;color:#8e9eb8;font-size:12px}.messages{gap:9px}.bubble{font-size:12px;box-shadow:none}.nick{font-size:10px}
.composer{padding:7px 9px calc(7px + env(safe-area-inset-bottom));gap:7px;border-top:1px solid #e9eff9}
.composer .field{font-size:12px;padding:9px 11px;min-height:36px;border-radius:10px;background:#f8faff}
.attachBtn{width:33px;height:33px;display:grid;place-items:center;border-radius:50%;background:#eff4ff;color:#2866d7;cursor:pointer}.attachBtn .svgIcon{width:18px;height:18px}
.sendBtn{width:33px;height:33px;border:0;border-radius:50%;background:#276aec;color:white;display:grid;place-items:center;cursor:pointer}.sendBtn .svgIcon{width:17px;height:17px}
.tabs{gap:0;padding:5px 2px calc(5px + env(safe-area-inset-bottom));box-shadow:0 -3px 13px #12397008}
.tab{gap:2px;font-size:9px;min-width:0;padding:4px 0}.tab .svgIcon{width:19px;height:19px}.tab.active{color:#2366ea}
.card{border-radius:12px;padding:13px}.card h3{font-size:13px}.card p{font-size:12px}
@media(max-height:570px){.authCard{justify-content:flex-start}.authHero{padding:8px 12px 2px}.authHero img{width:56px;height:56px}.authPanel{margin-top:3px;padding:11px 15px}.authHeading p{margin-bottom:7px}}
@media(min-width:700px){.authCard{max-width:480px}.shell{max-width:720px}}
.drawerOverlay{position:fixed;inset:0;background:#10244c77;z-index:25;display:flex;align-items:stretch}.drawer{width:min(78vw,290px);background:#fff;padding:calc(20px + env(safe-area-inset-top)) 12px 12px;box-shadow:5px 0 25px #091a4240;overflow-y:auto}.drawerLogo{display:flex;align-items:center;gap:11px;padding:0 9px 18px;border-bottom:1px solid #e9edf6;margin-bottom:8px}.drawerLogo img{width:44px;height:44px;border-radius:12px}.drawerLogo strong{font-size:17px}.drawerLogo small{font-size:11px;color:#6e84ad}.drawerItem{width:100%;display:flex;align-items:center;gap:15px;padding:13px 14px;border:0;border-radius:9px;background:transparent;color:#243b62;font:inherit;text-align:left;font-size:13px;cursor:pointer}.drawerItem:active{background:#eaf1ff;color:#2869db}
.reportCard{padding:12px 0;border-bottom:1px solid #e8edf8;overflow-wrap:anywhere}.reportCard:last-child{border-bottom:0}.reportHead{display:flex;align-items:center;justify-content:space-between;gap:7px;font-size:12px}.reportHead strong{min-width:0}.reportReason{margin:9px 0 5px;font-size:12px;line-height:1.45}.reportQuote{background:#f4f7ff;padding:9px;border-left:3px solid #5f90f4;color:#4a5d82;border-radius:4px;max-height:120px;overflow:auto}.reportActions{display:flex;flex-wrap:wrap;gap:5px;margin-top:10px}.reportActions .button,.reportActions .quietButton{font-size:10px;padding:8px 9px;border-radius:8px}.reportActions .dangerButton{background:#db4159}.quietButton{background:#eff3fa;border:0;color:#415575;cursor:pointer}.pill.pending{background:#fff1d8;color:#97600c}
/* 계정 제한: 포트폴리오의 방패·사유·문의 카드 */
.restrictedShell{min-height:var(--app-height,100dvh);height:var(--app-height,100dvh);display:flex;justify-content:center;align-items:flex-start;overflow-y:auto;background:linear-gradient(180deg,#fff,#f4f7ff);padding:calc(15px + env(safe-area-inset-top)) 14px calc(18px + env(safe-area-inset-bottom))}.restrictionCard{width:min(100%,450px);padding:20px 15px 25px;border:1px solid #dce6fa;border-radius:21px;background:white;box-shadow:0 12px 30px #213a7315;text-align:center}.restrictionCard h3{font-size:15px;margin:1px 0 13px}.lockShield{width:82px;margin:0 auto 14px;filter:drop-shadow(0 7px 8px #1956bc40)}.lockShield svg{display:block;width:100%}.restrictionTitle{color:#1c48a6;font-size:16px}.restrictionSummary{font-size:11px;color:#73839f;line-height:1.6;margin:8px 0 18px}.restrictionDetails{text-align:left;background:#fff8f9;border-radius:13px;padding:15px 14px;margin-bottom:15px}.restrictionDetails strong{font-size:12px;color:#214778}.restrictionDetails strong:first-child{color:#b13e4e}.restrictionDetails p{color:#63718e;line-height:1.5;font-size:11px;margin:7px 0 14px}.restrictionDetails hr{border:0;border-top:1px solid #e9e7ef;margin:15px 0}.restrictionDetails .field{min-height:78px;background:white;margin-top:10px}.restrictionDetails .button{font-size:12px;margin-top:5px}.restrictedLogout{width:100%;border:0;border-radius:10px;background:#f0f3fc;color:#344766;padding:13px;cursor:pointer;font-size:12px}.appealHistory{background:#f6f9ff;text-align:left;padding:12px;margin:10px 0;border-radius:10px;font-size:11px;overflow-wrap:anywhere}.appealHistory p{line-height:1.5}.durationOptions{display:flex;gap:8px;margin:10px 0}.durationOptions label{flex:1;display:flex;align-items:center;gap:6px;background:#f2f6ff;border:1px solid #dce7fb;padding:10px 8px;border-radius:10px;font-size:12px;cursor:pointer}.menuBody label{font-size:12px}.menuBody textarea{min-height:90px;resize:vertical}.dangerText{color:#b73d4b}
.previewBadge{background:#e9f1ff;color:#225cbe;border-radius:8px;padding:8px;margin:0 0 12px;font-size:11px}.previewButton{opacity:.8;text-align:center;cursor:default}.card #blockPreviewButton{margin-bottom:11px}
.linkPreview{display:flex;align-items:center;gap:9px;min-width:160px;max-width:270px;margin-top:8px;padding:8px;background:#f7f9ff;color:#203b72!important;border:1px solid #cadcff;border-radius:9px;text-decoration:none!important;box-shadow:0 2px 8px #2b59a512}.linkPreview:focus-visible{outline:3px solid #79a8ff}.previewSymbol{width:30px;height:30px;flex:none;display:grid;place-items:center;border-radius:8px;background:#1d62dd;color:#fff;font-size:18px}.previewTexts{min-width:0;flex:1;line-height:1.35}.previewTexts strong{display:block;color:#17386e;font-size:11px;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}.previewTexts small{display:block;color:#7588aa;font-size:10px;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}.previewArrow{color:#4770b3;font-size:21px}.mine .linkPreview{background:#fff;color:#183976!important;border-color:#cbdaf5}
/* 회원가입: 메일 인증 안내 시안 */
.authSignup{background:#fff}
.authSignup .authCard{background:white;justify-content:flex-start;min-height:100%;max-width:480px;color:#172748}
.signupTop{height:55px;display:flex;align-items:center;justify-content:center;position:relative;font-size:16px;color:#172748;padding-top:env(safe-area-inset-top)}
.signupTop button{position:absolute;left:16px;top:calc(10px + env(safe-area-inset-top));border:0;background:transparent;font-size:23px;color:#293f60;cursor:pointer}
.signupIllustration{margin:22px auto 2px;width:min(48vw,192px);height:146px;display:grid;place-items:center}.signupIllustration svg{width:100%;height:100%}
.authSignup .authPanel{margin:0 12px 12px;padding:8px 12px 18px;box-shadow:none;border:0;border-radius:0;flex:1}
.authSignup .authHeading h2{font-size:17px;color:#214678;margin:7px 0 8px}.authSignup .authHeading p{margin:0 0 17px;color:#72819c;line-height:1.65}
.authSignup .authPanel .field{margin:6px 0;padding:13px 12px}.authSignup .authPanel .button{margin-top:17px}
.authSignup .authPanel .authSwitch{margin-top:26px}
@media(max-height:650px){.signupIllustration{height:92px;margin:2px auto}.authSignup .authHeading p{margin-bottom:6px}.authSignup .authPanel .field{padding:9px;margin:3px 0}.authSignup .authPanel .authSwitch{margin-top:9px}}
/* 앱 내 사진 확대 */
.imageViewer{position:fixed;inset:0;z-index:100;background:#060913;display:flex;align-items:center;justify-content:center;touch-action:pinch-zoom;overflow:auto}
.imageViewer img{max-width:100%;max-height:calc(100dvh - 105px);object-fit:contain;touch-action:pinch-zoom}
.imageViewerTop{position:absolute;top:0;left:0;right:0;z-index:2;background:#080d1bf0;color:white;display:flex;align-items:center;justify-content:space-between;padding:calc(10px + env(safe-area-inset-top)) 14px 11px;font-size:13px}
.imageViewerTop button,.imageViewerTop a{background:transparent;border:0;color:white;font-size:17px;text-decoration:none;cursor:pointer}.imageViewerTop a{font-size:13px}
.imageViewerHint{position:absolute;bottom:calc(16px + env(safe-area-inset-bottom));color:#cad4e9;font-size:11px;pointer-events:none}
.imageViewer .viewerZoom{display:flex;gap:9px}.imageViewer .viewerZoom button{min-width:30px;font-size:23px;line-height:1}
.imageViewer img{transition:transform .15s ease;transform-origin:center center}