/* fri4666 디자인 시스템 — "Mono Editorial" · deep teal.
   제목/숫자=Song Myung(명조), 본문/UI=IBM Plex Sans KR. 색은 var(--토큰)만 사용.
   라이트 기본, 가장 바깥(html)에 data-theme="dark" 로 다크. */
@import url('https://fonts.googleapis.com/css2?family=IBM+Plex+Sans+KR:wght@300;400;500;600;700&family=Song+Myung&display=swap');

:root{
  --bg:#F2F1EE; --bg-2:#EAE8E2; --surface:#FFFFFF; --surface-2:#F0EFEB;
  --border:#E2E0DA; --border-2:#ECEAE3; --ink-line:#1A1A19;
  --ink:#1A1A19; --ink-2:#56544E; --ink-3:#76746E; --muted:#A8A6A0; --muted-2:#B4B2AB;
  --accent:#1E6E68; --accent-2:#155954; --accent-soft:#E5EAE9; --accent-border:#C3DDD9;
  --pos:#1E6E68; --neg:#B5462F; --warn:#B8862F;
  --btn:#1A1A19; --btn-ink:#FFFFFF; --on-accent:#FFFFFF;
  --track:#E4E2DB; --shadow-pop:0 22px 50px rgba(0,0,0,.16);
  --nav-bg:transparent; --nav-ink:#56544E; --nav-meta:#A8A6A0; --nav-weight:500;
}
[data-theme="dark"]{
  --bg:#171513; --bg-2:#100F0D; --surface:#201E1B; --surface-2:#2A2724;
  --border:#34302B; --border-2:#2C2925; --ink-line:#3DAA9F;
  --ink:#F2EFE8; --ink-2:#C6C2B8; --ink-3:#9C988E; --muted:#75716A; --muted-2:#615D57;
  --accent:#3DAA9F; --accent-2:#6FD0C5; --accent-soft:#1C2C2A; --accent-border:#2F4945;
  --pos:#4FB89D; --neg:#E08368; --warn:#D8A857;
  --btn:#F2EFE8; --btn-ink:#171513; --on-accent:#0E1413;
  --track:#34302B; --shadow-pop:0 22px 54px rgba(0,0,0,.6);
  --nav-bg:transparent; --nav-ink:#C6C2B8; --nav-meta:#75716A;
}

*{box-sizing:border-box}
html,body{margin:0}
body{
  font-family:'IBM Plex Sans KR',sans-serif; background:var(--bg-2); color:var(--ink);
  -webkit-font-smoothing:antialiased; font-size:14px;
}
a{color:inherit}

@keyframes fri-pulse{0%{transform:scale(.7);opacity:.5}100%{transform:scale(2.3);opacity:0}}
@keyframes fri-rise{0%{opacity:0;transform:translateY(14px) scale(.98)}100%{opacity:1;transform:none}}
@keyframes fri-shimmer{0%{background-position:-260px 0}100%{background-position:360px 0}}
@keyframes fri-pop{0%{opacity:0;transform:scale(.94)}60%{transform:scale(1.02)}100%{opacity:1;transform:scale(1)}}
@keyframes fri-fade{0%{opacity:0;transform:translateY(8px)}100%{opacity:1;transform:none}}

/* ===================== APP SHELL ===================== */
.app{display:flex;min-height:100vh;background:var(--bg);color:var(--ink)}
.app-sidebar{
  width:256px;flex:none;background:var(--surface);border-right:1px solid var(--border);
  display:flex;flex-direction:column;padding:22px 16px;position:sticky;top:0;height:100vh;overflow:auto;
}
.app-brand{display:flex;align-items:center;gap:11px;padding:4px 8px 22px}
.app-brand-mark{width:36px;height:36px;border-radius:9px;background:var(--accent);display:flex;align-items:center;
  justify-content:center;color:var(--on-accent);font-family:'Song Myung',serif;font-size:19px;flex:none}
.app-brand-name{font-family:'Song Myung',serif;font-size:18px;color:var(--ink);line-height:1}
.app-brand-sub{font-size:10.5px;color:var(--muted);letter-spacing:.03em;margin-top:2px}
.app-eyebrow{font-size:10px;font-weight:700;letter-spacing:.11em;color:var(--muted-2);padding:0 11px 9px}
.app-nav{display:flex;flex-direction:column;gap:2px}
.app-spacer{flex:1}
.app-main{flex:1;display:flex;flex-direction:column;min-width:0}
.app-header{
  height:66px;flex:none;border-bottom:1px solid var(--border);display:flex;align-items:center;
  justify-content:space-between;padding:0 22px;background:var(--surface);position:sticky;top:0;z-index:30;gap:12px;
}
.app-content{flex:1;padding:26px 30px 48px;animation:fri-fade .35s ease both}
.app-burger{display:none;width:38px;height:38px;border-radius:9px;background:var(--surface);border:1px solid var(--border);
  color:var(--ink-2);align-items:center;justify-content:center;cursor:pointer;flex:none}
.app-scrim{display:none}

/* nav item (사이드바 링크) */
.fri-nav-item{display:flex;align-items:center;gap:11px;padding:10px 11px;border-radius:9px;text-decoration:none;
  cursor:pointer;background:var(--nav-bg);color:var(--nav-ink);font-weight:var(--nav-weight);font-size:13.5px}
.fri-nav-item:hover{background:var(--surface-2)}
.fri-nav-item[data-active="true"]{--nav-bg:var(--btn);--nav-ink:var(--btn-ink);--nav-meta:var(--btn-ink);--nav-weight:600}
.fri-nav-item .ico{flex:none;display:flex}
.fri-nav-meta{font-size:10.5px;color:var(--nav-meta);font-weight:400;margin-left:auto;opacity:.85}
.fri-nav-dot{margin-left:auto;width:6px;height:6px;border-radius:999px;background:var(--accent)}

/* ===================== TYPOGRAPHY ===================== */
.fri-display{font-family:'Song Myung',serif;font-size:27px;color:var(--ink);line-height:1.05;margin:0}
.fri-title{font-family:'Song Myung',serif;font-size:16px;color:var(--ink);margin:0}
.fri-card-title{font-family:'Song Myung',serif;font-size:17px;color:var(--ink);line-height:1.15;margin:0}
.fri-num{font-family:'Song Myung',serif;color:var(--ink);line-height:1}
.fri-sub{font-size:12px;color:var(--muted);margin:0}
.fri-eyebrow{font-size:10px;font-weight:700;letter-spacing:.11em;color:var(--muted-2)}
.fri-label{font-size:11.5px;color:var(--muted)}
.fri-en{font-size:11.5px;color:var(--muted)}

/* ===================== CARDS ===================== */
.fri-card{background:var(--surface);border:1px solid var(--border);border-radius:13px;padding:18px}
.fri-card--accent{border-color:var(--accent);position:relative;overflow:hidden}
.fri-card--accent::before{content:"";position:absolute;top:0;left:0;width:3px;height:100%;background:var(--accent)}
.fri-card--link{cursor:pointer;transition:transform .14s ease,box-shadow .14s ease,border-color .14s ease}
.fri-card--link:hover{transform:translateY(-2px);box-shadow:0 10px 26px rgba(0,0,0,.08);border-color:var(--accent-border)}

.fri-icon{width:44px;height:44px;border-radius:10px;background:var(--surface-2);color:var(--accent);
  display:flex;align-items:center;justify-content:center;flex:none}
.fri-icon--accent{background:var(--accent-soft);color:var(--accent)}

/* ===================== BUTTONS ===================== */
.fri-btn{display:inline-flex;align-items:center;justify-content:center;gap:7px;background:var(--btn);color:var(--btn-ink);
  border:none;border-radius:9px;padding:10px 16px;font:600 13px 'IBM Plex Sans KR',sans-serif;cursor:pointer;
  text-decoration:none;transition:opacity .14s ease,transform .1s ease}
.fri-btn:hover{opacity:.9}
.fri-btn:active{transform:translateY(1px)}
.fri-btn--ghost{background:transparent;color:var(--ink-2);border:1px solid var(--border)}
.fri-btn--ghost:hover{background:var(--surface-2);opacity:1}
.fri-btn--danger{background:transparent;color:var(--neg);border:1px solid var(--border)}
.fri-btn--danger:hover{background:var(--accent-soft);border-color:var(--neg);opacity:1}
.fri-btn--icon{width:38px;height:38px;padding:0;background:var(--surface);border:1px solid var(--border);color:var(--ink-2)}
.fri-btn--icon:hover{background:var(--surface-2);opacity:1}
.fri-btn--sm{padding:7px 12px;font-size:12px}

/* ===================== CHIPS · ROLES · BADGES ===================== */
.fri-chip{display:inline-flex;align-items:center;gap:5px;font:600 10.5px 'IBM Plex Sans KR',sans-serif;
  padding:4px 9px;border-radius:6px;border:1px solid var(--border);background:var(--surface-2);color:var(--ink-3)}
.fri-chip--public{background:var(--accent-soft);color:var(--accent-2);border-color:var(--accent-border)}
.fri-chip--private{background:var(--surface-2);color:var(--ink-3);border-color:var(--border)}
.fri-chip--ai{background:var(--accent-soft);color:var(--accent-2);border-color:var(--accent-border)}
.fri-role{display:inline-flex;align-items:center;font:600 10.5px 'IBM Plex Sans KR',sans-serif;padding:3px 9px;border-radius:999px}
.fri-role--owner{background:var(--accent-soft);color:var(--accent-2);border:1px solid var(--accent-border)}
.fri-role--admin{background:var(--surface-2);color:var(--ink-2);border:1px solid var(--border)}
.fri-role--member{background:var(--surface-2);color:var(--ink-3);border:1px solid var(--border)}
.fri-role--guest{background:transparent;color:var(--muted);border:1px solid var(--border)}

/* ===================== INPUT · TOGGLE · SEGMENT ===================== */
.fri-input{display:flex;align-items:center;gap:10px;background:var(--bg);border:1px solid var(--border);border-radius:12px;padding:9px 10px 9px 16px}
.fri-input input,.fri-input textarea{flex:1;border:none;outline:none;background:transparent;font-family:'IBM Plex Sans KR',sans-serif;font-size:13px;color:var(--ink)}
.fri-field{width:100%;background:var(--bg);border:1px solid var(--border);border-radius:10px;padding:10px 13px;
  font-family:'IBM Plex Sans KR',sans-serif;font-size:13.5px;color:var(--ink);outline:none}
.fri-field:focus{border-color:var(--accent);box-shadow:0 0 0 3px var(--accent-soft)}
.fri-toggle{width:38px;height:22px;border-radius:999px;background:var(--track);position:relative;cursor:pointer;flex:none;border:none;display:inline-block;transition:background .16s ease}
.fri-toggle[data-on="true"]{background:var(--accent)}
.fri-toggle-knob{position:absolute;top:2px;left:2px;width:18px;height:18px;border-radius:999px;background:var(--surface);
  box-shadow:0 1px 2px rgba(0,0,0,.25);transition:left .16s ease}
.fri-toggle[data-on="true"] .fri-toggle-knob{left:18px}
.fri-seg{display:inline-flex;border:1px solid var(--border);border-radius:9px;padding:2px;background:var(--surface)}
.fri-seg-on{padding:6px 13px;border-radius:7px;background:var(--btn);color:var(--btn-ink);font-weight:600;font-size:12.5px}
.fri-seg-off{padding:6px 13px;border-radius:7px;background:transparent;border:none;color:var(--ink-3);font-weight:500;font-size:12.5px;cursor:pointer}

/* ===================== TABLE ===================== */
.fri-table{background:var(--surface);border:1px solid var(--border);border-radius:14px;overflow:hidden}
.fri-thead{display:grid;padding:11px 18px;border-bottom:1px solid var(--border);font-size:11px;font-weight:600;color:var(--muted);letter-spacing:.02em}
.fri-row{display:grid;align-items:center;padding:14px 18px;border-bottom:1px solid var(--border-2)}
.fri-row:last-child{border-bottom:none}

/* ===================== MISC ===================== */
.fri-divider{border:none;border-top:1px solid var(--border-2);margin:0}
.fri-grid-2{display:grid;grid-template-columns:1fr 1fr;gap:16px}
.fri-grid-3{display:grid;grid-template-columns:repeat(3,1fr);gap:18px}
.fri-row-between{display:flex;align-items:center;justify-content:space-between}
.fri-progress{height:5px;border-radius:999px;background:var(--track);overflow:hidden}
.fri-progress>i{display:block;height:100%;border-radius:999px;background:var(--accent)}
.fri-skeleton{border-radius:7px;background:linear-gradient(90deg,var(--surface-2) 25%,var(--border-2) 37%,var(--surface-2) 63%);
  background-size:600px 100%;animation:fri-shimmer 1.4s infinite linear}
.fri-pop{animation:fri-pop .3s ease both}
.fri-fab{position:fixed;right:26px;bottom:26px;width:56px;height:56px;border-radius:16px;background:var(--btn);color:var(--btn-ink);
  border:none;cursor:pointer;display:flex;align-items:center;justify-content:center;box-shadow:var(--shadow-pop);z-index:40}
.fri-fab-pulse{position:absolute;inset:0;border-radius:16px;background:var(--accent);animation:fri-pulse 2s infinite ease-out;z-index:-1}
.fri-avatar{width:38px;height:38px;border-radius:8px;background:var(--accent-soft);color:var(--accent);
  display:flex;align-items:center;justify-content:center;font-weight:700;font-size:13px;flex:none}
.fri-muted{color:var(--muted)}
.fri-empty{color:var(--ink-3);font-size:13px;padding:28px 6px;text-align:center}

.fri-stack{display:flex;flex-direction:column}
.fri-pos{color:var(--pos)}
.fri-neg{color:var(--neg)}
.fri-mrow:active{background:var(--surface-2)}

/* ===================== 모바일 크롬 (하단 탭바 · 헤더 로고/뒤로) ===================== */
.app-mobile-only{display:none}
.app-tabbar{display:none;position:fixed;left:0;right:0;bottom:0;height:64px;z-index:50;
  border-top:1px solid var(--border);background:var(--surface);padding:6px 4px 0;align-items:flex-start}
.app-tab{flex:1;display:flex;flex-direction:column;align-items:center;gap:3px;border:none;background:transparent;
  cursor:pointer;color:var(--nav-ink);padding:6px 0;text-decoration:none;font-size:10px;font-weight:500}
.app-tab[data-active="true"]{color:var(--accent)}
.app-back{display:flex;align-items:center;gap:5px;border:none;background:transparent;color:var(--ink);
  font:600 14px 'IBM Plex Sans KR',sans-serif;cursor:pointer;padding:6px 4px;text-decoration:none}
.app-logo{display:flex;align-items:center;gap:9px;text-decoration:none}
.app-logo-mark{width:30px;height:30px;border-radius:8px;background:var(--accent);color:var(--on-accent);
  display:flex;align-items:center;justify-content:center;font-family:'Song Myung',serif;font-size:15px;flex:none}
.app-logo-name{font-family:'Song Myung',serif;font-size:17px;color:var(--ink)}

/* ===================== RESPONSIVE ===================== */
@media (max-width:900px){
  .app-desktop-only{display:none!important}
  .app-mobile-only{display:flex}
  .app-sidebar{display:none}
  .app-tabbar{display:flex}
  .app-header{padding:0 14px;height:54px}
  .app-content{padding:18px 16px 90px}      /* 하단 탭바 여유 */
  .fri-fab{bottom:82px;right:18px;width:54px;height:54px}
  .fri-grid-3,.fri-grid-2{grid-template-columns:1fr;gap:12px}
}
@media (min-width:901px){
  .fri-fab{display:none}                     /* 데스크톱엔 FAB 없음(목업 기준) */
  .app-mobile-only{display:none!important}   /* 모바일 전용(로고·뒤로·아바타·FAB)은 데스크톱에서 숨김 */
}

/* ===================== 아레나 임베드 (iframe이 셸 콘텐츠 영역을 채움) ===================== */
.app-content.is-arena{padding:0;display:flex;flex-direction:column;overflow:hidden}
.arena-embed{flex:1;min-height:0;display:flex}
.arena-frame{flex:1;width:100%;border:0;display:block;background:var(--bg);opacity:0;transition:opacity .35s ease}
.arena-frame.loaded{opacity:1}
@media (max-width:900px){
  .app-content.is-arena{padding:0 0 64px 0}   /* 하단 탭바 공간 확보 */
}

/* ===================== 모션 · 부드러움 ===================== */
/* 페이지 간 전환을 부드럽게 (지원 브라우저: Chrome 등. 미지원은 무시) */
@view-transition { navigation: auto; }

/* 값이 바뀔 때만 동작 → 첫 로드 깜빡임 없음. 테마 토글·호버를 부드럽게 */
body, .app-sidebar, .app-header, .app-tabbar, .fri-card, .fri-nav-item,
.fri-btn, .app-tab, .fri-icon, .fri-chip, .fri-role, .fri-field, .fri-input,
.fri-seg, .fri-seg-off, .fri-toggle, .fri-avatar, .fri-progress > i, .app-back, .app-logo {
  transition: background-color .26s ease, border-color .24s ease, color .2s ease, box-shadow .22s ease, transform .14s ease;
}

/* 콘텐츠 진입 — 살짝 떠오르며 페이드 */
.app-content { animation: fri-rise .42s cubic-bezier(.22,.61,.36,1) both; }
/* 카드/행 진입 — 그리드·스택의 자식이 순차로 떠오름 (CSS만; JS 지연과 병행 OK) */
.fri-grid-3 > *, .fri-grid-2 > * { animation: fri-rise .4s cubic-bezier(.22,.61,.36,1) both; }
.fri-grid-3 > *:nth-child(2),.fri-grid-2 > *:nth-child(2){animation-delay:.04s}
.fri-grid-3 > *:nth-child(3){animation-delay:.08s}
.fri-grid-3 > *:nth-child(4),.fri-grid-2 > *:nth-child(4){animation-delay:.12s}
.fri-grid-3 > *:nth-child(5){animation-delay:.16s}
.fri-grid-3 > *:nth-child(6),.fri-grid-2 > *:nth-child(6){animation-delay:.2s}
.fri-grid-3 > *:nth-child(n+7){animation-delay:.24s}

/* 사이드바 내비 항목 hover 시 살짝 들어옴 */
.fri-nav-item:hover{transform:translateX(2px)}
.fri-fab{transition:transform .16s ease, box-shadow .22s ease}
.fri-fab:hover{transform:scale(1.06)}
.fri-fab:active{transform:scale(.96)}

/* 모션 축소 선호 시 전부 끔 (접근성) */
@media (prefers-reduced-motion: reduce){
  *{animation-duration:.001ms!important;animation-iteration-count:1!important;transition-duration:.001ms!important}
}