/* ===================================================================== 팀플리 — UI 레이어 / 디자인 (Layer 1) 기존 다크 디자인 유지 + 화이트(라이트) 테마. 테마는 로 전환. ===================================================================== */ :root{ /* --- 다크 (기본) --- */ --bg:#0f1115; --surface:#181b22; --surface2:#20242e; --line:#2b3040; --text:#eef1f7; --muted:#9aa3b5; --muted2:#6b7488; --brand:#5b8cff; --brand-d:#3f6ee0; --accent:#7c5cff; --good:#37d39b; --warn:#ffb020; --bad:#ff5d6c; --fire:#ff7a3d; --ring-bg:#262b38; --bar:rgba(15,17,21,.86); --bar2:rgba(20,23,30,.94); --shadow:0 8px 30px rgba(0,0,0,.35); --r:16px; color-scheme:dark; } :root[data-theme="light"]{ --bg:#f4f6fb; --surface:#ffffff; --surface2:#eef1f7; --line:#dde3ee; --text:#1a1f2b; --muted:#5b6478; --muted2:#98a1b3; --ring-bg:#e5e9f2; --bar:rgba(255,255,255,.86); --bar2:rgba(255,255,255,.94); --shadow:0 8px 30px rgba(20,30,60,.10); color-scheme:light; } *{box-sizing:border-box;-webkit-tap-highlight-color:transparent} html,body{margin:0;padding:0} body{ font-family:-apple-system,BlinkMacSystemFont,"Segoe UI",Roboto,"Apple SD Gothic Neo","Malgun Gothic",sans-serif; background:var(--bg); color:var(--text); line-height:1.5; -webkit-font-smoothing:antialiased; overscroll-behavior-y:none; transition:background .25s, color .25s; } #app{max-width:480px; margin:0 auto; min-height:100vh; position:relative; padding-bottom:82px; background:var(--bg)} button{font-family:inherit; cursor:pointer; border:none; color:inherit} input,select,textarea{font-family:inherit; font-size:15px} .hidden{display:none!important} .btn{background:var(--brand); color:#fff; border-radius:12px; padding:13px 16px; font-weight:700; font-size:15px; width:100%; transition:filter .15s, transform .05s} .btn:active{transform:scale(.98)} .btn:hover{filter:brightness(1.06)} .btn.sec{background:var(--surface2); color:var(--text); border:1px solid var(--line)} .btn.ghost{background:transparent; color:var(--muted); border:1px solid var(--line)} .btn.sm{width:auto; padding:9px 14px; font-size:13px; border-radius:10px} .btn.danger{background:transparent;color:var(--bad);border:1px solid rgba(255,93,108,.35)} .field{width:100%; background:var(--surface2); border:1px solid var(--line); color:var(--text); border-radius:12px; padding:13px 14px; margin:6px 0; outline:none} .field:focus{border-color:var(--brand)} label.lbl{font-size:12.5px; color:var(--muted); font-weight:600; margin-top:10px; display:block} .chip{display:inline-flex; align-items:center; gap:5px; background:var(--surface2); border:1px solid var(--line); border-radius:999px; padding:5px 11px; font-size:12.5px; color:var(--muted); font-weight:600} .pill{border-radius:999px; padding:3px 9px; font-size:11px; font-weight:800; letter-spacing:.2px} .card{background:var(--surface); border:1px solid var(--line); border-radius:var(--r); padding:16px; box-shadow:var(--shadow)} .muted{color:var(--muted)} .mut2{color:var(--muted2)} .row{display:flex; align-items:center; gap:10px} .between{display:flex; align-items:center; justify-content:space-between; gap:10px} h1,h2,h3{margin:0} .fadein{animation:fade .28s ease both} @keyframes fade{from{opacity:0; transform:translateY(6px)} to{opacity:1; transform:none}} /* top bar */ .topbar{position:sticky; top:0; z-index:20; background:var(--bar); backdrop-filter:blur(12px); border-bottom:1px solid var(--line); padding:14px 18px; display:flex; align-items:center; justify-content:space-between; gap:10px} .logo{font-weight:900; font-size:19px; letter-spacing:-.5px; display:flex; align-items:center; gap:8px} .logo .dot{width:12px;height:12px;border-radius:4px;background:linear-gradient(135deg,var(--brand),var(--accent))} .topbar .right{display:flex; align-items:center; gap:8px} .teamsel{display:flex; align-items:center; gap:6px; background:var(--surface2); border:1px solid var(--line); border-radius:10px; padding:6px 10px; font-size:13px; font-weight:700; max-width:150px} .teamsel span{overflow:hidden; text-overflow:ellipsis; white-space:nowrap} .icobtn{width:36px;height:36px;border-radius:10px;background:var(--surface2);border:1px solid var(--line);display:grid;place-items:center;color:var(--muted)} .icobtn svg{width:18px;height:18px;stroke:currentColor;fill:none;stroke-width:2;stroke-linecap:round;stroke-linejoin:round} /* bottom nav */ .nav{position:fixed; bottom:0; left:50%; transform:translateX(-50%); width:100%; max-width:480px; background:var(--bar2); backdrop-filter:blur(14px); border-top:1px solid var(--line); display:flex; z-index:30} .nav button{flex:1; background:none; padding:9px 0 calc(9px + env(safe-area-inset-bottom)); display:flex; flex-direction:column; align-items:center; gap:3px; color:var(--muted2); font-size:10.5px; font-weight:700} .nav button.on{color:var(--brand)} .nav .ic{width:24px; height:24px; display:grid; place-items:center} .nav svg{width:23px; height:23px; stroke:currentColor; fill:none; stroke-width:2; stroke-linecap:round; stroke-linejoin:round} .screen{padding:16px 18px} /* login */ .login{min-height:100vh; display:flex; flex-direction:column; justify-content:center; padding:32px 26px; gap:8px} .hero-badge{width:74px;height:74px;border-radius:22px;background:linear-gradient(135deg,var(--brand),var(--accent));display:grid;place-items:center;font-size:38px;box-shadow:0 12px 40px rgba(91,140,255,.45); margin-bottom:8px} .gbtn{background:#fff;color:#1f2430;border-radius:12px;padding:13px;font-weight:700;display:flex;align-items:center;justify-content:center;gap:10px;width:100%;font-size:15px;border:1px solid #e2e6ee} .gbtn:hover{filter:brightness(.97)} .divider{display:flex;align-items:center;gap:10px;color:var(--muted2);font-size:12px;margin:16px 0} .divider::before,.divider::after{content:"";flex:1;height:1px;background:var(--line)} .linkbtn{background:none;color:var(--brand);font-weight:700;font-size:13.5px;width:auto;padding:6px} /* 동의 체크박스 */ .ck{display:flex;align-items:center;gap:9px;font-size:13px;color:var(--text);padding:5px 0;cursor:pointer} .ck input[type=checkbox]{width:18px;height:18px;accent-color:var(--brand);flex:none} .ck span{font-weight:600} /* 하단 푸터(법률 링크) */ .foot{text-align:center;padding:22px 12px 8px;color:var(--muted2);font-size:11.5px;line-height:1.9} .foot .linkbtn{font-size:11.5px;padding:2px 3px} /* progress ring */ .ring{transform:rotate(-90deg)} .ring .bg{stroke:var(--ring-bg)} .ring .fg{stroke:url(#grad); stroke-linecap:round; transition:stroke-dashoffset .6s cubic-bezier(.4,0,.2,1)} .ringwrap{position:relative; display:grid; place-items:center} .ringwrap .num{position:absolute; text-align:center} .ringwrap .num b{font-size:26px; font-weight:900} .ringwrap .num small{display:block; font-size:11px; color:var(--muted); margin-top:-2px} /* task */ .task{display:flex; align-items:flex-start; gap:12px; padding:13px; border:1px solid var(--line); border-radius:14px; background:var(--surface); margin-bottom:9px} .task.done{opacity:.55} .check{flex:none; width:24px;height:24px;border-radius:8px;border:2px solid var(--line); display:grid;place-items:center; margin-top:1px; transition:.15s; background:transparent} .check.on{background:var(--good); border-color:var(--good)} .check.off{opacity:.35} .check:disabled{cursor:not-allowed} .check svg{width:14px;height:14px;stroke:#fff;stroke-width:3.5;fill:none;stroke-linecap:round;stroke-linejoin:round; opacity:0} .check.on svg{opacity:1} .task .body{flex:1; min-width:0} .task .title{font-weight:600; font-size:15px; word-break:break-word} .task.done .title{text-decoration:line-through} .task .meta{display:flex; gap:6px; flex-wrap:wrap; margin-top:6px} .avatar{width:26px;height:26px;border-radius:50%;display:grid;place-items:center;font-size:12px;font-weight:800;color:#fff;flex:none} /* member bar */ .mbar{margin:12px 0} .mbar .track{height:12px;border-radius:8px;background:var(--ring-bg);overflow:hidden} .mbar .fill{height:100%;border-radius:8px;transition:width .6s cubic-bezier(.4,0,.2,1)} /* calendar */ .cal{display:grid;grid-template-columns:repeat(7,1fr);gap:4px} .cal .dow{text-align:center;font-size:11px;color:var(--muted2);font-weight:700;padding:4px 0} .cal .cell{aspect-ratio:1/1;border-radius:10px;background:var(--surface2);border:1px solid transparent;display:flex;flex-direction:column;align-items:center;justify-content:flex-start;padding-top:5px;font-size:12.5px;font-weight:600;position:relative;cursor:pointer} .cal .cell.empty{background:transparent;cursor:default} .cal .cell.today{border-color:var(--brand)} .cal .cell.sel{background:var(--brand);color:#fff} .cal .cell .dots{display:flex;gap:2px;position:absolute;bottom:6px} .cal .cell .d{width:5px;height:5px;border-radius:50%} /* eval slider */ .evalrow{margin:14px 0} .evalrow input[type=range]{width:100%;accent-color:var(--brand);margin-top:6px} .ptbadge{background:var(--surface2);border:1px solid var(--line);border-radius:8px;padding:2px 10px;font-weight:800;font-size:14px;min-width:52px;text-align:center} /* 점수 스텝퍼 (+/- + 숫자입력) */ .stepbtn{width:34px;height:34px;border-radius:10px;background:var(--surface2);border:1px solid var(--line);color:var(--text);font-size:19px;font-weight:800;line-height:1;display:grid;place-items:center} .stepbtn:active{transform:scale(.95)} .numin{width:58px;height:34px;text-align:center;font-weight:800;font-size:16px;background:var(--surface2);border:1px solid var(--line);border-radius:10px;color:var(--text);outline:none;-moz-appearance:textfield} .numin:focus{border-color:var(--brand)} .numin::-webkit-outer-spin-button,.numin::-webkit-inner-spin-button{-webkit-appearance:none;margin:0} /* modal / sheet */ .sheet-bg{position:fixed;inset:0;background:rgba(0,0,0,.55);z-index:50;display:flex;align-items:flex-end;justify-content:center;animation:fade .2s} .sheet{width:100%;max-width:480px;background:var(--surface);border-radius:22px 22px 0 0;border-top:1px solid var(--line);padding:20px 20px calc(24px + env(safe-area-inset-bottom));animation:up .28s cubic-bezier(.2,.7,.2,1)} @keyframes up{from{transform:translateY(100%)} to{transform:none}} .grab{width:38px;height:4px;border-radius:3px;background:var(--line);margin:0 auto 14px} .toast{position:fixed;bottom:96px;left:50%;transform:translateX(-50%);background:var(--surface2);border:1px solid var(--line);color:var(--text);padding:11px 18px;border-radius:12px;font-size:13.5px;font-weight:600;z-index:80;box-shadow:var(--shadow);animation:fade .2s} .empty{text-align:center;color:var(--muted2);padding:40px 20px;font-size:14px} .empty .big{font-size:40px;margin-bottom:8px} .seg{display:flex;background:var(--surface2);border:1px solid var(--line);border-radius:12px;padding:4px;gap:4px;margin-bottom:14px} .seg button{flex:1;padding:8px;border-radius:9px;font-size:13px;font-weight:700;color:var(--muted);background:none} .seg button.on{background:var(--brand);color:#fff} code.inv{font-size:22px;font-weight:900;letter-spacing:4px;color:var(--brand)} .spin{width:34px;height:34px;border:3px solid var(--line);border-top-color:var(--brand);border-radius:50%;animation:rot .8s linear infinite;margin:0 auto} @keyframes rot{to{transform:rotate(360deg)}}