/* ============================================================
   SQUANN — 행동설계 커뮤니티 / 모바일 웹앱 시안
   ============================================================ */

:root{
  /* 참고2.png 실측 팔레트: 메인 민트 #17b1a9 · 베이스 화이트 · 쿨그레이 패널 */
  --bg:#fbfcfe;
  --bg-soft:#f1f5fa;
  --bg-sunk:#e8eef6;
  --line:#e7edf4;
  --line-strong:#d4dde8;
  --ink:#0b1424;
  --ink-2:#414c5c;
  --ink-3:#7c8898;
  --ink-4:#adb8c5;
  --accent:#0b1424;
  --brand:#17b1a9;
  --brand-ink:#0a7f79;
  --brand-soft:#e9f7f6;
  --blue:#3f63e0;
  --green:#17b1a9;
  --green-ink:#0a7f79;
  --green-soft:#e9f7f6;
  --red:#e2564d;
  --amber:#d9932f;
  --radius:16px;
  --radius-sm:12px;
  --radius-lg:22px;
  --shadow-s:0 1px 2px rgba(11,20,36,.05);
  --shadow-m:0 4px 18px rgba(11,20,36,.07);
  --shadow-l:0 12px 40px rgba(11,20,36,.14);
  --nav-h:64px;
  --safe-b:env(safe-area-inset-bottom, 0px);
}

*,*::before,*::after{box-sizing:border-box;-webkit-tap-highlight-color:transparent}
::selection{background:rgba(23,177,169,.24);color:var(--ink)}
html,body{margin:0;padding:0;height:100%}
body{
  font-family:'Pretendard','Pretendard Variable',-apple-system,BlinkMacSystemFont,
    'Apple SD Gothic Neo','Malgun Gothic',system-ui,sans-serif;
  background:#e6ecf3; color:var(--ink);
  -webkit-font-smoothing:antialiased; overscroll-behavior:none;
}
img{max-width:100%;display:block}
button,input,textarea,select{font:inherit;color:inherit}
button{cursor:pointer;border:0;background:none;padding:0}
a{color:inherit;text-decoration:none}
ul{margin:0;padding:0;list-style:none}

/* ---------- 디바이스 프레임 (데스크탑에서만) ---------- */
#device{
  position:relative; width:100%; max-width:430px; margin:0 auto;
  min-height:100dvh; background:var(--bg); overflow:hidden;
  display:flex; flex-direction:column;
}
@media (min-width:820px){
  /* ★ 예전에는 body 가 **가로** flex 였다. 그러면 #device 와 사업자정보 푸터가
     형제 flex 아이템이라 **나란히** 서서, PC 에서 푸터가 폰 화면 오른쪽에
     둥둥 떠 보였다 (2026-11-02 실측). 세로로 쌓아 폰 아래에 오게 한다. */
  body{display:flex;flex-direction:column;align-items:center;justify-content:center;
    min-height:100dvh;padding:24px 0 0;background:#dfe6ee}
  #device{height:920px;min-height:0;border-radius:44px;box-shadow:var(--shadow-l);
    border:10px solid #111;max-width:420px;flex:0 0 auto}
}

/* ---------- 화면 전환 ---------- */
#screens{flex:1;position:relative;overflow:hidden}
.screen{
  position:absolute;inset:0;display:flex;flex-direction:column;
  background:var(--bg);overflow:hidden;
}
.screen[hidden]{display:none}
.screen.anim{animation:slideIn .26s cubic-bezier(.32,.72,0,1)}
@keyframes slideIn{from{transform:translateX(16px);opacity:.4}to{transform:none;opacity:1}}
.scroll{flex:1;overflow-y:auto;-webkit-overflow-scrolling:touch;overscroll-behavior:contain}
.pad{padding:0 20px}
.pb-nav{padding-bottom:calc(var(--nav-h) + 26px + var(--safe-b))}
.pb-cta{padding-bottom:110px}

/* ---------- 헤더 ---------- */
/* 높이를 한 번에 줄였다 (2026-11-02 실기기 피드백 — 헤더가 너무 두꺼워
   본문 보이는 영역이 좁다). safe-area 위 여백 14→8, 아래 12→8,
   min-height 48→44, 아이콘 버튼 38→36. 탭 영역은 36px 로 남겨 둔다. */
.appbar{
  flex:0 0 auto;display:flex;align-items:center;gap:10px;
  padding:calc(env(safe-area-inset-top, 0px) + 8px) 16px 8px;
  min-height:44px;background:var(--bg);
}
.appbar h1{font-size:20px;font-weight:800;letter-spacing:-.6px;margin:0;flex:1}
.appbar h1.center{text-align:center;font-size:16.5px;font-weight:700}
.appbar .brand-logo{height:21px;width:auto;flex:1;object-fit:contain;object-position:left center;
  display:block;-webkit-user-select:none;user-select:none;-webkit-user-drag:none}
.appbar .icon-btn{width:36px;height:36px;display:grid;place-items:center;border-radius:12px}
.appbar .icon-btn:active{background:var(--brand-soft)}
.appbar .spacer{flex:1}
.appbar.bordered{border-bottom:1px solid var(--line)}
.dot-badge{position:relative}
.dot-badge::after{content:'';position:absolute;top:7px;right:8px;width:7px;height:7px;
  border-radius:50%;background:var(--red);border:2px solid var(--bg)}

/* ---------- 하단 네비 ---------- */
.tabbar{
  position:absolute;left:0;right:0;bottom:0;height:calc(var(--nav-h) + var(--safe-b));
  padding-bottom:var(--safe-b);
  background:rgba(251,252,254,.94);backdrop-filter:blur(14px);
  border-top:1px solid var(--line);display:flex;align-items:center;z-index:40;
}
.tabbar button{flex:1;display:flex;flex-direction:column;align-items:center;gap:3px;
  color:var(--ink-4);font-size:11px;font-weight:600;padding-top:2px}
.tabbar button.on{color:var(--brand-ink)}
/* 키보드가 올라오면 웹뷰 높이가 줄어 탭바가 키보드 위로 따라 올라온다.
   입력 중에는 감춘다 (ui.js 의 keyboardGuard 가 <html>.kb-open 을 붙인다). */
.kb-open .tabbar{display:none}
.kb-open .pb-nav{padding-bottom:26px}

/* ---------- 공통 컴포넌트 ---------- */
.btn{
  display:flex;align-items:center;justify-content:center;gap:8px;width:100%;
  height:54px;border-radius:14px;font-size:16px;font-weight:700;letter-spacing:-.3px;
  background:var(--brand);color:#fff;transition:opacity .15s,transform .1s;
}
.btn:active{transform:scale(.985);opacity:.9}
.btn.ghost{background:var(--bg);color:var(--ink);border:1px solid var(--line-strong)}
.btn.soft{background:var(--bg-soft);color:var(--ink)}
.btn.brand{background:var(--brand);color:#fff}
.btn.blue{background:var(--blue);color:#fff}
.btn.sm{height:42px;font-size:14px;border-radius:11px;width:auto;padding:0 16px}
.btn.xs{height:34px;font-size:13px;border-radius:9px;width:auto;padding:0 13px}
.btn[disabled]{opacity:.35;pointer-events:none}
.btn-row{display:flex;gap:10px}

.cta-fixed{
  position:absolute;left:0;right:0;bottom:0;padding:12px 20px calc(18px + var(--safe-b));
  background:linear-gradient(180deg,rgba(251,252,254,0),var(--bg) 26%);z-index:30;
}
.cta-fixed.with-nav{bottom:calc(var(--nav-h) + var(--safe-b))}

.card{background:var(--bg);border:1px solid var(--line);border-radius:var(--radius);padding:16px}
.card.flat{border:0;background:var(--bg-soft)}
.sec{margin-top:26px}
.sec-head{display:flex;align-items:center;justify-content:space-between;margin-bottom:12px}
.sec-head h2{font-size:17px;font-weight:800;letter-spacing:-.4px;margin:0}
.sec-head .more{font-size:13px;color:var(--brand-ink);font-weight:700;display:flex;align-items:center;
  gap:2px;height:32px;padding:0 12px;border-radius:999px;border:1px solid rgba(23,177,169,.34)}
.muted{color:var(--ink-3)}
.tiny{font-size:12px}
.small{font-size:13px}

.chip-row{display:flex;gap:7px;overflow-x:auto;padding:2px 20px 2px;margin:0 -20px;scrollbar-width:none}
.chip-row::-webkit-scrollbar{display:none}
.chip{
  flex:0 0 auto;height:34px;padding:0 15px;border-radius:999px;background:var(--bg-soft);
  color:var(--ink-2);font-size:13.5px;font-weight:600;display:flex;align-items:center;
  border:1px solid transparent;white-space:nowrap
}
.chip.on{background:var(--brand);color:#fff}

.search{
  display:flex;align-items:center;gap:10px;height:46px;padding:0 14px;
  background:var(--bg-soft);border-radius:13px;color:var(--ink-3);
  border:1px solid transparent;transition:border-color .15s,background .15s
}
.search:focus-within{background:var(--bg);border-color:var(--brand);
  box-shadow:0 0 0 3px rgba(23,177,169,.12)}
.search input{flex:1;border:0;background:none;outline:none;font-size:14.5px;color:var(--ink)}
.search input::placeholder{color:var(--ink-4)}

.field{margin-bottom:18px}
.field > label{display:block;font-size:14px;font-weight:700;margin-bottom:8px;letter-spacing:-.2px}
.field .hint{font-size:12.5px;color:var(--ink-3);margin:-4px 0 8px}
.input,.textarea,select.input{
  width:100%;border:1px solid var(--line-strong);background:var(--bg);border-radius:12px;
  padding:0 14px;height:50px;font-size:15px;outline:none;transition:border-color .15s;
}
.textarea{height:auto;padding:13px 14px;resize:none;line-height:1.5}
.input:focus,.textarea:focus{border-color:var(--brand);box-shadow:0 0 0 3px rgba(23,177,169,.14)}
.input::placeholder,.textarea::placeholder{color:var(--ink-4)}
.counter{text-align:right;font-size:11.5px;color:var(--ink-4);margin-top:5px}

.seg{display:flex;gap:7px;flex-wrap:wrap}
.seg button{
  height:40px;padding:0 15px;border-radius:11px;background:var(--bg);border:1px solid var(--line-strong);
  font-size:14px;font-weight:600;color:var(--ink-2)
}
.seg button.on{background:var(--brand);border-color:var(--brand);color:#fff}
.seg.grow button{flex:1}

.stepper{display:flex;align-items:center;justify-content:center;gap:0;
  border:1px solid var(--line-strong);border-radius:12px;overflow:hidden;height:50px}
.stepper button{width:52px;height:100%;display:grid;place-items:center;font-size:20px;color:var(--ink-2)}
.stepper button:active{background:var(--brand-soft)}
.stepper .val{flex:1;text-align:center;font-size:18px;font-weight:800}

.switch{width:50px;height:29px;border-radius:999px;background:var(--line-strong);position:relative;
  transition:background .2s;flex:0 0 auto}
.switch::after{content:'';position:absolute;top:3px;left:3px;width:23px;height:23px;border-radius:50%;
  background:#fff;box-shadow:0 1px 3px rgba(0,0,0,.25);transition:transform .2s}
.switch.on{background:var(--brand)}
.switch.on::after{transform:translateX(21px)}

.row{display:flex;align-items:center;gap:12px}
.row-between{display:flex;align-items:center;justify-content:space-between;gap:12px}
.list-row{display:flex;align-items:center;gap:12px;padding:15px 0;border-bottom:1px solid var(--line)}
.list-row:last-child{border-bottom:0}
.list-row .t{flex:1;min-width:0}
.list-row .t b{display:block;font-size:15px;font-weight:700;letter-spacing:-.3px}
.list-row .t span{display:block;font-size:12.5px;color:var(--ink-3);margin-top:3px}

.thumb{width:64px;height:64px;border-radius:12px;object-fit:cover;flex:0 0 auto;background:var(--bg-sunk)}
.thumb.lg{width:88px;height:66px;border-radius:12px}
.thumb.sq{width:52px;height:52px;border-radius:11px}
.avatar{width:34px;height:34px;border-radius:50%;object-fit:cover;background:var(--bg-sunk);flex:0 0 auto}
.avatar.lg{width:74px;height:74px}
.avatar.sm{width:26px;height:26px}
.stack{display:flex}
.stack img{width:26px;height:26px;border-radius:50%;border:2px solid var(--bg);margin-left:-9px;object-fit:cover}
.stack img:first-child{margin-left:0}

.tag{display:inline-flex;align-items:center;height:23px;padding:0 9px;border-radius:7px;
  font-size:11.5px;font-weight:700;background:var(--bg-soft);color:var(--ink-2)}
.tag.green{background:var(--green-soft);color:var(--green-ink)}
.tag.blue{background:#eaebfa;color:var(--blue)}
.tag.brand{background:var(--brand-soft);color:var(--brand-ink)}
.tag.red{background:#fdecea;color:var(--red)}
.tag.amber{background:#fdf3e3;color:#a9701a}

.bar{height:7px;border-radius:99px;background:var(--bg-sunk);overflow:hidden}
.bar i{display:block;height:100%;border-radius:99px;background:var(--brand);transition:width .5s}
.bar i.green{background:var(--green)}
.bar i.blue{background:var(--blue)}

.empty{text-align:center;padding:54px 24px;color:var(--ink-3)}
.empty b{display:block;font-size:15px;color:var(--ink-2);margin-bottom:6px}

/* ---------- 인트로 (비율참고.png 시안 이미지 그대로) ---------- */
#s-intro{background:#e9f5f2}
/* 배경 사진(여자 뒷모습)은 처음부터 그대로 깔려 있고 움직이지 않는다.
   intro-plate.jpg = 시안에서 글자만 지워낸 배경판 */
.intro-wrap{position:absolute;inset:0;overflow:hidden;container-type:size;
  background:url(../img/intro-plate.jpg) center/cover no-repeat}

/* 시안과 같은 비율(704x1520)의 무대를 '덮기(cover)' 크기로 잡는다.
   화면 비율이 달라져도 아래 좌표(%)가 시안 픽셀과 정확히 일치한다 */
.intro-stage{position:absolute;inset:0;margin:auto;
  width:max(100cqw, calc(100cqh * 704 / 1520));
  height:max(100cqh, calc(100cqw * 1520 / 704))}

/* 글자 레이어(투명 PNG)를 덩어리별로 잘라 제자리에 겹쳐 두고 위에서 떨어뜨린다.
   배경 사진은 전혀 건드리지 않고 글자만 움직인다.
   다 내려앉으면 배경판 + 글자 = 시안 원본과 같아진다 */
.intro-txt{position:absolute;inset:0;
  background:url(../img/intro-text.png?v=3) 0 0/100% 100% no-repeat;
  clip-path:inset(var(--c));
  animation:introTxt .62s cubic-bezier(.22,.72,.24,1) var(--d) both}
@keyframes introTxt{
  from{opacity:0;transform:translateY(var(--dy))}
  55%{opacity:1}
  to{opacity:1;transform:none}
}

/* 시안에 그려진 '시작하기' 버튼 자리 — 눌리는 영역만 투명하게 올린다 */
.intro-cta{position:absolute;left:25.1%;right:24.4%;top:86.7%;height:5.8%;
  border-radius:999px;background:transparent}
.intro-cta:active{background:rgba(15,43,38,.12)}

/* ---------- 환영 화면 (가입 직후) ----------
   인트로와 같은 사진 위에 글귀만 얹는다.
   아래쪽 '시작하기' 버튼은 사진에 그려져 있고, 같은 자리(.intro-cta)를 눌러 들어간다.
   top 값이 글귀 전체의 높이를 정한다 — 더 내리거나 올릴 때는 이 값만 만지면 된다. */
.welcome-hero{position:absolute;left:0;right:0;top:30%;z-index:2;
  padding:0 24px;text-align:center;color:var(--ink)}
.wh-brand{font-size:13px;letter-spacing:5px;color:var(--brand);font-weight:700}
.wh-face{width:118px;height:118px;margin:30px auto;border-radius:50%;
  background:linear-gradient(180deg,#fff,#e4f4f2);display:grid;place-items:center;
  font-size:44px;box-shadow:0 18px 44px rgba(23,177,169,.24),0 0 0 8px rgba(255,255,255,.6)}
.wh-title{font-size:26px;font-weight:800;letter-spacing:-.8px;margin:0 0 12px}
.wh-lead{font-size:14.5px;color:var(--ink-2);line-height:1.65;margin:0}

/* 화면이 짧으면 글귀가 '시작하기' 버튼에 닿으므로 조금 올리고 줄인다 */
@media (max-height:720px){
  .welcome-hero{top:22%}
  .wh-face{width:92px;height:92px;margin:22px auto;font-size:36px}
  .wh-title{font-size:23px}
}

/* 컨테이너 단위(cqw/cqh) 미지원 브라우저 — 예전처럼 시안 한 장을 그대로 보여준다 */
@supports not (width:1cqw){
  .intro-wrap{background-image:url(../img/intro-full.jpg)}
  .intro-stage{width:100%;height:100%}
  .intro-txt{display:none}
}
/* 모션을 줄이도록 설정한 기기 — 글자를 움직이지 않고 바로 제자리에 둔다 */
@media (prefers-reduced-motion:reduce){
  .intro-txt{animation:none}
}

/* 인트로 → 로그인 전환 */
#s-intro{transition:opacity .4s ease,transform .4s ease}
#s-intro.intro-out{opacity:0;transform:scale(1.04)}
@keyframes fadeUp{from{opacity:0;transform:translateY(14px)}to{opacity:1;transform:none}}

/* ---------- 로그인 ---------- */
.auth{padding:8px 26px 30px}
.auth-logo{text-align:center;margin:26px 0 30px}
.auth-logo b{font-size:29px;font-weight:800;letter-spacing:2px}
.auth-logo span{display:block;font-size:13px;color:var(--ink-3);margin-top:8px}
.divider{display:flex;align-items:center;gap:12px;color:var(--ink-4);font-size:12.5px;margin:26px 0}
.divider::before,.divider::after{content:'';flex:1;height:1px;background:var(--line)}
.auth-lead{text-align:center;font-size:14.5px;line-height:1.7;color:var(--ink-2);margin:0 0 26px}
/* 소셜 로그인 — 카카오톡 · 구글 · Apple (아이디/비밀번호 가입 없음)
   애플 버튼은 브랜드 가이드를 따른다: 검정 배경 · 흰 로고와 글자 ·
   다른 소셜 버튼과 같은 크기. (Sign in with Apple HIG) */
.socials{display:flex;flex-direction:column;gap:11px}
.socials .sns{position:relative;width:100%;height:54px;border-radius:14px;
  display:flex;align-items:center;justify-content:center;
  font-size:15.5px;font-weight:700;letter-spacing:-.3px;border:1px solid var(--line)}
.socials .sns img{position:absolute;left:18px;width:24px;height:24px;object-fit:contain}
.socials .sns:active{filter:brightness(.96)}
.socials .kakao{background:#FEE500;border-color:#FEE500;color:#3c1e1e}
.socials .google{background:#fff;color:var(--ink)}
.socials .apple{background:#000;border-color:#000;color:#fff}
.socials .apple svg{position:absolute;left:18px;width:22px;height:22px}
.auth-terms{text-align:center;line-height:1.6;margin-top:16px}
.auth-terms b{font-weight:700;color:var(--ink-2);text-decoration:underline}
.check{display:flex;align-items:center;gap:9px;font-size:13.5px;color:var(--ink-2)}
.check i{width:19px;height:19px;border-radius:5px;border:1.5px solid var(--line-strong);
  display:grid;place-items:center;flex:0 0 auto}
.check.on i{background:var(--brand);border-color:var(--brand);color:#fff}

/* ---------- 행동방 (메인) ---------- */
.hero-card{
  position:relative;border-radius:var(--radius);overflow:hidden;height:172px;color:#fff;
  display:flex;flex-direction:column;justify-content:flex-end;padding:16px;
}
.hero-card .bgimg{position:absolute;inset:0;object-fit:cover;width:100%;height:100%}
.hero-card::after{content:'';position:absolute;inset:0;
  background:linear-gradient(180deg,rgba(0,0,0,.05) 25%,rgba(0,0,0,.78))}
.hero-card > *{position:relative;z-index:2}
.hero-card h3{margin:0;font-size:22px;font-weight:800;letter-spacing:-.6px;line-height:1.28}
.hero-card .meta{display:flex;align-items:center;justify-content:space-between;margin-top:12px;
  font-size:12.5px;color:rgba(255,255,255,.85)}

.room-card{display:flex;gap:13px;padding:14px 0;border-bottom:1px solid var(--line);align-items:center}
.room-card:last-child{border-bottom:0}
.room-card .info{flex:1;min-width:0}
.room-card .info b{display:block;font-size:15.5px;font-weight:700;letter-spacing:-.35px;line-height:1.35}
.room-card .info p{margin:4px 0 0;font-size:12.5px;color:var(--ink-3);line-height:1.45;
  overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.room-card .info .foot{display:flex;align-items:center;gap:7px;margin-top:8px}

.rooms-grid{display:grid;grid-template-columns:1fr 1fr;gap:12px}
.mini-card{border-radius:14px;overflow:hidden;background:var(--bg-soft);position:relative}
.mini-card img{height:104px;width:100%;object-fit:cover}
.mini-card .b{padding:11px 12px 13px}
.mini-card .b b{font-size:14px;font-weight:700;display:block;letter-spacing:-.3px;line-height:1.35}
.mini-card .b span{font-size:11.5px;color:var(--ink-3);display:block;margin-top:5px}

.hscroll{display:flex;gap:12px;overflow-x:auto;margin:0 -20px;padding:0 20px 4px;scrollbar-width:none}
.hscroll::-webkit-scrollbar{display:none}
.hscroll > *{flex:0 0 auto}

/* 행동 만들기 — 행동방 목록 맨 위 CTA */
.create-cta{
  display:flex;align-items:center;gap:13px;width:100%;text-align:left;
  padding:15px 16px;border-radius:var(--radius);margin-top:16px;
  background:var(--brand-soft);border:1px solid rgba(23,177,169,.16);
  transition:transform .1s,opacity .15s;
}
.create-cta:active{transform:scale(.99);opacity:.9}
.create-cta .plus{width:38px;height:38px;flex:0 0 auto;border-radius:12px;background:var(--bg);
  display:grid;place-items:center;color:var(--brand-ink);box-shadow:var(--shadow-s)}
.create-cta .t{flex:1;min-width:0}
.create-cta b{display:block;font-size:15.5px;color:var(--brand-ink);font-weight:800;letter-spacing:-.3px}
.create-cta i{display:block;font-style:normal;font-size:12.5px;color:var(--ink-3);margin-top:3px}
.create-cta > .icon{color:var(--brand-ink);flex:0 0 auto}
.create-cta.brag{background:var(--green-soft);border-color:rgba(23,177,169,.18)}
.create-cta.brag b,.create-cta.brag > .icon,.create-cta.brag .plus{color:var(--green-ink)}
.create-cta.brag i{color:#5f9a7d}

/* ---------- 방 상세 ---------- */
.room-hero{position:relative;height:250px;flex:0 0 auto}
.room-hero img{width:100%;height:100%;object-fit:cover}
.room-hero .grad{position:absolute;inset:0;
  background:linear-gradient(180deg,rgba(0,0,0,.45),rgba(0,0,0,0) 42%,rgba(0,0,0,.25))}
.room-hero .top{position:absolute;top:0;left:0;right:0;display:flex;align-items:center;
  padding:calc(env(safe-area-inset-top, 0px) + 10px) 12px 8px;color:#fff}
.room-hero .top .icon-btn{width:40px;height:40px;display:grid;place-items:center}
.room-hero .count{position:absolute;right:14px;bottom:14px;background:rgba(0,0,0,.4);
  color:#fff;font-size:11.5px;padding:4px 10px;border-radius:99px;backdrop-filter:blur(4px)}
.room-body{margin-top:-18px;background:var(--bg);border-radius:20px 20px 0 0;position:relative;z-index:2;
  padding:20px 20px 0}
.tabs{display:flex;border-bottom:1px solid var(--line);margin:20px -20px 0;padding:0 20px}
.tabs button{flex:1;height:46px;font-size:14.5px;font-weight:700;color:var(--ink-4);
  border-bottom:2px solid transparent;margin-bottom:-1px}
.tabs button.on{color:var(--ink);border-bottom-color:var(--ink)}

.stat-split{display:flex;background:var(--bg-soft);border-radius:14px;padding:15px 0;margin:16px 0}
.stat-split div{flex:1;text-align:center;position:relative}
.stat-split div+div::before{content:'';position:absolute;left:0;top:2px;bottom:2px;width:1px;background:var(--line-strong)}
.stat-split b{display:block;font-size:19px;font-weight:800;margin-top:4px}
.stat-split span{font-size:12px;color:var(--ink-3)}

.comment{display:flex;gap:11px;padding:15px 0;border-bottom:1px solid var(--line)}
.comment .c{flex:1;min-width:0}
.comment .c .h{display:flex;align-items:center;gap:7px}
.comment .c .h b{font-size:14px;font-weight:700}
.comment .c .h span{font-size:11.5px;color:var(--ink-4)}
/* 그 행동을 해 본 사람 — 닉네임과 시간 사이에 붙는다 */
.comment .c .h i.xp{font-style:normal;font-size:10.5px;font-weight:700;line-height:1;
  padding:3px 7px;border-radius:99px;white-space:nowrap;flex:0 0 auto;
  background:var(--brand-soft);color:var(--brand-ink)}
.comment .c .h i.xp.done{background:#eaebfa;color:var(--blue)}
.comment .c p{margin:6px 0 0;font-size:14px;line-height:1.5;color:var(--ink-2);white-space:pre-wrap}
.comment .c .acts{display:flex;gap:14px;margin-top:9px;font-size:12.5px;color:var(--ink-3)}
.comment .c .acts button{display:flex;align-items:center;gap:4px;color:inherit}
.comment .c img.photo{margin-top:10px;border-radius:12px;width:100%;max-height:220px;object-fit:cover}

.composer{
  display:flex;align-items:center;gap:9px;padding:10px 20px calc(12px + var(--safe-b));
  border-top:1px solid var(--line);background:var(--bg);
}
.composer input{flex:1;height:44px;border-radius:99px;border:0;background:var(--bg-soft);
  padding:0 16px;outline:none;font-size:14px}
.composer .send{width:40px;height:40px;border-radius:50%;background:var(--brand);color:#fff;display:grid;place-items:center}

/* ---------- 흔적방 ---------- */
.cal{background:var(--bg-soft);border-radius:var(--radius);padding:14px 12px 10px}
.cal-head{display:flex;align-items:center;justify-content:space-between;padding:0 6px 12px}
.cal-head b{font-size:16px;font-weight:800}
.cal-head button{width:32px;height:32px;display:grid;place-items:center;color:var(--ink-2)}
.cal-grid{display:grid;grid-template-columns:repeat(7,1fr);gap:2px}
.cal-grid .dow{text-align:center;font-size:11.5px;color:var(--ink-3);padding:4px 0 8px;font-weight:600}
.cal-cell{aspect-ratio:1/1.12;display:flex;flex-direction:column;align-items:center;justify-content:center;
  gap:3px;border-radius:10px;font-size:13px;position:relative}
.cal-cell.out{color:var(--ink-4);opacity:.5}
.cal-cell.today{background:var(--brand);color:#fff;font-weight:800}
.cal-cell .dots{display:flex;gap:2px;height:5px}
.cal-cell .dots i{width:4px;height:4px;border-radius:50%;background:var(--brand)}
.cal-cell.today .dots i{background:#fff}
.cal-cell img{position:absolute;inset:3px;width:calc(100% - 6px);height:calc(100% - 6px);
  object-fit:cover;border-radius:8px;opacity:.92}
.cal-cell.haspic{color:#fff;font-weight:700;text-shadow:0 1px 4px rgba(0,0,0,.6)}
.cal-cell.haspic span{position:relative;z-index:2}

.today-item{display:flex;gap:12px;align-items:flex-start;padding:16px 0;border-bottom:1px solid var(--line)}
.today-item .c{flex:1;min-width:0}
.today-item .c b{font-size:15.5px;font-weight:700;display:block;letter-spacing:-.3px}
.today-item .c span{font-size:12.5px;color:var(--ink-3);display:block;margin-top:4px}
.today-item .c .acts{display:flex;gap:8px;margin-top:11px}
.check-circle{width:30px;height:30px;border-radius:50%;border:1.6px solid var(--line-strong);
  display:grid;place-items:center;flex:0 0 auto;color:transparent;margin-top:16px}
.check-circle.done{background:var(--green);border-color:var(--green);color:#fff}

/* 타임라인 */
.tl{position:relative;padding-left:26px}
.tl::before{content:'';position:absolute;left:5px;top:8px;bottom:8px;width:1.5px;background:var(--line)}
.tl-item{position:relative;padding:0 0 22px}
.tl-item::before{content:'';position:absolute;left:-25px;top:5px;width:11px;height:11px;border-radius:50%;
  background:var(--bg);border:2px solid var(--line-strong)}
.tl-item.done::before{background:var(--brand);border-color:var(--brand)}
.tl-item.now::before{background:var(--green);border-color:var(--green);
  box-shadow:0 0 0 4px var(--green-soft)}
.tl-item .d{display:flex;align-items:center;gap:7px;font-size:13px;font-weight:700}
.tl-item .d em{font-style:normal;color:var(--ink-3);font-weight:600;font-size:12.5px}
.tl-item p{margin:5px 0 0;font-size:14px;color:var(--ink-2);line-height:1.5}
.tl-item .ph{display:flex;gap:6px;margin-top:9px}
.tl-item .ph img{width:64px;height:64px;border-radius:10px;object-fit:cover}

/* ---------- 경험일기장 ---------- */
/* 프로필 — 아바타 + 이름/소개 + 네트워크 3지표 한 줄 (참고6) */
.profile-head{display:flex;gap:10px;align-items:center;padding:10px 0 18px}
.profile-head .pf-me{flex:1;min-width:0;display:flex;align-items:center;gap:11px}
.profile-head .pf-me:active{opacity:.7}
.profile-head .avatar.lg{width:54px;height:54px}
.profile-head .n{flex:1;min-width:0}
.profile-head .n b{display:block;font-size:17px;font-weight:800;letter-spacing:-.5px;
  overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.profile-head .n p{margin:4px 0 0;font-size:11.5px;color:var(--ink-3);line-height:1.4;
  overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.pf-net{flex:0 0 156px;display:flex}
.pf-net > div{flex:1;min-width:0;position:relative;text-align:center}
.pf-net > div + div::before{content:'';position:absolute;left:0;top:3px;bottom:3px;
  width:1px;background:var(--line)}
.pf-net > div.lock{cursor:default}
.pf-net > div.open:active,.pf-net > div.lock:active{opacity:.6}
.pf-net .k{display:flex;align-items:center;justify-content:center;gap:2px;
  font-size:9.5px;font-weight:600;color:var(--ink-3);letter-spacing:-.3px;white-space:nowrap}
.pf-net .k .icon{width:9px;height:9px;opacity:.55}
/* 잠긴 지표는 숫자를 한 톤 흐리게 — 유료 전환 전이라는 신호 */
.pf-net > div.lock b{color:var(--ink-2);opacity:.72}
.pf-net > div.open b{color:var(--brand-ink)}
.pf-net b{display:block;margin-top:7px;font-size:21px;font-weight:800;letter-spacing:-.6px;
  color:var(--ink);line-height:1}
.stat3{display:flex;border:1px solid var(--line);border-radius:14px;padding:16px 0}
.stat3 div{flex:1;text-align:center;position:relative}
.stat3 div+div::before{content:'';position:absolute;left:0;top:0;bottom:0;width:1px;background:var(--line)}
.stat3 b{display:block;font-size:21px;font-weight:800;letter-spacing:-.5px}
.stat3 span{font-size:11.5px;color:var(--ink-3);display:block;margin-top:4px}

/* ---------- 경험일기장 · 편집본 (참고6) ---------- */
.story-hero{position:relative;border-radius:18px;overflow:hidden;aspect-ratio:3/2;
  min-height:232px;box-shadow:var(--shadow-m);background:var(--bg-sunk)}
.story-hero .sh-bg{position:absolute;inset:0;width:100%;height:100%;object-fit:cover}
.story-hero .sh-grad{position:absolute;inset:0;
  background:linear-gradient(100deg,rgba(8,17,30,.82) 0%,rgba(8,17,30,.42) 52%,rgba(8,17,30,.12) 100%)}
.story-hero .sh-body{position:absolute;left:20px;top:50%;transform:translateY(-50%);
  right:44%;color:#fff;z-index:2}
.story-hero h3{margin:0;font-size:23px;font-weight:800;letter-spacing:-.7px;line-height:1.24;
  display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical;overflow:hidden}
.story-hero .sh-sub{display:block;margin-top:7px;font-size:13px;font-weight:600;
  letter-spacing:1.2px;color:rgba(255,255,255,.9)}
.story-hero .sh-line{display:block;width:24px;height:2px;border-radius:2px;margin:10px 0;
  background:var(--brand)}
.story-hero .sh-cap{display:block;font-size:13.5px;font-weight:600;color:rgba(255,255,255,.92)}
.story-hero .sh-play{position:absolute;left:50%;top:50%;transform:translate(-50%,-50%);z-index:3;
  width:56px;height:56px;border-radius:50%;display:grid;place-items:center;
  background:rgba(255,255,255,.95);color:var(--brand-ink);box-shadow:0 6px 20px rgba(8,17,30,.35)}
.story-hero .sh-play .icon{width:24px;height:24px;margin-left:2px}
.story-hero .sh-badge{position:absolute;left:12px;bottom:10px;z-index:2;
  display:inline-flex;align-items:center;gap:4px;height:22px;padding:0 9px;border-radius:999px;
  background:rgba(255,255,255,.16);color:#fff;font-size:11px;font-weight:700;
  backdrop-filter:blur(6px)}
.story-hero .sh-badge.ok{background:var(--brand);box-shadow:0 2px 10px rgba(23,177,169,.4)}
.story-hero .sh-badge .icon{width:12px;height:12px}
.story-hero .sh-dur{position:absolute;right:14px;bottom:16px;z-index:2;
  height:24px;padding:0 9px;border-radius:7px;display:inline-flex;align-items:center;
  background:rgba(8,17,30,.62);color:#fff;font-size:11.5px;font-weight:700}

/* 나의 이야기가 여러 개면 옆으로 밀어 한 장씩 넘겨 본다 (인디케이터는 .hero-dots 재사용) */
.story-sec{position:relative}
.story-band{gap:12px;padding:0 20px;scroll-padding-left:20px}
.story-band > .story-hero{width:100%;flex:0 0 auto;scroll-snap-align:start}
.story-dots{bottom:16px}

.story-row{display:flex;align-items:center;gap:12px;padding:12px 0;
  border-bottom:1px solid var(--line)}
.story-row:last-child{border-bottom:0}
.story-row .sr-thumb{position:relative;width:64px;height:44px;flex:0 0 auto;border-radius:9px;
  overflow:hidden;background:var(--bg-sunk);display:grid;place-items:center;color:#fff}
.story-row .sr-thumb img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover}
.story-row .sr-thumb .icon{position:relative;z-index:2;width:16px;height:16px;
  filter:drop-shadow(0 1px 3px rgba(8,17,30,.6))}
.story-row .t{flex:1;min-width:0}
.story-row .t b{display:block;font-size:14.5px;font-weight:700;letter-spacing:-.3px;
  overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.story-row .t span{display:block;margin-top:3px;font-size:12px;color:var(--ink-3)}

/* ---------- 경험일기장 · 끝난 행동 (참고6) ---------- */
.fcard{display:flex;align-items:center;gap:12px;margin-bottom:10px;padding:11px;
  background:var(--bg);border:1px solid var(--line);border-radius:16px;box-shadow:var(--shadow-s)}
.fcard .fc-thumb{width:88px;height:66px;flex:0 0 auto;border-radius:11px;object-fit:cover;
  background:var(--bg-sunk)}
.fcard .fc-mid{flex:1;min-width:0}
.fcard .fc-title{display:flex;align-items:center;gap:6px;font-size:14.5px;font-weight:800;
  letter-spacing:-.35px;line-height:1.3;overflow:hidden}
.fcard .fc-title .fc-t{min-width:0;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.fcard .fc-ic{flex:0 0 auto;width:20px;height:20px;border-radius:50%;display:grid;
  place-items:center;background:var(--bg-soft);color:var(--ink-3)}
.fcard .fc-ic.ok{background:var(--brand-soft);color:var(--brand-ink)}
.fcard .fc-ic .icon{width:12px;height:12px}
.fcard .fc-date{display:block;margin-top:5px;font-size:11.5px;color:var(--ink-3)}
.fcard .fc-res{display:block;margin-top:4px;font-style:normal;font-size:11.5px;font-weight:700;
  color:var(--red)}
.fcard .fc-res.ok{color:var(--brand-ink)}
.fcard .fc-act{flex:0 0 auto;display:flex;flex-direction:column;gap:6px}
.fcard .fc-btn{height:31px;padding:0 13px;border-radius:9px;white-space:nowrap;
  font-size:12.5px;font-weight:700;display:grid;place-items:center;
  background:var(--brand-soft);color:var(--brand-ink);border:1px solid rgba(23,177,169,.38)}
.fcard .fc-btn.sub{background:var(--bg);color:var(--brand-ink);border-color:rgba(23,177,169,.28)}
.fcard .fc-btn:active{transform:scale(.96)}

/* ---------- 신고하기 ---------- */
.rp-btn{display:inline-flex;align-items:center;gap:1px;color:var(--ink-4);
  font-size:12px;font-weight:600}
/* 깃발 글리프가 오른쪽에 자체 여백을 갖고 있어 텍스트가 멀어 보임 → 그만큼 당겨 붙인다 */
.rp-btn .icon{width:14px;height:14px;margin-right:-2px}
.rp-btn:active{color:var(--red)}
.rp-reasons{display:flex;flex-wrap:wrap;gap:7px;margin-top:14px}
.rp-reasons .rp-r{height:34px;padding:0 13px;border-radius:999px;white-space:nowrap;
  background:var(--bg-soft);color:var(--ink-2);border:1px solid transparent;
  font-size:13px;font-weight:600}
.rp-reasons .rp-r.on{background:var(--brand-soft);color:var(--brand-ink);
  border-color:rgba(23,177,169,.42);font-weight:700}

/* ---------- 잠금 패널 (유료 버전 예정 영역) ---------- */
.lock-panel{margin-top:14px;padding:32px 24px;text-align:center;
  background:var(--brand-soft);border:1px dashed rgba(23,177,169,.34);border-radius:16px}
.lock-panel .lp-ic{width:46px;height:46px;margin:0 auto 12px;border-radius:50%;
  display:grid;place-items:center;background:var(--bg);color:var(--brand-ink);
  box-shadow:var(--shadow-s)}
.lock-panel .lp-ic .icon{width:20px;height:20px}
.lock-panel > b{display:block;font-size:15px;font-weight:800;letter-spacing:-.35px;
  color:var(--ink)}
.lock-panel > p{margin:7px 0 0;font-size:12.5px;color:var(--ink-3);line-height:1.55;
  word-break:keep-all}
.lock-panel .lp-tag{display:inline-flex;align-items:center;height:24px;padding:0 11px;
  margin-top:14px;border-radius:999px;background:var(--brand);color:#fff;
  font-size:11px;font-weight:700}

/* ---------- 친구 목록 (참고8) ---------- */
.friend-row{display:flex;align-items:center;gap:13px;padding:13px 0;
  border-bottom:1px solid var(--line)}
.friend-row:last-child{border-bottom:0}
.friend-row .avatar{width:46px;height:46px}
.friend-row > b{flex:1;min-width:0;font-size:15.5px;font-weight:700;letter-spacing:-.3px;
  overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.friend-row .fr-dm{flex:0 0 auto;height:34px;padding:0 15px;border-radius:999px;
  background:var(--brand-soft);color:var(--brand-ink);border:1px solid rgba(23,177,169,.38);
  font-size:13px;font-weight:700}
.friend-row .fr-dm:active{transform:scale(.96)}
.friend-card{text-align:center}
.friend-card .avatar.lg{width:84px;height:84px;margin:6px auto 12px}
.friend-card > b{display:block;font-size:20px;font-weight:800;letter-spacing:-.5px}
.friend-card > p{margin:7px 0 0;font-size:12.5px;color:var(--ink-3)}

/* ---------- 알림(알람) 모달 ---------- */
.sheet-mask{position:absolute;inset:0;background:rgba(10,10,12,.5);z-index:60;
  display:flex;align-items:flex-end;animation:fade .2s}
.sheet-mask.center{align-items:center;justify-content:center;padding:24px}
@keyframes fade{from{opacity:0}to{opacity:1}}
.sheet{width:100%;background:var(--bg);border-radius:22px 22px 0 0;padding:14px 20px calc(22px + var(--safe-b));
  max-height:88%;overflow-y:auto;animation:up .28s cubic-bezier(.32,.72,0,1)}
/* 가운데 뜨는 시트는 손잡이(.grip)가 없어 제목이 위쪽에 붙어 보인다 —
   손잡이가 차지하던 만큼(20px)을 패딩으로 대신 준다 */
.sheet-mask.center .sheet{border-radius:20px;padding-top:34px;padding-bottom:22px;max-width:340px}
@keyframes up{from{transform:translateY(30px)}to{transform:none}}
.sheet .grip{width:38px;height:4px;border-radius:99px;background:var(--line-strong);margin:0 auto 20px}
.sheet h3{margin:0 0 8px;font-size:19px;font-weight:800;letter-spacing:-.5px}
/* 안내 문구와 그 아래 입력·버튼 사이를 넉넉히 띄운다 (모든 팝업 공통) */
.sheet .sub{font-size:13.5px;color:var(--ink-3);margin-bottom:28px;line-height:1.5}
/* 팝업 버튼은 가로 한 줄, 폭은 반반 — 되돌아가는 버튼이 왼쪽, 실행 버튼이 오른쪽 */
.sheet .btn-row{margin-top:18px}
.sheet .btn-row .btn{flex:1 1 0;min-width:0;padding:0 10px}

.alarm-modal{
  position:absolute;inset:0;z-index:80;background:linear-gradient(170deg,#191b26,#0b0c11);
  color:#fff;display:flex;flex-direction:column;padding:0 24px calc(24px + var(--safe-b));
  animation:fade .3s
}
.alarm-modal .time{font-size:62px;font-weight:200;letter-spacing:-2px;text-align:center;margin-top:56px}
.alarm-modal .date{text-align:center;color:rgba(255,255,255,.55);font-size:14px;margin-top:2px}
.alarm-noti{
  margin-top:36px;background:rgba(255,255,255,.11);backdrop-filter:blur(20px);
  border-radius:18px;padding:15px 16px;border:1px solid rgba(255,255,255,.12);
  animation:up .45s .1s both
}
.alarm-noti .h{display:flex;align-items:center;gap:8px;font-size:12.5px;color:rgba(255,255,255,.65)}
.alarm-noti .h b{color:#fff;font-size:13px;font-weight:700;letter-spacing:.5px}
.alarm-noti .h .ago{margin-left:auto}
.alarm-noti .msg{margin-top:9px;font-size:16px;line-height:1.5;font-weight:600}
.alarm-noti .rm{margin-top:5px;font-size:13.5px;color:rgba(255,255,255,.6)}
.alarm-actions{margin-top:auto;display:flex;flex-direction:column;gap:11px}
.alarm-shot{
  border:1.5px dashed rgba(255,255,255,.3);border-radius:16px;height:190px;display:flex;
  flex-direction:column;align-items:center;justify-content:center;gap:9px;color:rgba(255,255,255,.65);
  font-size:13.5px;overflow:hidden;position:relative;margin-bottom:4px
}
.alarm-shot img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover}
.alarm-shot .re{position:absolute;right:10px;bottom:10px;background:rgba(0,0,0,.55);color:#fff;
  font-size:12px;padding:7px 12px;border-radius:9px;z-index:2}
.alarm-modal .note{
  background:rgba(255,255,255,.08);border-radius:12px;padding:11px 13px;font-size:12.5px;
  color:rgba(255,255,255,.7);line-height:1.5;display:flex;gap:8px
}
.alarm-modal textarea{
  background:rgba(255,255,255,.09);border:1px solid rgba(255,255,255,.14);border-radius:12px;
  color:#fff;padding:12px 13px;font-size:14px;outline:none;resize:none;height:64px;width:100%
}
.alarm-modal textarea::placeholder{color:rgba(255,255,255,.4)}
.alarm-modal .btn.done{background:#fff;color:var(--ink)}
.alarm-modal .btn.later{background:rgba(255,255,255,.13);color:#fff}

/* 토스트 */
#toast{position:absolute;left:50%;bottom:110px;transform:translateX(-50%) translateY(10px);
  background:rgba(11,20,36,.93);color:#fff;padding:12px 18px;border-radius:12px;font-size:13.5px;
  z-index:200;opacity:0;pointer-events:none;transition:.25s;max-width:86%;text-align:center;line-height:1.45}
#toast.show{opacity:1;transform:translateX(-50%)}

/* 축하 화면 */
.celebrate{position:absolute;inset:0;z-index:70;background:var(--bg);display:flex;flex-direction:column;
  align-items:center;justify-content:center;text-align:center;padding:40px 30px;animation:fade .3s}
.celebrate .ico{font-size:56px;margin-bottom:20px;animation:pop .5s .1s both}
@keyframes pop{from{transform:scale(.4);opacity:0}to{transform:none;opacity:1}}
.celebrate h2{font-size:25px;font-weight:800;letter-spacing:-.8px;line-height:1.35;margin:0 0 12px}
.celebrate p{font-size:14.5px;color:var(--ink-3);line-height:1.6;margin:0 0 34px}

/* 스텝 인디케이터 */
.steps{display:flex;align-items:center;gap:0;padding:6px 0 22px}
.steps .st{flex:1;display:flex;flex-direction:column;align-items:center;gap:7px;position:relative}
.steps .st i{width:26px;height:26px;border-radius:50%;background:var(--bg-sunk);color:var(--ink-4);
  display:grid;place-items:center;font-size:12.5px;font-weight:700;font-style:normal;z-index:2}
.steps .st.on i{background:var(--brand);color:#fff}
.steps .st.done i{background:var(--brand-soft);color:var(--brand-ink)}
.steps .st span{font-size:11px;color:var(--ink-4);font-weight:600}
.steps .st.on span{color:var(--ink)}
.steps .st::before{content:'';position:absolute;top:13px;left:-50%;width:100%;height:1.5px;
  background:var(--line-strong)}
.steps .st:first-child::before{display:none}

/* 요일 선택 */
.dows{display:flex;gap:6px}
.dows button{flex:1;aspect-ratio:1;border-radius:11px;background:var(--bg-soft);font-size:13.5px;
  font-weight:700;color:var(--ink-3);display:grid;place-items:center}
.dows button.on{background:var(--brand);color:#fff}
.dows button.sun{color:var(--red)}
.dows button.sat{color:var(--blue)}
.dows button.on.sun,.dows button.on.sat{color:#fff}

.msg-item{display:flex;align-items:center;gap:10px;background:var(--bg-soft);border-radius:12px;
  padding:0 6px 0 14px;height:48px;margin-bottom:8px}
.msg-item span{flex:1;font-size:14px;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.msg-item button{width:34px;height:34px;display:grid;place-items:center;color:var(--ink-4)}
.add-line{width:100%;height:48px;border:1px dashed var(--line-strong);border-radius:12px;
  display:flex;align-items:center;justify-content:center;gap:6px;color:var(--ink-3);font-size:14px;font-weight:600}

/* 알림함 */
.noti-row{display:flex;gap:12px;padding:15px 0;border-bottom:1px solid var(--line);align-items:flex-start}
.noti-row .ic{width:38px;height:38px;border-radius:11px;display:grid;place-items:center;flex:0 0 auto;
  background:var(--bg-soft);font-size:17px}
.noti-row .c{flex:1;min-width:0}
.noti-row .c b{font-size:14.5px;font-weight:700;display:block}
.noti-row .c p{margin:4px 0 0;font-size:13px;color:var(--ink-3);line-height:1.45}
.noti-row .c em{font-style:normal;font-size:11.5px;color:var(--ink-4);display:block;margin-top:6px}
.noti-row.unread{position:relative}
.noti-row.unread::after{content:'';position:absolute;right:0;top:22px;width:7px;height:7px;
  border-radius:50%;background:var(--blue)}

/* 이미지 격자 */
.photo-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:3px}
.photo-grid img{aspect-ratio:1;object-fit:cover;width:100%}

.icon{width:22px;height:22px;stroke:currentColor;fill:none;stroke-width:1.9;
  stroke-linecap:round;stroke-linejoin:round;display:block}
.icon.s{width:16px;height:16px}
.icon.l{width:26px;height:26px}
.icon.fill{fill:currentColor;stroke:none}

/* ============================================================
   프로필 편집 · 프로필 사진 원형 크롭
   ============================================================ */
.avatar-edit{display:flex;flex-direction:column;align-items:center;padding:22px 0 4px}
.avatar-pick{position:relative;width:104px;height:104px;border-radius:50%;padding:0;
  background:var(--bg-sunk);box-shadow:var(--shadow-m)}
.avatar-pick img{width:100%;height:100%;border-radius:50%;object-fit:cover;display:block}
.avatar-pick .cam{position:absolute;right:-2px;bottom:-2px;width:34px;height:34px;border-radius:50%;
  background:var(--brand);color:#fff;display:grid;place-items:center;border:3px solid var(--bg)}
.avatar-pick .cam .icon{width:16px;height:16px}
.avatar-pick:active{transform:scale(.97)}

/* 크롭 화면 */
.crop-mask{position:absolute;inset:0;z-index:70;background:#08111e;color:#fff;
  display:flex;flex-direction:column;animation:cropIn .18s}
@keyframes cropIn{from{opacity:0}to{opacity:1}}
.crop-head{display:flex;align-items:center;gap:4px;padding:6px 8px 6px;
  padding-top:calc(6px + var(--safe-t,0px));flex:0 0 auto}
.crop-head h3{flex:1;margin:0;text-align:center;font-size:16px;font-weight:700;letter-spacing:-.3px}
.crop-head .icon-btn{color:#fff}
.crop-ok{height:34px;padding:0 15px;border-radius:9px;background:#fff;color:var(--ink);
  font-size:14px;font-weight:700}
.crop-stage{flex:1;position:relative;overflow:hidden;background:#08111e;
  touch-action:none;-webkit-user-select:none;user-select:none;cursor:grab}
.crop-stage:active{cursor:grabbing}
.crop-stage img{position:absolute;left:0;top:0;transform-origin:0 0;max-width:none;
  -webkit-user-drag:none;user-select:none;pointer-events:none}
/* 반투명 마스크 + 투명한 원(= 실제로 보여질 영역) */
.crop-veil{position:absolute;inset:0;pointer-events:none;display:grid;place-items:center;overflow:hidden}
.crop-hole{border-radius:50%;box-shadow:0 0 0 9999px rgba(8,17,30,.62);
  border:2px solid rgba(255,255,255,.92)}
.crop-tip{margin:14px 24px 0;text-align:center;font-size:12px;line-height:1.6;
  color:rgba(255,255,255,.62)}
.crop-zoom{display:flex;align-items:center;gap:14px;padding:14px 26px;
  padding-bottom:calc(20px + var(--safe-b,0px));flex:0 0 auto;color:rgba(255,255,255,.6)}
.crop-zoom .icon{width:15px;height:15px;flex:0 0 auto}
.crop-zoom .icon:last-child{width:22px;height:22px}
.crop-zoom input[type=range]{flex:1;height:26px;-webkit-appearance:none;appearance:none;background:none}
.crop-zoom input[type=range]::-webkit-slider-runnable-track{height:3px;border-radius:99px;
  background:rgba(255,255,255,.28)}
.crop-zoom input[type=range]::-webkit-slider-thumb{-webkit-appearance:none;width:20px;height:20px;
  border-radius:50%;background:#fff;margin-top:-8.5px;box-shadow:0 1px 4px rgba(0,0,0,.4)}
.crop-zoom input[type=range]::-moz-range-track{height:3px;border-radius:99px;background:rgba(255,255,255,.28)}
.crop-zoom input[type=range]::-moz-range-thumb{width:20px;height:20px;border:0;border-radius:50%;background:#fff}

/* ============================================================
   메인 구조 — 행동방 / 자랑하기 (참고1.png 구조 기준)
   ============================================================ */
.appbar h1.logo{font-size:22px;font-weight:800;letter-spacing:1.4px}

/* 상단 큰 축 탭 */
.main-tabs{flex:0 0 auto;display:flex;background:var(--bg);border-bottom:1px solid var(--line);
  padding:0 20px}
.main-tabs button{flex:1;height:46px;font-size:15.5px;font-weight:700;color:var(--ink-4);
  border-bottom:2.5px solid transparent;margin-bottom:-1px;letter-spacing:-.3px}
.main-tabs button.on{color:var(--brand-ink);border-bottom-color:var(--brand);
  background:linear-gradient(180deg,rgba(23,177,169,0),rgba(23,177,169,.10))}

/* 정렬 토글 (인기순 / 최신순) */
.sortbar{display:flex;gap:6px;background:var(--bg-soft);border-radius:999px;padding:5px}
.sortbar button{flex:1;height:38px;border-radius:999px;display:flex;align-items:center;
  justify-content:center;gap:6px;font-size:13.5px;font-weight:700;color:var(--ink-3)}
.sortbar button.on{background:var(--bg);color:var(--brand-ink);box-shadow:var(--shadow-s)}
.sortbar .icon{width:15px;height:15px}

/* 행동방 카드 — 큰 사진 위에 정보 (참고11 기준) */
.rcard{position:relative;min-height:148px;border-radius:18px;overflow:hidden;margin-bottom:12px;
  background:var(--bg-sunk);box-shadow:var(--shadow-m);
  display:flex;flex-direction:column;justify-content:center;padding:14px 118px 14px 18px}
.rcard .bg{position:absolute;inset:0;width:100%;height:100%;object-fit:cover}
.rcard .grad{position:absolute;inset:0;
  background:linear-gradient(100deg,rgba(8,17,30,.88) 0%,rgba(8,17,30,.64) 48%,rgba(8,17,30,.26) 100%)}
.rcard .rc-body{position:relative;z-index:2;min-width:0;color:#fff}
.rcard .rc-eyebrow{display:block;font-size:12.5px;font-weight:700;letter-spacing:-.2px;
  color:#7fe8dd;margin-bottom:7px;text-shadow:0 1px 5px rgba(8,17,30,.55)}
.rcard h3{margin:0;font-size:22px;font-weight:800;letter-spacing:-.7px;line-height:1.25;
  text-shadow:0 1px 6px rgba(0,0,0,.35);
  display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical;overflow:hidden}
.rcard p{margin:7px 0 0;font-size:13.5px;color:rgba(255,255,255,.82);line-height:1.4;
  overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.rcard .rc-foot{display:flex;align-items:center;gap:9px;margin-top:13px}
.rcard .rc-foot span{font-size:12.5px;color:rgba(255,255,255,.85);font-weight:600}
.rcard .stack img{width:24px;height:24px;border-color:rgba(255,255,255,.85)}
.rcard .rc-right{position:absolute;right:14px;top:13px;bottom:13px;display:flex;
  flex-direction:column;align-items:flex-end;justify-content:space-between;gap:6px}
.rcard .rc-pill{background:#fff;color:var(--red);font-size:11.5px;font-weight:800;
  padding:5px 11px;border-radius:999px;box-shadow:0 2px 6px rgba(0,0,0,.2)}
.rcard .rc-pill.paid{color:#a9701a}
.rcard .rc-dday{font-size:13px;font-weight:700;color:#fff;text-shadow:0 1px 4px rgba(0,0,0,.4)}
.rcard .rc-join{background:#fff;color:var(--brand-ink);font-size:13.5px;font-weight:700;
  height:36px;padding:0 16px;border-radius:999px;box-shadow:0 3px 10px rgba(0,0,0,.22);
  display:grid;place-items:center}
.rcard .rc-join:active{transform:scale(.96)}
.rcard .rc-join.on{background:rgba(255,255,255,.24);color:#fff;
  border:1px solid rgba(255,255,255,.5);box-shadow:none}
.rcard .rc-rank{position:absolute;left:14px;top:13px;z-index:3;
  display:inline-flex;align-items:center;justify-content:center;gap:0;
  height:24px;box-sizing:border-box;
  /* 이모지 글리프가 자체 좌우 여백(side bearing)을 갖고 있어 왼쪽이 더 넓어 보임 →
     왼쪽 패딩을 그만큼(2px) 깎아 시각적으로 좌우가 같아 보이게 맞춤 */
  padding:0 11px 0 9px;
  background:var(--brand);color:#fff;box-shadow:0 2px 8px rgba(8,17,30,.28);
  font-size:11px;font-weight:700;line-height:1;border-radius:999px}
.rcard .rc-rank i{font-style:normal;font-size:10px;line-height:1;display:block}
.rcard .rc-rank b{font-weight:700;line-height:1;display:block}
/* 순위 배지가 있는 카드는 제목이 배지와 겹치지 않도록 위쪽 여백 확보 */
.rcard.ranked{padding-top:48px}
.rcard.hero{min-height:188px;margin-bottom:0;padding-right:126px}
.rcard.hero .grad{background:linear-gradient(100deg,rgba(8,17,30,.80) 0%,rgba(8,17,30,.44) 48%,rgba(8,17,30,.06) 100%)}
.rcard.hero h3{font-size:25px}
.hscroll.cards{gap:12px;padding-bottom:6px}
.hscroll.cards .rcard{width:100%;flex:0 0 auto}
.hscroll.snap{scroll-snap-type:x mandatory}
.hscroll.snap > *{scroll-snap-align:center}

/* 추천 배너 — 화면 가로를 꽉 채우는 풀블리드 캐러셀 (참고5) */
.hero-sec{position:relative}
.hscroll.hero-band{margin:0 -20px;padding:0;gap:0}
.hscroll.hero-band > *{scroll-snap-align:start}
.hscroll.hero-band .rcard{width:100%;flex:0 0 auto;margin-bottom:0;
  border-radius:0;box-shadow:none}
.hscroll.hero-band .rcard.hero{padding-left:22px;padding-bottom:34px}
/* 인디케이터 — 활성은 넓은 민트 알약, 비활성은 흰 알약 (참고5) */
.hero-dots{position:absolute;left:0;right:0;bottom:14px;z-index:4;pointer-events:none;
  display:flex;justify-content:center;align-items:center;gap:6px}
.hero-dots i{width:12px;height:6px;border-radius:99px;background:rgba(255,255,255,.72);
  box-shadow:0 1px 3px rgba(8,17,30,.3);transition:width .25s,background .25s}
.hero-dots i.on{width:26px;background:var(--brand)}

/* ---------- 행동방 리스트 카드 (참고5) ----------
   사진 / 제목 / (참여인원 · 나도하기) 3단 구성 */
.lcard{position:relative;display:flex;align-items:center;gap:11px;margin-bottom:12px;padding:12px;
  background:var(--bg);border:1px solid var(--line);border-radius:16px;
  box-shadow:var(--shadow-s);transition:transform .1s}
.lcard:active{transform:scale(.995)}
.lcard .lc-menu{position:absolute;right:2px;top:2px;z-index:3;width:30px;height:30px;
  display:grid;place-items:center;border-radius:9px;color:var(--ink-4)}
.lcard .lc-menu:active{background:var(--bg-soft)}
.lcard .lc-thumb{width:74px;height:74px;flex:0 0 auto;border-radius:13px;
  object-fit:cover;background:var(--bg-sunk)}
.lcard .lc-mid{flex:1;min-width:0}
.lcard .lc-tags{display:flex;align-items:center;gap:5px;margin-bottom:6px;overflow:hidden}
.lcard .lc-tags em{display:inline-flex;align-items:center;justify-content:center;
  height:21px;padding:0 8px;border-radius:999px;font-style:normal;
  font-size:10.5px;font-weight:700;line-height:1;white-space:nowrap}
.lcard .lc-rank{gap:0;padding:0 8px 0 6px;background:var(--brand);color:#fff}
.lcard .lc-rank i{font-style:normal;font-size:9.5px;line-height:1;display:block}
.lcard .lc-rank b{font-weight:700;line-height:1;display:block}
.lcard .lc-price{background:var(--bg-soft);color:var(--ink-2)}
.lcard .lc-price.paid{background:#fdf3e3;color:#a9701a}
.lcard .lc-title{display:-webkit-box;-webkit-line-clamp:1;-webkit-box-orient:vertical;
  overflow:hidden;font-size:15.5px;font-weight:800;letter-spacing:-.4px;line-height:1.3}
.lcard .lc-desc{margin:5px 0 0;font-size:12.5px;color:var(--ink-3);line-height:1.45;
  display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical;overflow:hidden}
.lcard .lc-right{flex:0 0 88px;display:flex;flex-direction:column;align-items:center;gap:7px}
.lcard .lc-people .stack img{width:20px;height:20px;border-color:var(--bg)}
.lcard .lc-join{height:33px;padding:0 15px;border-radius:999px;white-space:nowrap;
  background:var(--brand-soft);color:var(--brand-ink);border:1px solid rgba(23,177,169,.38);
  font-size:13px;font-weight:700;display:grid;place-items:center}
.lcard .lc-join:active{transform:scale(.96)}
.lcard .lc-join.on{background:var(--bg-soft);color:var(--ink-3);border-color:var(--line-strong)}
.lcard .lc-count{font-size:10.5px;color:var(--ink-3);font-weight:600;white-space:nowrap}

/* 자랑하기 카드 */
.brag-card{background:var(--bg-soft);border-radius:18px;padding:16px;margin-bottom:14px}
.brag-card .bh{display:flex;align-items:center;gap:10px;margin-bottom:12px}
.brag-card .bh .bn b{display:block;font-size:14.5px;font-weight:700}
.brag-card .bh .bn span{display:block;font-size:11.5px;color:var(--ink-3);margin-top:2px}
.brag-card .brow{display:flex;gap:12px;align-items:flex-start}
.brag-card .bt{flex:1;min-width:0}
.brag-card h3{margin:8px 0 0;font-size:19px;font-weight:800;letter-spacing:-.5px;line-height:1.3}
.brag-card p{margin:8px 0 0;font-size:13.5px;color:var(--ink-2);line-height:1.55;white-space:pre-wrap}
.brag-card .bph{display:grid;grid-template-columns:repeat(3,1fr);gap:6px;margin-top:14px}
.brag-card .bph img{width:100%;aspect-ratio:1;object-fit:cover;border-radius:10px;background:var(--bg-sunk)}
.brag-card .bacts{display:flex;align-items:center;gap:18px;margin-top:14px;padding-top:12px;
  border-top:1px solid var(--line);color:var(--ink-3);font-size:13px}
.brag-card .bacts button{display:flex;align-items:center;gap:5px;color:inherit;font-weight:600}

/* ---------- 자랑하기 카드 (참고20) ---------- */
.brag-card{background:var(--bg);border:1px solid var(--line)}
.brag-card .bh .bn{flex:1;min-width:0}
.brag-card .bh .icon-btn.sm{flex:0 0 auto;width:30px;height:30px;display:grid;place-items:center;
  border-radius:9px;color:var(--ink-4)}
.brag-card .bh .icon-btn.sm:active{background:var(--bg-soft)}
.brag-card .btitle{margin:2px 0 0;font-size:18.5px;font-weight:800;letter-spacing:-.5px;line-height:1.32}
.brag-card .bbody{margin:8px 0 0;font-size:13.5px;color:var(--ink-2);line-height:1.6;white-space:pre-wrap}
/* ④ 자동 편집 영상 썸네일 */
.brag-card .bstory{position:relative;margin-top:14px;border-radius:14px;overflow:hidden;
  background:var(--bg-sunk);aspect-ratio:16/9}
.brag-card .bstory img{width:100%;height:100%;object-fit:cover;display:block}
.brag-card .bstory::after{content:'';position:absolute;inset:0;
  background:linear-gradient(180deg,rgba(0,0,0,.28),rgba(0,0,0,0) 42%,rgba(0,0,0,.5))}
.brag-card .bstory .pl{position:absolute;left:50%;top:50%;transform:translate(-50%,-50%);z-index:2;
  width:60px;height:60px;border-radius:50%;background:rgba(255,255,255,.92);color:#1c1c1c;
  display:grid;place-items:center;box-shadow:0 6px 22px rgba(0,0,0,.28)}
.brag-card .bstory .pl .icon{width:26px;height:26px;margin-left:3px;fill:currentColor;stroke:none}
.brag-card .bstory .lb{position:absolute;left:13px;bottom:11px;z-index:2;color:#fff;
  font-size:14px;font-weight:700;letter-spacing:-.3px;text-shadow:0 1px 3px rgba(0,0,0,.5)}
.brag-card .bstory .dur{position:absolute;right:11px;bottom:11px;z-index:2;color:#fff;
  font-size:12px;font-weight:700;background:rgba(0,0,0,.55);border-radius:7px;padding:3px 8px}
/* ⑤ 참여 인원 ⑥ 나도 해보기 (좋아요·응원·댓글 표시는 쓰지 않음) */
.brag-card .bacts .rx.joined{display:flex;align-items:center;gap:6px;
  color:var(--ink-2);font-size:13px;font-weight:600}
.brag-card .bacts .rx.joined .icon{width:15px;height:15px;color:var(--brand-ink)}
.brag-card .bacts .me-too{margin-left:auto;flex:0 0 auto;height:36px;padding:0 13px;border-radius:11px;
  background:var(--green-soft);color:var(--green-ink);font-size:13px;font-weight:700;white-space:nowrap}
.brag-card .bacts .me-too .icon{width:14px;height:14px}

/* ---------- 자랑하기 등록 (참고19) ---------- */
.appbar .icon-btn.text{width:auto;padding:0 6px;gap:4px;display:flex;align-items:center;
  font-size:13.5px;font-weight:700;color:var(--ink-3)}
.pb-cta2{padding-bottom:132px}
.cta-fixed.col .lock-line{display:flex;align-items:center;justify-content:center;gap:5px;
  margin:10px 0 0;font-size:12.5px;font-weight:600;color:var(--ink-3)}
.cta-fixed.col .lock-line .icon{width:13px;height:13px}

.bg-note{display:flex;gap:12px;background:var(--green-soft);border-radius:15px;padding:15px 16px;
  margin-bottom:22px}
.bg-note .ic{flex:0 0 auto;color:var(--green-ink)}
.bg-note .ic .icon{width:26px;height:26px}
.bg-note b{display:block;font-size:14.5px;font-weight:800;color:var(--green-ink);letter-spacing:-.3px}
.bg-note p{margin:6px 0 0;font-size:13px;line-height:1.55;color:var(--ink-2)}
.bg-note.auto{background:var(--bg-soft);margin:4px 0 0}
.bg-note.auto b{color:var(--ink)}
.bg-note.list{margin:0}
.bg-note .auto-sum{display:flex;flex-wrap:wrap;align-items:center;gap:6px;margin-top:10px;
  font-size:12.5px;font-weight:700;color:var(--ink-3)}
.bg-note .auto-sum .icon{width:14px;height:14px}
.bg-note .auto-sum i{font-style:normal;color:var(--ink-4);margin:0 2px}

.bg-field{margin-bottom:24px}
.bg-field .fl{display:flex;align-items:baseline;justify-content:space-between;margin-bottom:9px}
.bg-field .fl label{font-size:15.5px;font-weight:800;letter-spacing:-.3px}
.bg-field .fl .cnt{font-size:12.5px;font-weight:600;color:var(--ink-3)}
.bg-field .fl .cnt i{font-style:normal;color:var(--ink-2);font-weight:700}
.bg-field .bg-input{position:relative}
.bg-field .bg-input input{width:100%;height:54px;padding:0 44px 0 15px;border:1px solid var(--line);
  border-radius:13px;background:var(--bg);font-size:15.5px;font-weight:600;color:var(--ink)}
.bg-field .bg-input input:focus{border-color:var(--ink)}
.bg-field .bg-input input::placeholder{color:var(--ink-4);font-weight:500}
.bg-field .bg-input .clr{position:absolute;right:9px;top:50%;transform:translateY(-50%);
  width:26px;height:26px;border-radius:50%;background:var(--ink-4);color:#fff;display:grid;place-items:center}
.bg-field .bg-input .clr .icon{width:15px;height:15px;stroke-width:3}
.bg-field .textarea{width:100%;min-height:150px;padding:15px;border-radius:13px;font-size:15px;
  line-height:1.7}
.bg-field .hint{margin:9px 0 0;font-size:12.5px;color:var(--ink-3);line-height:1.5}

.info-row{display:flex;gap:12px;padding:13px 0;border-bottom:1px solid var(--line)}
.info-row:last-of-type{border-bottom:0}
.info-row .ic{flex:0 0 auto;width:30px;height:30px;border-radius:50%;background:var(--green-soft);
  color:var(--green-ink);display:grid;place-items:center}
.info-row b{display:block;font-size:14.5px;font-weight:700;letter-spacing:-.3px}
.info-row p{margin:5px 0 0;font-size:12.8px;line-height:1.55;color:var(--ink-3)}

/* 달성 배지 */
.medal-tag{display:inline-flex;align-items:center;height:25px;padding:0 11px;border-radius:999px;
  font-size:12px;font-weight:700;border:1.3px solid var(--line-strong);color:var(--ink-2)}
.medal-tag.gold{border-color:#d9a53a;color:#a97b16;background:#fdf6e6}
.medal-tag.blue{border-color:#8f9ae0;color:var(--blue);background:#eef0fc}
.medal-tag.red{border-color:#e79a95;color:var(--red);background:#fdeeed}
.medal-tag.green{border-color:#8fd8d1;color:var(--green-ink);background:var(--green-soft)}
.medal{flex:0 0 auto;width:62px;height:62px;border-radius:50%;display:grid;place-items:center;
  text-align:center;line-height:1.1;background:linear-gradient(160deg,#eef3f8,#d3dce7);
  box-shadow:0 4px 12px rgba(11,20,36,.12);color:#4a5666}
.medal b{display:block;font-size:15px;font-weight:800;letter-spacing:-.4px}
.medal i{font-style:normal;font-size:10px;opacity:.8}
.medal.gold{background:linear-gradient(160deg,#ffd977,#d99f2b);color:#5c3d05}
.medal.blue{background:linear-gradient(160deg,#b9c2f5,#6f7fd6);color:#fff}
.medal.red{background:linear-gradient(160deg,#f5b1ac,#dd6f66);color:#fff}
.medal.green{background:linear-gradient(160deg,#a7e2c4,#4fae82);color:#fff}

/* 설계 정보 그리드 */
.plan-grid{display:grid;grid-template-columns:1fr 1fr;gap:12px 10px}
.plan-grid > div{display:flex;flex-direction:column;gap:3px}
.plan-grid span{font-size:11.5px;color:var(--ink-3)}
.plan-grid b{font-size:14px;font-weight:700;letter-spacing:-.2px}

/* 나도하기 — 진행 방식 선택 */
.plan-opt{display:flex;align-items:center;gap:13px;width:100%;text-align:left;
  border:1px solid var(--line-strong);border-radius:15px;padding:16px 14px;margin-bottom:10px;
  background:var(--bg);color:var(--ink)}
.plan-opt:active{background:var(--bg-soft)}
.plan-opt .ic{width:40px;height:40px;flex:0 0 auto;border-radius:12px;background:var(--brand-soft);
  color:var(--brand-ink);display:grid;place-items:center}
.plan-opt .c{flex:1;min-width:0}
.plan-opt .c b{display:block;font-size:15.5px;font-weight:700;letter-spacing:-.3px}
.plan-opt .c em{display:block;font-style:normal;font-size:12px;color:var(--brand-ink);font-weight:600;margin-top:4px}
.plan-opt .c i{display:block;font-style:normal;font-size:12px;color:var(--ink-3);margin-top:5px;line-height:1.45}
.plan-opt > .icon{color:var(--ink-4);flex:0 0 auto}

/* 설계된 대로 — 잠긴 계획 카드 */
.locked-card{border:1px dashed var(--line-strong);background:var(--bg-sunk);
  border-radius:15px;padding:16px}

/* 자랑하기 작성 — 사진 고르기 */
.bg-pick{display:grid;grid-template-columns:repeat(4,1fr);gap:6px}
.bg-pick button{position:relative;border-radius:10px;overflow:hidden;aspect-ratio:1;
  background:var(--bg-sunk);opacity:.45}
.bg-pick button img{width:100%;height:100%;object-fit:cover}
.bg-pick button.on{opacity:1;box-shadow:0 0 0 2.5px var(--ink)}

/* ============================================================
   흔적방 상세 — 흔적 / 참여자 / 초대 관리
   ============================================================ */
.filter-block{background:var(--bg-soft);border-radius:15px;padding:14px}
.filter-block .fb-h{display:flex;align-items:center;justify-content:space-between;margin-bottom:8px}
.filter-block .input{background:var(--bg)}
.link-btn{font-size:12px;font-weight:600;color:var(--brand-ink)}

.user-chip{flex:0 0 auto;display:flex;align-items:center;gap:6px;height:36px;padding:0 12px 0 6px;
  border-radius:999px;background:var(--bg);border:1px solid var(--line);font-size:12.5px;
  font-weight:600;color:var(--ink-2);white-space:nowrap}
.user-chip.plain{padding-left:13px}
.user-chip img{width:24px;height:24px;border-radius:50%;object-fit:cover}
.user-chip.on{background:var(--brand);border-color:var(--brand);color:#fff}

.trace-row{display:flex;gap:11px;padding:15px 0;border-bottom:1px solid var(--line);align-items:flex-start}
.trace-row .c{flex:1;min-width:0}
.trace-row .c .h{display:flex;align-items:center;gap:6px;flex-wrap:wrap}
.trace-row .c .h b{font-size:14px;font-weight:700}
.trace-row .c .h span{font-size:11.5px;color:var(--ink-4)}
.trace-row .c p{margin:7px 0 0;font-size:13.5px;line-height:1.5;color:var(--ink-2);white-space:pre-wrap}
.trace-row .tr-media{position:relative;margin-top:9px;width:120px;border-radius:11px;overflow:hidden}
.trace-row .tr-media img{width:100%;height:88px;object-fit:cover;display:block}
.trace-row .tr-media .play{position:absolute;inset:0;display:grid;place-items:center;
  background:rgba(0,0,0,.32);color:#fff;font-size:19px}
.trace-row.deleted{opacity:.62}
.trace-row.deleted .c p{text-decoration:line-through}
.icon-btn.danger{color:var(--ink-4)}
.icon-btn.danger:active{color:var(--red)}
.btn.ghost.danger{color:var(--red);border-color:#eec9c6}

/* 초대 */
.invite-card{background:linear-gradient(160deg,#ffffff,#e9f7f6);border:1px solid var(--line);
  border-radius:18px;padding:18px;text-align:center}
.invite-card .il{font-size:11.5px;color:var(--ink-3);font-weight:600}
.invite-card .code{font-size:29px;font-weight:800;letter-spacing:3px;margin:8px 0 6px;color:var(--brand-ink)}
.invite-card .ilink{font-size:12px;color:var(--ink-3);word-break:break-all}

.invite-row{display:flex;gap:12px;align-items:flex-start;padding:15px 0;border-bottom:1px solid var(--line)}
.invite-row:last-child{border-bottom:0}
.invite-row .c{flex:1;min-width:0}
.invite-row .c .h{display:flex;align-items:center;gap:7px;flex-wrap:wrap}
.invite-row .c .h b{font-size:14.5px;font-weight:700}
.invite-row .c span{display:block;font-size:12px;color:var(--ink-3);margin-top:4px}
.invite-row .c span.ok{color:var(--green-ink)}
.invite-row .c span.warn{color:var(--ink-4)}
.invite-row .iv-act{display:flex;gap:6px;flex:0 0 auto}
.list-row .t span[style*="--red"]{margin-top:4px}

/* ---------- 행동 상세 — 목표 기간 / 목표 횟수 ---------- */
.goal-2{display:flex;background:var(--bg);border:1px solid var(--line);border-radius:16px;
  padding:18px 0;margin:16px 0 10px}
.goal-2 > div{flex:1;text-align:center;position:relative;padding:0 10px}
.goal-2 > div + div::before{content:'';position:absolute;left:0;top:4px;bottom:4px;width:1px;
  background:var(--line)}
.goal-2 .l{display:inline-flex;align-items:center;gap:5px;font-size:12.5px;font-weight:700;
  color:var(--green-ink)}
.goal-2 .l .icon{width:15px;height:15px}
.goal-2 b{display:block;font-size:26px;font-weight:800;letter-spacing:-.8px;margin:7px 0 4px}
.goal-2 em{display:block;font-style:normal;font-size:12px;color:var(--ink-3)}

/* 알림 설정 행 */
.alarm-row{display:flex;align-items:center;gap:9px;background:var(--bg);border:1px solid var(--line);
  border-radius:14px;padding:15px 16px;color:var(--ink-2);font-size:13.5px}
.alarm-row b{font-size:14.5px;font-weight:700;color:var(--ink)}
.alarm-row > span{color:var(--ink-2)}
.alarm-row .icon{color:var(--ink-3)}

/* 나도하기 — 횟수 직접 입력 */
.count-row{display:flex;align-items:center;justify-content:flex-end;gap:10px}
.count-row .stepper{width:190px;flex:0 0 auto}
.count-row .unit{font-size:15px;font-weight:700;color:var(--ink-2)}
.stepper .val{flex:1;width:100%;min-width:0;text-align:center;font-size:20px;font-weight:800;
  border:0;background:none;outline:none;color:var(--ink);-moz-appearance:textfield}
.stepper .val::-webkit-outer-spin-button,
.stepper .val::-webkit-inner-spin-button{-webkit-appearance:none;margin:0}

/* 나도하기 — 알림 통합 카드 */
.alarm-card{background:var(--bg-soft);border-radius:16px;padding:18px 18px 6px;margin-top:6px}
.alarm-card > .row-between{padding-bottom:16px}
.alarm-card b{font-size:16.5px;font-weight:700;letter-spacing:-.3px}
.alarm-card .ac-more{display:flex;align-items:center;gap:8px;width:100%;text-align:left;
  padding:15px 0;border-top:1px solid var(--line-strong);font-size:14.5px;color:var(--ink-2)}
.alarm-card .ac-more .s{margin-left:auto;font-size:13px;color:var(--ink-3)}
.alarm-card .ac-more .icon{color:var(--ink-4)}
.alarm-card .ac-more:active{opacity:.6}

/* ---------- 알림 설정 (커스텀 상세) ---------- */
.txt-btn{font-size:15px;font-weight:700;color:var(--brand-ink);padding:0 4px}
.aset{background:var(--bg);border:1px solid var(--line);border-radius:16px;
  padding:18px;margin-bottom:12px}
.aset h3{display:flex;align-items:center;gap:9px;margin:0 0 14px;font-size:16px;font-weight:800;
  letter-spacing:-.3px}
.aset h3 i{width:22px;height:22px;border-radius:50%;background:var(--brand);color:#fff;
  font-style:normal;font-size:12px;font-weight:800;display:grid;place-items:center;flex:0 0 auto}
.aset .al{display:block;font-size:13px;font-weight:700;color:var(--ink-2);margin-bottom:8px}
.aset .ah{margin:9px 0 0;font-size:12.5px;color:var(--ink-3);line-height:1.5}
.ta-wrap{position:relative}
.ta-wrap .cnt{position:absolute;right:12px;bottom:10px;font-size:11.5px;color:var(--ink-4)}
.ta-wrap .cnt i{font-style:normal}
.aset .ex{display:flex;gap:10px;align-items:flex-start;background:var(--brand-soft);
  border-radius:12px;padding:13px 14px;margin-top:12px;color:var(--brand-ink)}
.aset .ex b{display:block;font-size:12.5px;font-weight:700}
.aset .ex span{display:block;margin-top:5px;font-size:13px;color:var(--ink-3);line-height:1.5}
.aset .ex.period{background:var(--bg-soft);color:var(--ink-2)}
.aset .ex.period b{font-size:14.5px;color:var(--ink)}
.aset .ex.period span{color:var(--ink-3)}
.aset .ex .icon{flex:0 0 auto;margin-top:1px}

.switch.lbl{width:62px}
.switch.lbl em{position:absolute;left:11px;top:50%;transform:translateY(-50%);font-style:normal;
  font-size:10.5px;font-weight:800;color:#fff;opacity:0;transition:opacity .15s}
.switch.lbl.on em{opacity:1}
.switch.lbl::after{width:23px;height:23px}
.switch.lbl.on::after{transform:translateX(33px)}

.pick2{display:flex;gap:10px}
.pick2 button{flex:1;height:46px;border-radius:11px;border:1.4px solid var(--line-strong);
  background:var(--bg);font-size:14px;font-weight:600;color:var(--ink-2)}
.pick2 button.on{border-color:var(--brand);color:var(--brand-ink);font-weight:700;background:var(--brand-soft)}

.time-row{display:flex;align-items:center;gap:10px;height:52px;padding:0 14px;
  border:1px solid var(--line-strong);border-radius:12px;background:var(--bg);color:var(--ink-3)}
.time-row input{flex:1;min-width:0;border:0;background:none;outline:none;font-size:15.5px;
  font-weight:700;color:var(--ink)}

.sound-list{border:1px solid var(--line);border-radius:13px;overflow:hidden}
.sound-row{display:flex;align-items:center;gap:11px;padding:14px 14px;border-bottom:1px solid var(--line);
  color:var(--ink-3)}
.sound-row:last-child{border-bottom:0}
.sound-row.on{background:var(--brand-soft)}
.sound-row .t{flex:1;min-width:0}
.sound-row .t b{display:block;font-size:14.5px;font-weight:700;color:var(--ink)}
.sound-row .t span{display:block;font-size:11.5px;color:var(--ink-3);margin-top:3px}
.sound-row .play{width:30px;height:30px;border-radius:50%;border:1px solid var(--line-strong);
  background:var(--bg);font-size:10px;color:var(--ink-2);display:grid;place-items:center;flex:0 0 auto}
.sound-row .rec{height:30px;padding:0 11px;border-radius:99px;background:var(--ink);color:#fff;
  font-size:12px;font-weight:700;flex:0 0 auto}
.sound-row .rd{width:22px;height:22px;border-radius:50%;border:1.5px solid var(--line-strong);
  display:grid;place-items:center;flex:0 0 auto;color:#fff}
.sound-row.on .rd{background:var(--brand);border-color:var(--brand)}

.tipbox{display:flex;gap:10px;align-items:flex-start;background:var(--bg-soft);border-radius:13px;
  padding:14px;margin-top:14px;font-size:12.5px}
.tipbox p{margin:0;color:var(--ink-3);line-height:1.6}

.rec-box{display:flex;flex-direction:column;align-items:center;gap:8px;background:var(--bg-soft);
  border-radius:14px;padding:26px 16px;margin-bottom:16px}
.rec-box .dot{width:16px;height:16px;border-radius:50%;background:var(--line-strong)}
.rec-box .dot.rec{background:var(--red);animation:recPulse 1s infinite}
@keyframes recPulse{0%,100%{opacity:1}50%{opacity:.35}}
.rec-box b{font-size:30px;font-weight:200;letter-spacing:-1px}
.rec-box span{font-size:12.5px;color:var(--ink-3)}

/* ---------- 행동 만들기 4단계 ---------- */
.wiz{display:flex;align-items:flex-start;padding:18px 4px 22px}
.wiz .ws{flex:1;display:flex;flex-direction:column;align-items:center;gap:8px;position:relative}
.wiz .ws i{width:30px;height:30px;border-radius:50%;background:var(--bg-sunk);color:var(--ink-4);
  font-style:normal;font-size:13.5px;font-weight:800;display:grid;place-items:center;
  position:relative;z-index:2}
.wiz .ws span{font-size:12px;color:var(--ink-4);font-weight:600;white-space:nowrap}
.wiz .ws.on i{background:var(--brand);color:#fff}
.wiz .ws.on span{color:var(--brand-ink);font-weight:700}
.wiz .ws.done i{background:var(--brand-soft);color:var(--brand-ink)}
.wiz .ws::before{content:'';position:absolute;top:14px;left:-50%;width:100%;height:0;
  border-top:1.5px dotted var(--line-strong);z-index:1}
.wiz .ws:first-child::before{display:none}
.wiz.plain .ws::before{border-top-style:solid;border-color:var(--line)}

/* 진입 화면 */
.hero-q{text-align:center;padding:10px 0 26px}
.hero-q .quote{display:block;font-size:44px;line-height:.6;color:var(--line-strong);font-weight:800}
.hero-q h2{margin:16px 0 0;font-size:33px;font-weight:800;letter-spacing:-1.2px;line-height:1.32}
.hero-q h2 b{color:var(--brand-ink)}
.hero-q p{margin:16px 0 0;font-size:14px;color:var(--ink-3)}
.hero-q p b{color:var(--brand-ink);font-weight:700;box-shadow:inset 0 -7px 0 var(--brand-soft)}

.title-box{display:flex;align-items:center;gap:10px;border:1.4px solid var(--brand);
  border-radius:16px;padding:20px 16px;background:var(--bg)}
.title-box .icon{color:var(--ink-4);flex:0 0 auto}
.title-box input{flex:1;min-width:0;border:0;background:none;outline:none;font-size:16px;
  font-weight:600;color:var(--ink)}
.title-box input::placeholder{color:var(--ink-4);font-weight:500}
.title-box .cnt{font-size:12px;color:var(--ink-4);flex:0 0 auto}
.title-box .cnt i{font-style:normal}

.preview-q{text-align:center;margin:26px 0 12px;color:var(--brand-ink);font-size:15px}
.preview-q p{margin:8px 0 0;font-size:13.5px;color:var(--ink-3);line-height:1.6}
.preview-q p b{color:var(--ink);font-weight:700;box-shadow:inset 0 -7px 0 var(--brand-soft)}
.dash-box{border:1.5px dashed var(--line-strong);border-radius:14px;padding:24px 16px;
  text-align:center;color:var(--ink-4)}
.dash-box b{display:block;margin-top:8px;font-size:14.5px;font-weight:700;color:var(--ink-3)}
.dash-box span{display:block;margin-top:6px;font-size:12.5px}
.dash-box.filled{border-style:solid;border-color:var(--brand);background:var(--brand-soft);color:var(--brand-ink)}
.dash-box.filled b{color:var(--ink);font-size:16px}
.dash-box.filled span{color:var(--brand-ink)}

.hintbar{background:var(--bg-soft);border-radius:11px;padding:13px;text-align:center;
  margin-top:14px;font-size:13.5px;color:var(--ink-2)}
.hintbar b{color:var(--brand-ink);font-weight:800}
.aset .ttl{display:block;font-size:15.5px;font-weight:800;letter-spacing:-.3px;margin-bottom:12px}

/* 공개 여부 */
.vis2{display:flex;gap:10px}
.vis2 button{flex:1;text-align:left;border:1.4px solid var(--line);border-radius:14px;
  padding:16px 14px;background:var(--bg);position:relative;color:var(--ink-3)}
.vis2 button b{display:block;margin:10px 0 6px;font-size:15px;font-weight:700;color:var(--ink)}
.vis2 button span{display:block;font-size:12px;line-height:1.5}
.vis2 button .ck{position:absolute;top:12px;right:12px;width:22px;height:22px;border-radius:50%;
  display:none;place-items:center;background:var(--brand);color:#fff}
.vis2 button.on{border-color:var(--brand);background:var(--brand-soft)}
.vis2 button.on .ck{display:grid}

/* 메인 사진 */
.photo-pick{display:flex;gap:14px;align-items:center}
.photo-pick .ph,.photo-pick img{width:96px;height:96px;border-radius:14px;flex:0 0 auto;
  object-fit:cover;background:var(--bg-sunk)}
.photo-pick .ph{display:grid;place-items:center;color:var(--brand-ink)}
.photo-pick .t b{display:block;font-size:14.5px;font-weight:700}
.photo-pick .t span{display:block;margin-top:7px;font-size:12.5px;color:var(--ink-3);line-height:1.55}

/* 설계 요약 */
.aset.summary{background:var(--bg-soft);border-color:transparent}
.sm-row{display:flex;align-items:flex-start;gap:14px;padding:9px 0}
.sm-row span{font-size:13px;color:var(--ink-3);flex:0 0 62px}
.sm-row b{flex:1;text-align:right;font-size:13.5px;font-weight:700;line-height:1.5;word-break:keep-all}

/* 완료 */
.done-wrap{display:flex;flex-direction:column;align-items:center;text-align:center;padding:20px 0 40px}
.done-wrap .ico{font-size:52px;margin-bottom:18px;animation:pop .5s .1s both}
.done-wrap h2{margin:0 0 12px;font-size:24px;font-weight:800;letter-spacing:-.7px}
.done-wrap p{margin:0 0 26px;font-size:14.5px;color:var(--ink-3);line-height:1.65}
.done-card{width:100%;background:var(--bg-soft);border-radius:14px;padding:6px 16px}
.txt-btn.muted{color:var(--ink-3);font-weight:600}

/* ---------- 흔적방 (참고12 기준) ---------- */
/* 큰 제목 헤더도 함께 줄였다 (아래 여백 14→10 · 제목 26→23 · 설명 간격 8→5) */
.appbar.tall{align-items:flex-start;padding:2px 16px 10px}
.appbar.tall .ttl{flex:1;min-width:0}
.appbar.tall h1{font-size:23px;font-weight:800;letter-spacing:-.8px;margin:0}
.appbar.tall p{margin:5px 0 0;font-size:12.5px;color:var(--ink-3);line-height:1.45}
.main-tabs.green button.on{color:var(--green-ink);border-bottom-color:var(--green);
  background:linear-gradient(180deg,rgba(23,177,169,0),rgba(23,177,169,.10))}
.cnt-dot{display:inline-grid;place-items:center;width:20px;height:20px;border-radius:50%;
  background:var(--green);color:#fff;font-style:normal;font-size:11.5px;font-weight:800;
  margin-left:6px;vertical-align:2px}

/* 진행 카드 — 완료율만큼 흑백 → 컬러 */
.pcard{position:relative;border-radius:18px;overflow:hidden;margin-bottom:12px;
  background:#0e1a2b;box-shadow:var(--shadow-m);padding:18px 16px 16px}
.pf-img{position:absolute;inset:0}
.pf-img img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover}
.pf-img .gray{filter:grayscale(1) brightness(.62)}
/* 왼쪽에서 오른쪽으로 완료율만큼만 컬러가 드러난다 */
.pf-img .color{clip-path:inset(0 calc(100% - var(--p,0%)) 0 0);
  transition:clip-path 1.1s cubic-bezier(.32,.72,0,1)}
.pf-img .veil{position:absolute;inset:0;
  background:linear-gradient(100deg,rgba(8,17,30,.86) 0%,rgba(8,17,30,.55) 55%,rgba(8,17,30,.28) 100%)}
.pcard .pc-body,.pcard .pc-acts,.pcard .pc-dots{position:relative;z-index:2}
.pcard .pc-dots{position:absolute;top:12px;right:12px;width:30px;height:30px;display:grid;
  place-items:center;color:rgba(255,255,255,.75);z-index:3}
.pcard h3{margin:0;font-size:21px;font-weight:800;letter-spacing:-.6px;line-height:1.3;color:#fff;
  padding-right:34px;text-shadow:0 1px 6px rgba(0,0,0,.4)}
.pcard .cnt{display:block;margin-top:9px;font-size:13.5px;color:rgba(255,255,255,.78)}
.pcard .pc-bar{display:flex;align-items:center;gap:12px;margin-top:13px}
.pcard .pc-bar .bar{flex:1;height:9px;background:rgba(255,255,255,.28)}
.pcard .pc-bar .bar i{background:var(--green);transition:width 1.1s cubic-bezier(.32,.72,0,1)}
.pcard .pc-bar b{font-size:15px;font-weight:800;color:#fff;min-width:44px;text-align:right}
.pcard .pc-acts{display:flex;gap:10px;margin-top:16px}
.pcard .pc-acts .done,.pcard .pc-acts .trace{flex:1;height:46px;border-radius:12px;display:flex;
  align-items:center;justify-content:center;gap:7px;font-size:14.5px;font-weight:700}
.pcard .pc-acts .done{background:rgba(0,0,0,.45);color:rgba(255,255,255,.9);
  border:1px solid rgba(255,255,255,.28)}
.pcard .pc-acts .done.on{color:var(--green-ink);border-color:rgba(23,177,169,.55)}
.pcard .pc-acts .trace{background:#fff;color:var(--ink)}
.pcard .pc-acts .trace:active{transform:scale(.98)}

/* 담아둔 행동 카드 */
.scard{position:relative;display:flex;align-items:center;gap:14px;border-radius:16px;
  overflow:hidden;background:var(--bg);border:1px solid var(--line);box-shadow:var(--shadow-s);
  margin-bottom:10px;padding-right:14px;height:92px}
.scard > img{width:112px;height:100%;object-fit:cover;flex:0 0 auto;
  -webkit-mask-image:linear-gradient(90deg,#000 55%,transparent);
  mask-image:linear-gradient(90deg,#000 55%,transparent)}
.scard .t{flex:1;min-width:0;color:var(--ink)}
.scard .t b{display:block;font-size:16.5px;font-weight:800;letter-spacing:-.4px}
.scard .t span{display:block;margin-top:4px;font-size:12.5px;color:var(--ink-3);
  overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.scard .t em{display:block;margin-top:4px;font-style:normal;font-size:12px;color:var(--ink-4)}
.scard .start{flex:0 0 auto;height:38px;padding:0 16px;border-radius:999px;
  background:var(--brand);color:#fff;font-size:13.5px;font-weight:700;
  box-shadow:0 2px 8px rgba(23,177,169,.3)}
.scard .start:active{transform:scale(.96)}

/* ---------- 행동 상세 (참고13) ---------- */
.sum-card{border-radius:18px;overflow:hidden;background:var(--bg);border:1px solid var(--line);
  box-shadow:var(--shadow-s)}
.sum-card .pf-img{border-radius:0}
.sum-card .sc-b{padding:16px 18px 18px}
.sum-card h2{margin:0;font-size:22px;font-weight:800;letter-spacing:-.6px;line-height:1.3}
.sum-card .sc-b > span{display:block;margin-top:7px;font-size:14px;color:var(--ink-2)}
.sum-card .sc-b > span.date{margin-top:4px;font-size:13px;color:var(--ink-3)}
.sum-card .sc-bar{display:flex;align-items:center;gap:14px;margin-top:14px}
.sum-card .sc-bar b{font-size:21px;font-weight:800;color:var(--green-ink);letter-spacing:-.6px;min-width:56px}
.sum-card .sc-bar .bar{flex:1;height:11px}
.sum-card .sc-bar .bar i{background:var(--green);transition:width 1.1s cubic-bezier(.32,.72,0,1)}

/* 날짜별 흔적 (위→아래: 오래된 날부터) */
.day-list{position:relative}
.day-row{display:flex;align-items:center;gap:12px;padding:14px 0;border-bottom:1px solid var(--line);
  position:relative}
.day-row:last-child{border-bottom:0}
.day-row .dt{width:76px;flex:0 0 auto;font-size:14px;font-weight:600;color:var(--ink-2)}
.day-row .mark{width:26px;height:26px;flex:0 0 auto;border-radius:50%;border:2px solid var(--line-strong);
  display:grid;place-items:center;background:var(--bg);color:#fff;position:relative;z-index:2}
.day-row.done .mark{background:var(--green);border-color:var(--green)}
.day-row.today .mark{border-color:var(--green)}
.day-row::before{content:'';position:absolute;left:85px;top:0;bottom:0;width:3px;
  background:var(--line);z-index:1}
.day-row:first-child::before{top:50%}
.day-row:last-child::before{bottom:50%}
.day-row.done::before{background:#bfe3ce}
.day-row .st{flex:0 0 auto;display:flex;align-items:center;gap:4px;font-size:15px;font-weight:700;
  color:var(--green-ink);min-width:66px}
.day-row .st.off{color:var(--ink-4);font-weight:600;font-size:14px;background:var(--bg-soft);
  padding:7px 12px;border-radius:9px;min-width:0}
.day-row .dbtn{margin-left:auto;display:flex;align-items:center;gap:6px;height:38px;padding:0 13px;
  border:1px solid var(--line-strong);border-radius:10px;background:var(--bg);
  font-size:13px;font-weight:600;color:var(--ink-2);white-space:nowrap}
.day-row .dbtn:active{background:var(--bg-soft)}
/* 기간이 끝난 행동 — 누를 수 없는 잠금 표시 */
.day-row .dbtn.off{border-style:dashed;background:var(--bg-soft);color:var(--ink-4);font-weight:600}
.day-row > .icon:last-child{color:var(--ink-4);flex:0 0 auto}

/* 알림 · 공개 설정 카드 */
.opt-card{margin-top:20px;border:1px solid var(--line);border-radius:16px;overflow:hidden;background:var(--bg)}
.opt{display:flex;align-items:center;gap:12px;width:100%;padding:16px;border-bottom:1px solid var(--line);
  text-align:left}
.opt:last-child{border-bottom:0}
.opt .ic{width:26px;flex:0 0 auto;color:var(--ink-2);display:grid;place-items:center}
.opt b{font-size:15.5px;font-weight:700}
.opt .v{font-size:14px;color:var(--ink-3);max-width:150px;overflow:hidden;text-overflow:ellipsis;
  white-space:nowrap}
.opt .icon:last-child{color:var(--ink-4)}
.opt .switch.on{background:var(--green)}

.btn.talk{background:#1f5c3a;color:#fff}

/* ---------- 흔적 보기 (흔적14) ---------- */
.tr-date{margin:0;font-size:14.5px;font-weight:700;color:var(--green-ink)}
.tr-title{margin:8px 0 0;font-size:25px;font-weight:800;letter-spacing:-.8px;line-height:1.3}
.tr-done{display:flex;align-items:center;gap:6px;margin:10px 0 20px;font-size:14px;
  font-weight:600;color:var(--ink-2)}
.tr-done .icon{width:20px;height:20px;border-radius:50%;background:var(--green);color:#fff;
  padding:3px;stroke-width:3}

.tr-card{background:var(--bg);border:1px solid var(--line);border-radius:18px;padding:16px;
  margin-bottom:14px}
.tr-card .tr-h{display:flex;align-items:center;justify-content:space-between;margin-bottom:14px}
.tr-card .tr-h b{display:flex;align-items:center;gap:8px;font-size:16px;font-weight:800}
.tr-card .tr-h b .icon{color:var(--green-ink)}
.tr-add{height:36px;padding:0 14px;border-radius:10px;border:1.3px solid var(--green);
  color:var(--green-ink);background:var(--bg);font-size:13.5px;font-weight:700}
.tr-add:active{background:var(--green-soft)}

.tr-main{position:relative;border-radius:14px;overflow:hidden;background:var(--bg-sunk)}
.tr-main img{width:100%;max-height:260px;object-fit:cover;display:block}
.tr-main .rm{position:absolute;top:10px;right:10px;width:30px;height:30px;border-radius:50%;
  background:rgba(0,0,0,.55);color:#fff;display:grid;place-items:center}
.tr-thumbs{display:flex;gap:8px;margin-top:10px;overflow-x:auto;scrollbar-width:none}
.tr-thumbs::-webkit-scrollbar{display:none}
.tr-thumbs button{flex:0 0 auto;width:84px;height:62px;border-radius:10px;overflow:hidden;
  border:2px solid transparent;background:var(--bg-sunk)}
.tr-thumbs button.on{border-color:var(--green)}
.tr-thumbs img{width:100%;height:100%;object-fit:cover}

.tr-text{background:var(--bg-soft);border-radius:13px;padding:16px;font-size:14.5px;
  line-height:1.75;color:var(--ink);white-space:pre-wrap}
.tr-at{margin:11px 2px 0;font-size:12.5px;color:var(--ink-3)}
.tr-at b{color:var(--ink-2);font-weight:600;margin-left:6px}

.tr-wave{display:flex;align-items:center;gap:14px;background:var(--green-soft);border-radius:13px;
  padding:14px 16px}
.tr-wave .pl{width:44px;height:44px;flex:0 0 auto;border-radius:50%;background:var(--green);color:#fff;
  font-size:14px;display:grid;place-items:center}
.tr-wave .wv{flex:1;min-width:0;height:34px;display:flex;align-items:center;gap:2px;overflow:hidden}
.tr-wave .wv i{flex:1;min-width:2px;background:#7cc39d;border-radius:2px}
.tr-wave .len{font-size:13.5px;font-weight:700;color:var(--ink-2);flex:0 0 auto}
.tr-wave .rm{width:26px;height:26px;flex:0 0 auto;border-radius:50%;background:rgba(0,0,0,.12);
  color:var(--ink-2);display:grid;place-items:center}
.tr-wave .rm .icon{width:14px;height:14px}

.tr-acts{display:flex;background:var(--bg);border:1px solid var(--line);border-radius:14px;
  overflow:hidden}
.tr-acts button{flex:1;height:54px;display:flex;align-items:center;justify-content:center;gap:8px;
  font-size:15.5px;font-weight:700;color:var(--ink-2)}
.tr-acts button + button{border-left:1px solid var(--line)}
.tr-acts .del{color:var(--red)}

/* 사진 장수 (무료 n/3) */
.tr-card .tr-h b i.ph-cnt{font-size:12.5px;font-weight:700;color:var(--ink-3);font-style:normal;
  padding:2px 8px;border-radius:999px;background:var(--bg-soft)}
.tr-add.locked{border-color:var(--line-strong);color:var(--ink-3);display:inline-flex;
  align-items:center;gap:5px}
.tr-add.locked .icon{width:14px;height:14px}

/* 흔적 영상 (프로) */
.tr-video{position:relative;border-radius:14px;overflow:hidden;background:#000}
.tr-video video{width:100%;max-height:260px;display:block;background:#000}
.tr-video .rm{position:absolute;top:10px;right:10px;width:30px;height:30px;border-radius:50%;
  background:rgba(0,0,0,.55);color:#fff;display:grid;place-items:center}

/* 무료 안내 줄 · 프로 안내 박스 */
.pro-note{display:flex;align-items:flex-start;gap:8px;margin:12px 0 0;padding:11px 12px;
  border-radius:12px;background:var(--bg-soft);font-size:12.5px;line-height:1.6;color:var(--ink-3)}
.pro-note > .icon{width:15px;height:15px;flex:0 0 auto;margin-top:2px;color:var(--ink-4)}
.pro-note b{color:var(--ink-2);font-weight:700}
.pro-note > span.pro-tag{margin-left:auto}
.pro-note:active{opacity:.7}

.pro-box{display:flex;flex-direction:column;align-items:center;gap:6px;padding:24px 16px;
  border:1.3px dashed var(--line-strong);border-radius:14px;background:var(--bg-soft);text-align:center}
.pro-box .icon{width:26px;height:26px;color:var(--ink-4)}
.pro-box b{font-size:14.5px;font-weight:800;color:var(--ink-2)}
.pro-box span{font-size:12.5px;line-height:1.6;color:var(--ink-3)}
.pro-box:active{opacity:.85}

/* 흔적 남기기 시트 — 사진 여러 장(무료 3장) + 영상(프로) */
.ck-h{display:flex;align-items:center;justify-content:space-between;margin:4px 0 10px}
.ck-h b{display:flex;align-items:center;gap:7px;font-size:14.5px;font-weight:800}
.ck-h b .icon{color:var(--green-ink)}
.ck-h b i.ph-cnt{font-size:12px;font-weight:700;color:var(--ink-3);font-style:normal;
  padding:2px 7px;border-radius:999px;background:var(--bg-soft)}
.ck-photos{display:flex;flex-wrap:wrap;gap:8px}
.ck-ph{position:relative;width:92px;height:92px;border-radius:12px;overflow:hidden;
  background:var(--bg-sunk);flex:0 0 auto}
.ck-ph img{width:100%;height:100%;object-fit:cover;display:block}
.ck-ph .rm{position:absolute;top:4px;right:4px;width:22px;height:22px;border-radius:50%;
  background:rgba(0,0,0,.55);color:#fff;display:grid;place-items:center}
.ck-ph .rm .icon{width:13px;height:13px}
.ck-ph.add{display:flex;flex-direction:column;align-items:center;justify-content:center;gap:3px;
  border:1.3px dashed var(--line-strong);background:var(--bg);color:var(--ink-3);
  font-size:11.5px;font-weight:700;line-height:1.3;text-align:center}
.ck-ph.add .icon{width:18px;height:18px}
.ck-ph.add.locked{background:var(--bg-soft);color:var(--ink-4)}
.ck-vid{display:flex;align-items:center;gap:10px;padding:12px;border-radius:13px;
  background:var(--green-soft)}
.ck-vid > .icon{width:20px;height:20px;flex:0 0 auto;color:var(--green-ink)}
.ck-vid .t{flex:1;min-width:0}
.ck-vid .t b{display:block;font-size:13.5px;font-weight:700;overflow:hidden;
  text-overflow:ellipsis;white-space:nowrap}
.ck-vid .t span{font-size:12px;color:var(--ink-3)}
.ck-vid .rm{width:26px;height:26px;flex:0 0 auto;border-radius:50%;background:rgba(0,0,0,.12);
  color:var(--ink-2);display:grid;place-items:center}
.ck-vid .rm .icon{width:14px;height:14px}

/* ---------- 흔적들 캘린더 (참고15) ---------- */
.cal2{background:var(--bg);border:1px solid var(--line);border-radius:16px;overflow:hidden}
.cal2 .cal-head{display:flex;align-items:center;justify-content:space-between;padding:14px 12px}
.cal2 .cal-head b{font-size:17px;font-weight:800;letter-spacing:-.4px}
.cal2 .cal-head button{width:36px;height:36px;display:grid;place-items:center;color:var(--ink-2)}
.cal2 .cal-grid{display:grid;grid-template-columns:repeat(7,1fr)}
.cal2 .dow{text-align:center;font-size:12px;font-weight:700;color:var(--ink-3);padding:6px 0 10px}
.cal2 .dow.sun{color:var(--red)}
.cal2 .dow.sat{color:var(--blue)}
.cal2 .c2{position:relative;min-height:64px;padding:6px 3px 7px;border-top:1px solid var(--line);
  display:flex;flex-direction:column;align-items:center;gap:2px;overflow:hidden}
.cal2 .c2.out{color:var(--ink-4);opacity:.45;font-size:13px;align-items:center;justify-content:flex-start}
.cal2 .c2 .n{flex:0 0 auto;font-size:14px;font-weight:700;width:26px;height:26px;display:grid;
  place-items:center;border-radius:50%}
.cal2 .c2 .n.sun{color:var(--red)}
.cal2 .c2 .n.sat{color:var(--blue)}
.cal2 .c2.today .n{background:var(--green);color:#fff}
/* 라벨은 셀 폭을 넘기지 않고 말줄임(...) 처리 — 날짜 숫자와 겹치지 않게 세로로 쌓는다 */
.cal2 .c2 .tg{max-width:100%;font-size:10.5px;font-weight:700;line-height:1.3;
  white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.cal2 .c2 .tg.g{color:var(--green-ink)}
.cal2 .c2 .tg.o{color:#d9542f}
.cal2 .c2 .marks{display:flex;align-items:center;justify-content:center;gap:3px;
  width:100%;min-width:0;max-width:100%}
.cal2 .c2 .pin{position:relative;flex:0 1 auto;min-width:0;max-width:100%;
  font-size:9.5px;font-weight:800;line-height:1.35;padding-left:6px;
  white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.cal2 .c2 .pin::before{content:'';position:absolute;left:0;top:50%;transform:translateY(-50%);
  width:3px;height:11px;border-radius:2px}
.cal2 .c2 .pin.s{color:var(--green-ink)}
.cal2 .c2 .pin.s::before{background:var(--green)}
.cal2 .c2 .pin.e{color:var(--blue)}
.cal2 .c2 .pin.e::before{background:var(--blue)}

.cal-legend{display:flex;flex-wrap:wrap;gap:10px 16px;background:var(--bg-soft);border-radius:13px;
  padding:14px;margin-top:12px;font-size:12px;font-weight:600;color:var(--ink-2)}
.cal-legend span{display:flex;align-items:center;gap:6px}
.cal-legend em{font-style:normal;color:var(--ink-3);font-weight:500}
.cal-legend .dot{width:8px;height:8px;border-radius:50%}
.cal-legend .dot.g{background:var(--green)}
.cal-legend .dot.o{background:#d9542f}
.cal-legend .pin{width:3px;height:14px;border-radius:2px}
.cal-legend .pin.s{background:var(--green)}
.cal-legend .pin.e{background:var(--blue)}

.qrow{display:flex;align-items:center;gap:12px;padding:14px 0;border-bottom:1px solid var(--line)}
.qrow:last-child{border-bottom:0}
.qrow b{font-size:15px;font-weight:700;width:74px;flex:0 0 auto}
.qrow b em{font-style:normal;font-size:13px;color:var(--ink-3);margin-left:2px}
.qrow span{flex:1;font-size:13px;color:var(--ink-3)}
.qrow .icon{color:var(--ink-4)}

/* ---------- 날짜 상세 (참고16) ---------- */
.d-h{display:flex;align-items:center;justify-content:space-between;margin-bottom:14px}
.d-h b{display:flex;align-items:center;gap:8px;font-size:16.5px;font-weight:800}
.d-h b .icon{width:20px;height:20px;border-radius:6px;background:var(--green);color:#fff;padding:3px;
  stroke-width:3}
.d-h b i{font-style:normal;color:var(--ink-3)}
.d-card{border:1px solid var(--line);border-radius:16px;padding:14px;margin-bottom:12px;background:var(--bg)}
.d-card .dc-h{display:flex;align-items:center;gap:10px;margin-bottom:12px}
.d-card .dc-h .ic{width:36px;height:36px;border-radius:50%;background:var(--green-soft);
  color:var(--green-ink);display:grid;place-items:center;flex:0 0 auto}
/* 진행기간 종료 흔적 — 편집 불가 · 삭제만 가능 */
.d-card.locked{border-style:dashed}
.d-card .dc-h .lock-tag{margin-left:auto;flex:0 0 auto;display:flex;align-items:center;gap:4px;
  height:24px;padding:0 9px;border-radius:8px;background:var(--bg-soft);color:var(--ink-3);
  font-size:11.5px;font-weight:700;white-space:nowrap}
.d-card .dc-h .lock-tag .icon{width:13px;height:13px}
.d-card .dc-h b{display:block;font-size:15.5px;font-weight:700}
.d-card .dc-h span{display:flex;align-items:center;gap:4px;margin-top:3px;font-size:12.5px;color:var(--green-ink)}
.d-card .dc-photo{position:relative;border-radius:12px;overflow:hidden}
.d-card .dc-photo img{width:100%;height:150px;object-fit:cover;display:block}
.d-card .dc-photo .cnt{position:absolute;right:9px;bottom:9px;background:rgba(0,0,0,.6);color:#fff;
  font-size:11.5px;font-weight:700;padding:4px 9px;border-radius:8px;display:flex;align-items:center;gap:4px}
.d-card .dc-t{margin:11px 0 0;font-size:14px;color:var(--ink-2);line-height:1.5}
.d-card .dc-wave{display:flex;align-items:center;gap:10px;margin-top:11px}
.d-card .dc-wave .pl{width:26px;height:26px;border-radius:50%;background:var(--green);color:#fff;
  font-size:9px;display:grid;place-items:center;flex:0 0 auto}
.d-card .dc-wave b{font-size:12.5px;color:var(--ink-2);flex:0 0 auto}
.d-card .dc-wave .wv{flex:1;height:20px;display:flex;align-items:center;gap:2px;overflow:hidden}
.d-card .dc-wave .wv i{flex:1;min-width:2px;background:#a9d9c0;border-radius:2px}

.ev-row{display:flex;align-items:center;gap:12px;border:1px solid var(--line);border-radius:14px;
  padding:14px;margin-bottom:10px;background:var(--bg)}
.ev-row .ic{width:34px;height:34px;border-radius:50%;background:#fdece7;color:#d9542f;
  display:grid;place-items:center;flex:0 0 auto}
.ev-row .t{flex:1;min-width:0}
.ev-row .t b{display:block;font-size:15px;font-weight:700}
.ev-row .t span{display:block;margin-top:3px;font-size:12.5px;color:var(--ink-3)}
.ev-row .icon:last-child{color:var(--ink-4)}

/* 기간 종료 안내 */
.locked-note{display:flex;align-items:center;gap:11px;background:var(--bg-soft);border-radius:13px;
  padding:15px 16px;margin-top:4px;color:var(--ink-3)}
.locked-note p{margin:0;font-size:13px;line-height:1.55}
.btn.ghost.danger{color:var(--red);border-color:#eec9c6}

/* 경험일기장 — 지난 행동 */
.past-row{display:flex;align-items:center;gap:12px;padding:15px 0;border-bottom:1px solid var(--line)}
.past-row:last-of-type{border-bottom:0}
.past-row .ic{width:30px;height:30px;border-radius:50%;display:grid;place-items:center;flex:0 0 auto;
  color:#fff;stroke-width:3}
.past-row .ic.ok{background:var(--green)}
.past-row .ic.no{background:var(--red)}
.past-row .t{flex:1;min-width:0}
.past-row .t b{display:block;font-size:15.5px;font-weight:700;letter-spacing:-.3px}
.past-row .t span{display:block;margin-top:4px;font-size:12.5px;color:var(--ink-3)}
.past-row .t em{display:block;margin-top:4px;font-style:normal;font-size:13px;font-weight:700}
.past-row .t em.ok{color:var(--green-ink)}
.past-row .t em.no{color:var(--red)}
.past-row .again{flex:0 0 auto;height:36px;padding:0 14px;border-radius:10px;font-size:13px;
  font-weight:700;background:var(--green-soft);color:var(--green-ink)}
.past-row .again.retry{background:#fdecea;color:var(--red)}

/* ============================================================
   2026-09-01 클라이언트 요청 반영분
   ① 프로(유료) 잠금 표시  ② 시각 숫자 입력
   ③ 하단 고정 '행동 만들기'  ④ 자랑하기 상세의 편집본 카드
   ============================================================ */

/* ---------- 프로(유료) 잠금 ---------- */
/* 여러 컴포넌트 안에 얹히므로, 주변의 `... span{display:block}` 류 규칙에
   눌리지 않도록 요소 선택자까지 붙여 특이도를 올려둔다 */
span.pro-tag{display:inline-flex;align-items:center;gap:3px;vertical-align:middle;
  flex:0 0 auto;height:20px;padding:0 8px;margin:0 0 0 6px;border-radius:999px;
  background:linear-gradient(160deg,#ffd977,#d99f2b);color:#5c3d05;
  font-size:10px;font-weight:800;letter-spacing:.2px;line-height:1;white-space:nowrap}
span.pro-tag .icon{width:11px;height:11px;flex:0 0 auto}

.card.pro-lock{background:var(--bg-soft);border-style:dashed;border-color:var(--line-strong)}
.card.pro-lock:active{opacity:.85}
.switch.locked{width:50px;height:29px;border-radius:999px;flex:0 0 auto;
  background:var(--bg-sunk);border:1px solid var(--line-strong);
  display:grid;place-items:center;color:var(--ink-4)}
.switch.locked::after{content:none}
.switch.locked .icon{width:14px;height:14px}

/* 설정 화면의 잠긴 항목 줄 */
.list-row.locked .t b{color:var(--ink-3)}
.list-row.locked .t span{color:var(--ink-4)}
.list-row.locked:active{opacity:.6}

.sound-row.locked{background:var(--bg-soft);color:var(--ink-4)}
.sound-row.locked .t b{color:var(--ink-3)}
.sound-row.locked .t span{color:var(--ink-4)}
.sound-row.locked:active{opacity:.8}
/* 잠긴 줄은 오른쪽에 PRO 뱃지만 두고 선택 표시(원형)는 쓰지 않는다 */
.sound-row.locked > span.pro-tag{margin-left:auto}

/* ---------- 시각 숫자 입력 (시 : 분 직접 입력) ---------- */
.time-num{display:flex;align-items:center;gap:10px;min-height:56px;padding:8px 12px;
  border:1px solid var(--line-strong);border-radius:12px;background:var(--bg);
  color:var(--ink-3);flex-wrap:wrap}
.time-num .tn-ic{display:grid;place-items:center;flex:0 0 auto;color:var(--ink-4)}
.time-num .tn-pair{display:flex;align-items:center;gap:2px;flex:0 0 auto}
.time-num .tn-in{width:56px;height:40px;text-align:center;border:1px solid var(--line);
  border-radius:10px;background:var(--bg-soft);color:var(--ink);
  font-size:20px;font-weight:800;letter-spacing:-.5px;outline:none;
  -moz-appearance:textfield}
.time-num .tn-in::-webkit-outer-spin-button,
.time-num .tn-in::-webkit-inner-spin-button{-webkit-appearance:none;margin:0}
.time-num .tn-in:focus{border-color:var(--brand);background:var(--brand-soft)}
.time-num .tn-sep{font-size:19px;font-weight:800;color:var(--ink-3);padding:0 3px}
.time-num .tn-lb{font-size:13.5px;font-weight:700;color:var(--brand-ink);white-space:nowrap}
.time-num .tn-step{display:flex;gap:6px;margin-left:auto;flex:0 0 auto}
.time-num .tn-step button{height:32px;padding:0 11px;border-radius:9px;
  border:1px solid var(--line-strong);background:var(--bg-soft);
  font-size:12.5px;font-weight:700;color:var(--ink-2)}
.time-num .tn-step button:active{background:var(--brand-soft);color:var(--brand-ink)}

.tn-range{display:flex;flex-direction:column;gap:10px}
.tn-range .tn-cap{display:block;margin-bottom:5px;font-size:12px;font-weight:700;color:var(--ink-3)}

/* ---------- 하단 고정 '행동 만들기' ----------
   2026-11-02 실기기 피드백 — 배너가 너무 커서 목록 보이는 영역을 많이 먹었다.
   배너 높이를 ~92px → ~70px 로 줄이고, 그만큼 스크롤 아래 예약 여백도 줄인다
   (104 → 82). 두 값은 **함께** 바꿔야 한다 — 하나만 바꾸면 마지막 카드가
   배너에 가리거나 빈 공간이 뜬다. */
.pb-nav-cta{padding-bottom:calc(var(--nav-h) + var(--safe-b) + 82px)}
/* 탭바 위에 얹히므로 safe-area 여백은 탭바가 이미 먹었다 — 아래 여백을 줄인다 */
.cta-fixed.with-nav{padding-top:8px;padding-bottom:8px}
.create-cta.fixed{margin-top:0;padding:11px 14px;background:var(--brand);border-color:transparent;
  box-shadow:0 8px 24px rgba(23,177,169,.28)}
.create-cta.fixed .plus{width:32px;height:32px;border-radius:10px}
.create-cta.fixed b{font-size:14.5px}
.create-cta.fixed i{font-size:11.5px;margin-top:2px}
.create-cta.fixed b,.create-cta.fixed > .icon{color:#fff}
.create-cta.fixed i{color:rgba(255,255,255,.86)}
.create-cta.fixed .plus{background:rgba(255,255,255,.18);color:#fff;box-shadow:none}

/* ---------- 자랑하기 상세 — 편집본 ---------- */
.brag-film{position:relative;border-radius:16px;overflow:hidden;
  background:var(--bg-sunk);aspect-ratio:16/9}
.brag-film img{width:100%;height:100%;object-fit:cover;display:block}
.brag-film::after{content:'';position:absolute;inset:0;
  background:linear-gradient(180deg,rgba(0,0,0,.28),rgba(0,0,0,0) 42%,rgba(0,0,0,.5))}
.brag-film .pl{position:absolute;left:50%;top:50%;transform:translate(-50%,-50%);z-index:2;
  width:64px;height:64px;border-radius:50%;background:rgba(255,255,255,.92);color:#1c1c1c;
  display:grid;place-items:center;box-shadow:0 6px 22px rgba(0,0,0,.28)}
.brag-film .pl .icon{width:28px;height:28px;margin-left:3px;fill:currentColor;stroke:none}
.brag-film .lb{position:absolute;left:14px;bottom:12px;z-index:2;color:#fff;
  font-size:14px;font-weight:700;letter-spacing:-.3px;text-shadow:0 1px 3px rgba(0,0,0,.5)}
.brag-film .dur{position:absolute;right:12px;bottom:12px;z-index:2;color:#fff;
  font-size:12px;font-weight:700;background:rgba(0,0,0,.55);border-radius:7px;padding:3px 8px}

/* ---------- 기간(시작일~종료일) 선택 ----------
   날짜 입력은 브라우저 기본 폭이 넓어서, flex 안에 그냥 두면
   min-width:auto 때문에 칸이 화면 밖으로 삐져나간다.
   그리드로 폭을 반씩 나누고 min-width 를 풀어 확실히 가둔다. */
.date-range{display:grid;grid-template-columns:1fr 1fr;gap:9px;align-items:end}
.date-range .dr-f{min-width:0}
.date-range .time-row{gap:7px;padding:0 11px;min-width:0}
.date-range .time-row > .icon{flex:0 0 auto}
.date-range .time-row input,
.date-range .input{
  width:100%;min-width:0;font-size:14.5px;
  /* 기본 달력 위젯의 여백까지 계산에 넣어야 폭이 정확해진다 */
  box-sizing:border-box;
}
.date-range input[type="date"]::-webkit-date-and-time-value{text-align:left;margin:0}
.date-range input[type="date"]::-webkit-calendar-picker-indicator{padding:0;margin-left:2px}
/* 아주 좁은 화면(≤360px)에서는 위아래로 쌓아 확실히 넘치지 않게 한다 */
@media (max-width:360px){
  .date-range{grid-template-columns:1fr;gap:12px}
}

/* ============================================================
   나의 이야기 재생 (스토리 플레이어)
   흔적을 이어 붙인 '자동 편집 영상'을 장면 슬라이드쇼로 보여준다.
   진행바·확대(켄번즈)는 CSS 애니메이션이고, 일시정지는
   animation-play-state 로 함께 멈춘다 (JS 타이머 없음).
   ============================================================ */
.sp-mask{position:absolute;inset:0;z-index:80;background:#07101c;
  overflow:hidden;animation:fade .18s}
.sp-mask .sp-stage{position:absolute;inset:0}
.sp-mask .sp-card{position:absolute;inset:0;overflow:hidden}
.sp-mask .sp-img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;
  transform-origin:50% 55%}
.sp-mask .sp-veil{position:absolute;inset:0;
  background:linear-gradient(180deg,rgba(7,16,28,.72) 0%,rgba(7,16,28,.18) 34%,
    rgba(7,16,28,.46) 68%,rgba(7,16,28,.88) 100%)}
@keyframes sp-zoom{from{transform:scale(1)}to{transform:scale(1.09)}}

/* 장면 자막 — 흔적 장면은 아래쪽, 표지·마무리는 가운데 */
.sp-mask .sp-txt{position:absolute;left:22px;right:22px;bottom:86px;color:#fff;z-index:2;
  animation:sp-in .5s cubic-bezier(.32,.72,0,1) both}
.sp-mask .sp-txt.mid{top:50%;bottom:auto;transform:translateY(-50%);text-align:center}
@keyframes sp-in{from{opacity:0;transform:translateY(12px)}to{opacity:1;transform:none}}
.sp-mask .sp-txt.mid{animation-name:sp-in-mid}
@keyframes sp-in-mid{from{opacity:0}to{opacity:1}}
.sp-mask .sp-kicker{display:block;font-size:12px;font-weight:700;letter-spacing:2px;
  color:rgba(255,255,255,.8)}
.sp-mask .sp-txt h2{margin:8px 0 0;font-size:28px;font-weight:800;letter-spacing:-.8px;
  line-height:1.22}
.sp-mask .sp-line{display:block;width:26px;height:2px;border-radius:2px;background:var(--brand);
  margin:12px 0}
.sp-mask .sp-txt.mid .sp-line{margin:12px auto}
.sp-mask .sp-txt p{margin:0;font-size:14px;font-weight:600;color:rgba(255,255,255,.9);
  line-height:1.55}
.sp-mask .sp-day{display:inline-block;height:23px;padding:0 10px;border-radius:999px;
  background:var(--brand);font-size:11.5px;font-weight:800;letter-spacing:1px;line-height:23px}
.sp-mask .sp-date{display:block;margin-top:9px;font-size:12.5px;font-weight:700;
  color:rgba(255,255,255,.82)}
.sp-mask .sp-quote{margin-top:8px !important;font-size:17px !important;font-weight:700 !important;
  letter-spacing:-.3px;color:#fff !important;
  display:-webkit-box;-webkit-line-clamp:3;-webkit-box-orient:vertical;overflow:hidden}
.sp-mask .sp-voice{display:inline-flex;align-items:center;gap:5px;margin-top:10px;
  font-size:11.5px;font-weight:700;color:rgba(255,255,255,.82)}
.sp-mask .sp-chips{display:flex;flex-wrap:wrap;justify-content:center;gap:7px;margin-top:16px}
.sp-mask .sp-chips span{display:inline-flex;align-items:center;gap:5px;height:28px;padding:0 11px;
  border-radius:999px;background:rgba(255,255,255,.16);font-size:12px;font-weight:700;
  backdrop-filter:blur(6px)}
.sp-mask .sp-chips .icon{width:13px;height:13px}

/* 상단 진행바 — 장면 하나가 한 칸 */
.sp-mask .sp-bars{position:absolute;top:10px;left:12px;right:12px;
  z-index:5;display:flex;gap:4px}
.sp-mask .sp-bars i{flex:1;height:3px;border-radius:3px;background:rgba(255,255,255,.28);
  overflow:hidden}
.sp-mask .sp-bars i b{display:block;width:0;height:100%;border-radius:3px;background:#fff}
.sp-mask .sp-bars i.done b{width:100%}
@keyframes sp-fill{from{width:0}to{width:100%}}

.sp-mask .sp-x{position:absolute;top:24px;right:12px;z-index:6;
  width:38px;height:38px;display:grid;place-items:center;border-radius:50%;color:#fff;
  background:rgba(7,16,28,.42)}
.sp-mask .sp-x:active{background:rgba(7,16,28,.7)}

/* 좌우 절반은 이전/다음 장면 — 가운데 버튼과 겹치지 않게 아래를 비워 둔다 */
.sp-mask .sp-half{position:absolute;top:34px;bottom:74px;width:38%;z-index:4;background:none}
.sp-mask .sp-half.l{left:0}
.sp-mask .sp-half.r{right:0}

.sp-mask .sp-foot{position:absolute;left:0;right:0;bottom:0;z-index:6;
  padding:0 16px calc(16px + var(--safe-b)) 16px;height:64px;
  display:flex;align-items:center;justify-content:space-between;gap:12px}
.sp-mask .sp-toggle{display:inline-flex;align-items:center;gap:7px;height:36px;padding:0 14px;
  border-radius:999px;background:rgba(255,255,255,.94);color:#0d1b2a;
  font-size:12.5px;font-weight:800}
.sp-mask .sp-toggle .icon{width:15px;height:15px}
.sp-mask .sp-meta{flex:1;min-width:0;text-align:right;color:rgba(255,255,255,.78);
  font-size:11.5px;font-weight:700;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}

/* ============================================================
   광고 자리 (행동방 상세 '방 소개' 아래)
   외부 광고를 붙일 공간만 확보해 둔 현수막형 배너 영역.
   광고가 아직 없을 때는 빗금 배경 + 안내 문구가 자리를 지키고,
   실제 광고가 들어오면 .ad-slot 에 'filled' 를 붙여 안내를 감춘다.
   ============================================================ */
.ad-slot{--ad-h:100px;margin-top:22px;padding-top:16px;border-top:1px solid var(--line)}
/* 가로로 꽉 차는 고정 높이 — 광고가 늦게 떠도 화면이 밀리지 않는다 */
.ad-slot .ad-box{width:100%;height:var(--ad-h);border-radius:12px;overflow:hidden;
  display:flex;align-items:center;justify-content:center;
  border:1px dashed var(--line-strong);background:var(--bg-soft);
  background-image:repeating-linear-gradient(135deg,
    rgba(148,163,184,.10) 0 8px, transparent 8px 16px)}
.ad-slot .ad-ph{font-size:12px;font-weight:700;color:var(--ink-4);letter-spacing:-.2px}
/* 광고가 실제로 들어오면 안내용 장식은 걷어낸다 */
.ad-slot.filled .ad-box{border:0;background:none;background-image:none}
.ad-slot.filled .ad-ph{display:none}
.ad-slot .ad-box > iframe,
.ad-slot .ad-box > ins,
.ad-slot .ad-box > img{display:block;width:100%;height:100%;border:0;object-fit:cover}
/* 관리자가 등록한 광고가 실제로 걸린 경우 — '광고' 표시를 함께 노출한다 */
.ad-slot.filled{position:relative}
.ad-slot.filled .ad-box{cursor:pointer}
.ad-mark{position:absolute;right:8px;bottom:8px;z-index:2;
  font-size:10px;font-weight:700;letter-spacing:-.2px;color:#fff;
  background:rgba(15,23,42,.55);border-radius:5px;padding:2px 6px;pointer-events:none}
/* 큰 화면에서는 배너를 조금 더 높게 */
@media (min-width:420px){ .ad-slot{--ad-h:110px} }

/* ============================================================
   멤버십 (무료 회원 / PRO 멤버십)
   같은 화면이라도 로그인한 계정의 요금제에 따라 다르게 보인다.
   ============================================================ */
/* 프로필 이름 옆 PRO 칩 */
.pro-chip{display:inline-flex;align-items:center;height:17px;padding:0 6px;margin-left:6px;
  border-radius:5px;background:var(--brand);color:#fff;
  font-size:10px;font-weight:800;letter-spacing:.5px;vertical-align:2px}

.ms-card{margin-top:16px;border:1px solid var(--line);border-radius:16px;overflow:hidden;
  background:var(--bg-soft)}
.ms-card.pro{border-color:var(--brand);background:var(--brand-soft)}
.ms-card .ms-top{display:flex;align-items:center;gap:12px;padding:14px 15px}
.ms-card .ms-k{display:block;font-size:11px;font-weight:800;letter-spacing:.6px;
  color:var(--ink-3)}
.ms-card.pro .ms-k{color:var(--brand-ink)}
.ms-card .ms-top b{display:block;margin-top:3px;font-size:14.5px;font-weight:800;
  letter-spacing:-.3px}
.ms-card .ms-top > div{flex:1;min-width:0}
.ms-card .ms-up{height:32px;padding:0 13px;border-radius:999px;background:var(--ink);
  color:#fff;font-size:12.5px;font-weight:800;flex:0 0 auto}
.ms-card .ms-up:active{opacity:.85}
.ms-card .ms-badge{display:inline-flex;align-items:center;gap:4px;height:28px;padding:0 11px;
  border-radius:999px;background:var(--brand);color:#fff;font-size:11.5px;font-weight:800;
  flex:0 0 auto}
.ms-card .ms-badge .icon{width:13px;height:13px}

/* (2026-09-10) 멤버십 카드 안의 잠긴 기능 목록(.ms-list/.ms-f)은 클라이언트 요청으로 없앴다 */

/* 로그인 화면 — 시안 확인용 데모 계정 바로가기 */
.demo-accts{display:grid;grid-template-columns:1fr 1fr;gap:9px;margin-top:14px}
.demo-accts button{padding:11px 10px;border-radius:12px;border:1px solid var(--line);
  background:var(--bg-soft);text-align:left}
.demo-accts button:active{background:var(--bg-sunk)}
.demo-accts button b{display:block;font-size:12.5px;font-weight:800;letter-spacing:-.2px}
.demo-accts button span{display:block;margin-top:3px;font-size:11px;font-weight:700;
  color:var(--ink-3)}

/* ---------- 유료 행동방 결제 ---------- */
/* 시안임을 알리는 띠 — 실제 결제로 오해하지 않도록 맨 위에 둔다 */
.pay-mock{display:flex;gap:9px;align-items:flex-start;background:#fdf3e3;color:#8a5a12;
  border-radius:12px;padding:12px 14px;font-size:12.5px;line-height:1.6;margin:0 0 16px}
.pay-mock svg{flex:0 0 auto;margin-top:2px}

/* 어떤 방을 결제하는지 */
.pay-room{display:flex;gap:12px;align-items:center;background:#fff;border:1px solid var(--line);
  border-radius:14px;padding:12px;margin-bottom:14px}
.pay-room img{width:66px;height:66px;border-radius:11px;object-fit:cover;flex:0 0 auto}
.pay-room .t{min-width:0}
.pay-badge{display:inline-block;background:#fdf3e3;color:#a9701a;font-size:10.5px;font-weight:800;
  padding:2px 7px;border-radius:6px;margin-bottom:5px}
.pay-room b{display:block;font-size:15.5px;font-weight:800;letter-spacing:-.4px;line-height:1.3}
.pay-room em{display:block;font-style:normal;font-size:12px;color:var(--ink-3);margin-top:4px}

/* 금액 */
.pay-amt{background:var(--bg-soft);border-radius:14px;padding:14px 16px;margin-bottom:20px}
.pay-amt .row-between{font-size:13px;color:var(--ink-2);padding:4px 0}
.pay-amt .row-between b{font-weight:700;color:var(--ink)}
.pay-total{display:flex;align-items:center;justify-content:space-between;
  border-top:1px solid var(--line-strong);margin-top:9px;padding-top:11px;font-size:13.5px;color:var(--ink-2)}
.pay-total b{font-size:21px;font-weight:800;letter-spacing:-.6px;color:var(--ink)}
.pay-hint{font-size:11.5px;color:var(--ink-3);line-height:1.6;margin:10px 2px 0}

.mini-h2{font-size:13.5px;font-weight:800;letter-spacing:-.3px;margin:0 2px 10px}

/* 결제하면 열리는 기능 */
.pay-perks{list-style:none;margin:0 0 4px;padding:0;background:#fff;
  border:1px solid var(--line);border-radius:14px;overflow:hidden}
.pay-perks li{display:flex;gap:10px;align-items:center;padding:11px 14px;font-size:13px;
  color:var(--ink-2);border-top:1px solid var(--line)}
.pay-perks li:first-child{border-top:0}
.pay-perks li svg{flex:0 0 auto;color:var(--brand)}
.pay-perks b{font-weight:800;color:var(--ink)}

/* 결제 수단 */
.pay-methods{display:grid;gap:8px;margin-bottom:20px}
.pay-m{display:flex;gap:11px;align-items:center;width:100%;text-align:left;
  background:#fff;border:1px solid var(--line);border-radius:12px;padding:12px 14px}
.pay-m .rd{width:20px;height:20px;border-radius:50%;border:1.5px solid var(--line-strong);
  display:grid;place-items:center;flex:0 0 auto;color:#fff}
.pay-m.on{border-color:var(--brand);box-shadow:0 0 0 1px var(--brand) inset}
.pay-m.on .rd{background:var(--brand);border-color:var(--brand)}
.pay-m .c{min-width:0}
.pay-m b{display:block;font-size:13.5px;font-weight:700}
.pay-m em{display:block;font-style:normal;font-size:11.5px;color:var(--ink-3);margin-top:2px}

/* 동의 */
.pay-agree{display:flex;gap:10px;align-items:flex-start;width:100%;text-align:left;
  background:transparent;border:0;padding:2px;font-size:12.5px;color:var(--ink-2);line-height:1.6}
.pay-agree .bx{width:19px;height:19px;border-radius:6px;border:1.5px solid var(--line-strong);
  display:grid;place-items:center;flex:0 0 auto;margin-top:1px;color:#fff}
.pay-agree.on .bx{background:var(--brand);border-color:var(--brand)}
.pay-agree b{font-weight:700;color:var(--ink);text-decoration:underline}

/* 행동방 상세 — 유료 안내 / 결제완료 */
.paid-note{display:flex;gap:10px;align-items:flex-start;background:#fdf3e3;color:#8a5a12;
  border-radius:12px;padding:12px 14px;margin:14px 0 0}
.paid-note.done{background:var(--brand-soft);color:var(--brand-ink)}
.paid-note svg{flex:0 0 auto;margin-top:2px}
.paid-note b{display:block;font-size:13px;font-weight:800;margin-bottom:3px}
.paid-note span{display:block;font-size:12px;line-height:1.6;opacity:.9}

/* ---------- 친구 대화방 (DM) ---------- */
/* 카카오톡처럼 내 말은 오른쪽, 상대 말은 왼쪽. 아래가 최신이다 */
.dm-top-av{width:30px;height:30px;flex:0 0 auto}
.dm-scroll{background:var(--bg-soft)}
.dm-pad{padding:16px 16px calc(14px + var(--safe-b))}

/* 날짜 구분선 */
.dm-date{display:flex;justify-content:center;margin:6px 0 16px}
.dm-date span{background:rgba(11,20,36,.07);color:var(--ink-3);font-size:11.5px;font-weight:600;
  padding:4px 12px;border-radius:999px}

/* 한 줄 = 한 메시지 */
.dm-line{display:flex;align-items:flex-end;gap:8px;margin-bottom:10px}
.dm-line.run{margin-top:-6px}
.dm-line.me{justify-content:flex-end}

.dm-av{width:36px;height:36px;border-radius:13px;object-fit:cover;flex:0 0 auto;align-self:flex-start}
.dm-av-sp{width:36px;flex:0 0 auto}          /* 이어진 메시지 — 프로필 자리만 비운다 */
.dm-c{min-width:0;max-width:calc(100% - 92px)}
.dm-name{display:block;font-size:12px;font-weight:600;color:var(--ink-3);margin:0 0 5px 3px}
.dm-row{display:flex;align-items:flex-end;gap:6px}

.dm-bubble{display:inline-block;padding:9px 13px;font-size:14px;line-height:1.5;
  word-break:break-word;white-space:pre-wrap;background:#fff;color:var(--ink);
  border-radius:4px 16px 16px 16px;box-shadow:0 1px 2px rgba(11,20,36,.06)}
.dm-line.run .dm-bubble{border-radius:16px}
.dm-line.me .dm-bubble{max-width:calc(100% - 64px);background:var(--brand);color:#fff;
  border-radius:16px 4px 16px 16px}
.dm-line.me.run .dm-bubble{border-radius:16px}

.dm-t{flex:0 0 auto;font-size:10.5px;color:var(--ink-3);white-space:nowrap;padding-bottom:2px}

/* 첫 대화 안내 */
.dm-empty{text-align:center;padding:48px 20px 34px}
.dm-empty .avatar.lg{width:76px;height:76px;margin:0 auto 14px}
.dm-empty b{display:block;font-size:17px;font-weight:800;letter-spacing:-.4px}
.dm-empty p{margin:8px 0 0;font-size:13px;color:var(--ink-3);line-height:1.65}

.dm-composer{background:#fff}

/* 친구 목록 — 마지막 메시지 · 안 읽은 수 */
.friend-row .fr-t{flex:1;min-width:0}
.friend-row .fr-t b{display:block;font-size:15.5px;font-weight:700;letter-spacing:-.3px;
  overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.fr-last{display:block;font-size:12.5px;color:var(--ink-3);margin-top:3px;
  overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.fr-un{flex:0 0 auto;min-width:20px;height:20px;padding:0 6px;border-radius:999px;
  background:var(--red);color:#fff;font-size:11px;font-weight:800;
  display:grid;place-items:center}

/* ───────────────────────────────────────────────────────────────
   앱(Capacitor)에서 사업자정보 푸터를 숨긴다.

   같은 규칙이 css/site.css 에도 있지만 site.css 는 sync-www.sh 가
   번들에서 제외한다 — 그래서 앱에서는 그 규칙이 로드되지 않아
   푸터가 그대로 노출됐다(2026-10-27 확인).
   푸터에는 'PRO 멤버십 구매' 링크가 있어 앱에 보이면
   Apple 3.1.1 / Google Play 결제정책 위반이다. 링크 대상인
   store.html 도 번들에 없어 눌러도 깨진다.
   .is-native 는 js/native.js 가 붙인다.
   ─────────────────────────────────────────────────────────────── */
.is-native #site-footer{ display:none !important; }

/* ---------- 이야기 편집 템플릿 (2026-11-02) ----------
   고르는 자리는 행동상세 '남은 기간' 아래. 알람음 목록(.sound-row)과
   같은 생김새를 쓰되, 왼쪽 칩이 템플릿 색감을 미리 보여 준다. */
.tpl-list{border:1px solid var(--line);border-radius:var(--radius);overflow:hidden;
  background:var(--bg)}
.tpl-row{display:flex;align-items:center;gap:11px;padding:13px 14px;
  border-bottom:1px solid var(--line);width:100%;text-align:left}
.tpl-row:last-child{border-bottom:0}
.tpl-row.on{background:var(--brand-soft)}
.tpl-row .t{flex:1;min-width:0}
.tpl-row .t b{display:block;font-size:14.5px;font-weight:700;color:var(--ink)}
.tpl-row .t span{display:block;font-size:11.5px;color:var(--ink-3);margin-top:3px}
.tpl-row .rd{width:22px;height:22px;flex:0 0 auto;border-radius:50%;
  border:1.5px solid var(--line-strong);display:grid;place-items:center;color:#fff}
.tpl-row.on .rd{background:var(--brand);border-color:var(--brand)}
.tpl-row.locked{background:var(--bg-soft)}
.tpl-row.locked .t b{color:var(--ink-3)}
.tpl-row.locked .t span{color:var(--ink-4)}
.tpl-row.locked:active{opacity:.8}
.tpl-row.locked > span.pro-tag{margin-left:auto}
/* 미리보기 칩 — 각 템플릿의 분위기를 색으로만 요약한다 */
.tpl-chip{width:34px;height:34px;flex:0 0 auto;border-radius:10px;
  border:1px solid rgba(0,0,0,.06)}
.tpl-chip.tpl-basic{background:linear-gradient(135deg,#f3f7fa,#dfe9ef)}
.tpl-chip.tpl-film {background:linear-gradient(135deg,#1b2430,#070d14)}
.tpl-chip.tpl-diary{background:linear-gradient(135deg,#fff6e6,#f2dfc2)}
.tpl-chip.tpl-bold {background:linear-gradient(135deg,#17b1a9,#0d6f8f)}

/* ---- 재생 화면에 입히는 템플릿 ----
   기본(.sp-tpl-basic)은 위에 정의된 그대로라 따로 쓸 것이 없다. */

/* 필름 — 위아래 레터박스 + 낮은 채도, 자막은 작고 차분하게 */
.sp-mask.sp-tpl-film{background:#05080c}
.sp-mask.sp-tpl-film .sp-img{filter:saturate(.72) contrast(1.06)}
.sp-mask.sp-tpl-film .sp-card::before,
.sp-mask.sp-tpl-film .sp-card::after{content:'';position:absolute;left:0;right:0;
  height:8.5%;background:#05080c;z-index:1}
.sp-mask.sp-tpl-film .sp-card::before{top:0}
.sp-mask.sp-tpl-film .sp-card::after{bottom:0}
.sp-mask.sp-tpl-film .sp-txt h2{font-size:25px;font-weight:700;letter-spacing:0}
.sp-mask.sp-tpl-film .sp-quote{font-size:15.5px !important;font-weight:600 !important;
  letter-spacing:0}
.sp-mask.sp-tpl-film .sp-day{background:rgba(255,255,255,.92);color:#05080c}
.sp-mask.sp-tpl-film .sp-line{background:rgba(255,255,255,.85)}

/* 일기 — 날짜를 가장 크게, 자막은 종이 위에 쓴 느낌(연한 베이지) */
.sp-mask.sp-tpl-diary .sp-veil{background:linear-gradient(180deg,
  rgba(26,20,12,.60) 0%,rgba(26,20,12,.12) 36%,
  rgba(26,20,12,.42) 66%,rgba(26,20,12,.90) 100%)}
.sp-mask.sp-tpl-diary .sp-date{font-size:21px;font-weight:800;color:#fff;margin-top:10px;
  letter-spacing:-.4px}
.sp-mask.sp-tpl-diary .sp-day{background:rgba(255,246,230,.94);color:#4a3a22;
  font-weight:700;letter-spacing:.5px}
.sp-mask.sp-tpl-diary .sp-quote{font-size:16px !important;font-weight:600 !important;
  color:rgba(255,250,242,.96) !important;-webkit-line-clamp:4}
.sp-mask.sp-tpl-diary .sp-line{background:#e8c98f}
.sp-mask.sp-tpl-diary .sp-kicker{color:rgba(255,246,230,.85)}

/* 강조 — 브랜드 컬러를 깔고 자막을 굵고 크게. 전환도 빠르다(장면 2.4초) */
.sp-mask.sp-tpl-bold .sp-veil{background:linear-gradient(180deg,
  rgba(13,111,143,.72) 0%,rgba(13,111,143,.20) 34%,
  rgba(8,62,80,.58) 70%,rgba(5,40,52,.94) 100%)}
.sp-mask.sp-tpl-bold .sp-txt h2{font-size:33px;font-weight:800;letter-spacing:-1.2px;
  line-height:1.14}
.sp-mask.sp-tpl-bold .sp-quote{font-size:20px !important;font-weight:800 !important;
  letter-spacing:-.6px;-webkit-line-clamp:3}
.sp-mask.sp-tpl-bold .sp-day{background:#fff;color:#0d6f8f;height:25px;line-height:25px;
  font-size:12px}
.sp-mask.sp-tpl-bold .sp-line{width:40px;height:3px;background:#fff}
.sp-mask.sp-tpl-bold .sp-bars i b{background:#fff}