/* FriendsHub 포털과 독립 콘텐츠 화면의 공통 색상과 기본 크기입니다. */
:root {
    --portal-ink: #253b4b;
    --portal-muted: #75828b;
    --portal-line: #e3e8e9;
    --portal-accent: #2b797a;
    --portal-paper: #f7f8f6;
    --portal-sidebar: #20384b;
    --portal-sidebar-width: 248px;
}

.portal-body, .workspace-body {
    margin: 0;
    color: var(--portal-ink);
    font-family: "Segoe UI", "Malgun Gothic", sans-serif;
    font-size: 14px;
    -webkit-font-smoothing: antialiased;
}

.portal-body { overflow: hidden; }
.portal-body *, .workspace-body * { box-sizing: border-box; }
.portal-body [hidden], .workspace-body [hidden] { display: none !important; }
.portal-body button, .portal-body input { font: inherit; }
.portal-body a { text-decoration: none; }
.portal-body button { cursor: pointer; }
.portal-body svg { width: 20px; height: 20px; fill: none; stroke: currentColor; stroke-width: 1.65; stroke-linecap: round; stroke-linejoin: round; flex: 0 0 auto; }
.portal-body :focus-visible { outline: 3px solid #66acba; outline-offset: 3px; }

/* 포털의 바깥 스크롤을 막고 작업 공간만 남은 높이를 사용합니다. */
.portal-shell { display: flex; height: 100vh; height: 100dvh; overflow: hidden; background: var(--portal-paper); }
.portal-sidebar { width: var(--portal-sidebar-width); flex: 0 0 var(--portal-sidebar-width); display: flex; flex-direction: column; background: var(--portal-sidebar); color: #e6edf1; transition: width .2s, flex-basis .2s, transform .2s; z-index: 30; }
.portal-brand { display: flex; align-items: center; gap: 12px; min-height: 98px; padding: 22px; color: #fff; white-space: nowrap; }
.portal-brand:hover { color: #fff; }
.portal-brand-mark { display: grid; place-items: center; position: relative; width: 40px; height: 40px; border-radius: 13px; background: #e4f0ec; color: #294f59; font-size: 24px; font-weight: 750; letter-spacing: -2px; flex: 0 0 40px; }
.portal-brand-mark span { display: inline; color: #c78d5d; position: absolute; right: 6px; bottom: 1px; }
.portal-brand-copy { display: flex; flex-direction: column; gap: 4px; }
.portal-brand-copy strong { font-size: 20px; letter-spacing: -.7px; font-weight: 650; }
.portal-brand-copy small { color: #9bafbb; font-size: 11px; }
.portal-sidebar-content { padding: 8px 14px; overflow-y: auto; overflow-x: hidden; flex: 1; min-height: 0; }
.portal-search { display: flex; align-items: center; gap: 8px; height: 40px; padding: 0 10px; margin: 0 0 29px; border: 1px solid #ffffff1c; border-radius: 7px; background: #ffffff08; }
.portal-search > svg { width: 15px; height: 15px; color: #a1b5c0; }
.portal-search input { border: 0; outline: 0; color: #edf3f5; width: 100%; min-width: 0; background: transparent; font-size: 12px; }
.portal-search input::placeholder { color: #9daeb9; }
.portal-search input::-webkit-search-cancel-button { display: none; }
.portal-search:focus-within { border-color: #8cb7bc; }
.portal-search button { color: #c0cfd7; border: 0; background: none; padding: 0; font-size: 19px; line-height: 1; }
.portal-nav-label { color: #93a8b6; font-size: 10px; letter-spacing: 1px; margin: 0 13px 12px; }
.portal-menu { display: flex; flex-direction: column; gap: 6px; }
.portal-menu-item { display: flex; gap: 13px; align-items: center; color: #c9d5dd; min-height: 48px; border-radius: 7px; padding: 0 14px; font-size: 13px; white-space: nowrap; }
.portal-menu-item:hover { color: #fff; background: #ffffff09; }
.portal-menu-item svg { width: 18px; height: 18px; color: #9eb5c4; }
.portal-menu-item.is-active { color: #fff; background: #3b6276; box-shadow: inset 3px 0 #9fcecc; font-weight: 600; }
.portal-menu-item.is-active svg { color: #d6eeeb; }
.portal-menu-text { flex: 1; }
.portal-menu-indicator { width: 5px; height: 5px; border-radius: 50%; background: #a4c4cb; opacity: 0; }
.has-open-tab .portal-menu-indicator { opacity: 1; }
.portal-menu-empty { margin: 18px 10px; color: #b7c8d2; line-height: 1.8; font-size: 12px; }
.portal-sidebar-footer { display: flex; align-items: center; gap: 9px; margin: 18px 25px 25px; padding-top: 18px; border-top: 1px solid #ffffff16; color: #a8bcc8; font-size: 10px; white-space: nowrap; }
.portal-footer-dot { width: 6px; height: 6px; background: #94c4b6; border-radius: 50%; }

/* 제목과 탭은 고정하고 iframe 본문이 나머지 영역을 채웁니다. */
.portal-main { display: flex; flex-direction: column; flex: 1; min-width: 0; min-height: 0; }
.portal-header { display: flex; align-items: center; gap: 18px; flex: 0 0 98px; padding: 0 30px; background: #fff; }
.portal-menu-toggle { display: grid; place-items: center; width: 36px; height: 36px; border: 1px solid var(--portal-line); border-radius: 7px; background: #fff; color: #69818f; flex: 0 0 36px; }
.portal-menu-toggle:hover { background: #f3f6f5; color: var(--portal-ink); }
.portal-menu-toggle svg { width: 19px; height: 19px; }
.portal-heading { min-width: 0; }
.portal-eyebrow { color: #89969d; font-size: 9px; letter-spacing: 1.5px; margin: 0 0 6px; }
.portal-heading h1 { margin: 0; font-size: 20px; letter-spacing: -.6px; font-weight: 650; }
.portal-header-note { margin: 0 0 0 auto; color: #89969d; font-size: 12px; }
/* 로그인 아이디를 길이에 맞춰 줄이고 로그아웃 버튼은 작은 화면에서도 남깁니다. */
.portal-account { display: flex; align-items: center; gap: 12px; margin-left: auto; min-width: 0; color: #547475; font-size: 12px; }
.portal-account-name { max-width: 180px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.portal-account form { margin: 0; flex-shrink: 0; }
.portal-account button { padding: 6px 9px; border: 1px solid var(--portal-line); border-radius: 6px; color: #69818f; background: #fff; font-size: 11px; }
.portal-tabs { flex: 0 0 auto; min-width: 0; overflow-x: auto; overflow-y: hidden; background: #fff; border-bottom: 1px solid var(--portal-line); padding: 0 25px; scrollbar-width: thin; }
.portal-tab-list { display: flex; align-items: flex-end; gap: 3px; width: max-content; min-width: 100%; min-height: 48px; padding-top: 4px; }
.portal-tab-item { display: flex; align-items: center; flex: 0 0 auto; min-width: 114px; height: 42px; border: 1px solid transparent; border-bottom: 0; border-radius: 8px 8px 0 0; position: relative; color: #8b969e; }
.portal-tab-item.is-active { background: var(--portal-paper); color: var(--portal-accent); border-color: var(--portal-line); }
.portal-tab-item.is-active::before { content: ""; height: 2px; background: var(--portal-accent); position: absolute; left: 18px; right: 18px; top: -1px; border-radius: 2px; }
.portal-tab { display: flex; align-items: center; justify-content: center; gap: 8px; flex: 1; align-self: stretch; color: inherit; border: 0; background: transparent; padding: 0 13px; font-size: 12px !important; white-space: nowrap; border-radius: 6px; }
.portal-tab svg { width: 14px; height: 14px; }
.portal-tab-item.is-active .portal-tab { font-weight: 650; }
.portal-tab-close { border: 0; background: transparent; color: #909da4; width: 24px; height: 24px; margin-right: 8px; border-radius: 5px; font-size: 19px !important; line-height: 20px; }
.portal-tab-close:hover { color: #324c5c; background: #e4e9e8; }
.portal-frame-host { flex: 1; min-height: 0; min-width: 0; position: relative; overflow: hidden; }
/* 비활성 iframe도 같은 크기를 유지하되 화면 표시와 사용자 입력을 막습니다. */
.portal-tabpanel { position: absolute; inset: 0; background: var(--portal-paper); visibility: hidden; pointer-events: none; }
.portal-tabpanel.is-active { visibility: visible; pointer-events: auto; z-index: 1; }
.portal-frame { width: 100%; height: 100%; border: 0; display: block; background: var(--portal-paper); }
.portal-loading { position: absolute; inset: 0; display: grid; place-items: center; margin: 0; color: var(--portal-muted); background: var(--portal-paper); z-index: 1; }
.portal-overlay { position: fixed; inset: 0; border: 0; background: #10243466; z-index: 20; }

/* 접힌 데스크톱 메뉴에는 아이콘만 남기고 본문 너비를 확보합니다. */
.sidebar-collapsed .portal-sidebar { width: 76px; flex-basis: 76px; }
.sidebar-collapsed .portal-brand { padding-left: 18px; padding-right: 18px; }
.sidebar-collapsed .portal-brand-copy, .sidebar-collapsed .portal-search, .sidebar-collapsed .portal-nav-label, .sidebar-collapsed .portal-menu-text, .sidebar-collapsed .portal-menu-indicator, .sidebar-collapsed .portal-sidebar-footer { display: none; }
.sidebar-collapsed .portal-menu-item { justify-content: center; padding: 0; }
.sidebar-collapsed .portal-sidebar-content { padding: 8px 10px; }

/* iframe과 직접 접속에서 같은 콘텐츠 스타일을 사용하며 기존 footer 여백을 가져오지 않습니다. */
.workspace-body { min-height: 100vh; min-height: 100dvh; background: var(--portal-paper); }
.workspace-content { max-width: 1240px; padding: 34px 38px 42px; margin: 0 auto; }
.workspace-kicker { color: #728b8f; font-size: 10px; font-weight: 600; letter-spacing: 1.9px; }
.welcome-hero { position: relative; display: flex; align-items: center; min-height: 280px; padding: 34px 38px; overflow: hidden; border: 1px solid #dbe6e3; border-radius: 12px; background: #edf3ef; }
.welcome-copy { position: relative; z-index: 1; }
.welcome-copy h1 { margin: 16px 0 17px; color: #2c4c50; font-size: clamp(27px, 3vw, 42px); font-weight: 650; letter-spacing: -1.7px; line-height: 1.35; }
.welcome-copy h1 > span { color: #b88357; }
.welcome-copy p { font-size: 13px; line-height: 1.9; color: #687f7f; margin-bottom: 24px; }
.welcome-note { color: #547475; font-size: 11px; }
.welcome-note > span { display: inline-grid; place-items: center; width: 22px; height: 22px; margin-right: 5px; border-radius: 50%; border: 1px solid #c1d1cd; font-size: 14px; }
.welcome-art { position: relative; width: 300px; height: 235px; margin-left: auto; flex: 0 0 300px; }
.art-orbit { position: absolute; width: 235px; height: 235px; border-radius: 50%; border: 1px solid #ccddd5; top: 0; left: 30px; }
.orbit-two { width: 175px; height: 175px; top: 30px; left: 60px; }
.art-tile { display: grid; place-items: center; position: absolute; width: 120px; height: 132px; border-radius: 16px; font-size: 27px; font-weight: 600; box-shadow: 0 18px 30px #36544a10; letter-spacing: -1px; }
.tile-blue { background: #548494; color: #fff; left: 30px; top: 42px; transform: rotate(-12deg); }
.tile-cream { background: #f1ddbd; color: #7f6848; left: 142px; top: 81px; transform: rotate(11deg); }
.art-spark { position: absolute; top: 9px; right: 27px; font-size: 48px; color: #b2855f; }
.home-spaces { margin-top: 33px; }
.spaces-heading { display: flex; align-items: baseline; gap: 16px; margin-bottom: 18px; }
.spaces-heading h2 { font-size: 17px; font-weight: 650; letter-spacing: -.5px; margin: 0; }
.spaces-heading p { font-size: 11px; color: var(--portal-muted); margin: 0; }
.space-grid { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 14px; }
.space-card { display: flex; align-items: flex-start; gap: 15px; min-height: 124px; padding: 22px; border: 1px solid var(--portal-line); border-radius: 9px; background: #fff; }
.space-number { display: grid; place-items: center; color: #6f9393; background: #f0f5f2; border-radius: 9px; width: 36px; height: 36px; font-size: 11px; font-weight: 600; flex: 0 0 36px; }
.space-card h3 { font-size: 14px; font-weight: 650; margin: 2px 0 9px; }
.space-card p { font-size: 11px; color: var(--portal-muted); margin: 0; line-height: 1.8; word-break: keep-all; }
.status-pill { display: inline-flex; justify-content: center; align-items: center; border: 1px solid #e6e8df; border-radius: 5px; padding: 3px 7px; color: #898b71; background: #f8f8f2; font-size: 9px; white-space: nowrap; font-weight: 500; }
.space-card .status-pill { margin-left: auto; margin-top: 1px; }
.workspace-page-heading { padding: 8px 0 28px; border-bottom: 1px solid var(--portal-line); }
.workspace-page-heading h1 { margin: 14px 0 12px; font-size: 29px; font-weight: 650; letter-spacing: -1px; }
.workspace-page-heading p { color: var(--portal-muted); font-size: 13px; margin: 0; line-height: 1.8; }
.workspace-placeholder { display: flex; flex-direction: column; align-items: center; justify-content: center; min-height: 360px; margin-top: 28px; padding: 36px 24px; background: #fff; border: 1px solid var(--portal-line); border-radius: 12px; text-align: center; }
.placeholder-mark { display: grid; place-items: center; width: 66px; height: 66px; margin-bottom: 21px; border-radius: 22px; color: #7b9b96; background: #edf3ef; font-size: 22px; font-weight: 500; }
.workspace-placeholder h2 { margin: 18px 0 13px; font-size: 21px; font-weight: 600; letter-spacing: -.7px; line-height: 1.5; }
.workspace-placeholder p { margin: 0; color: var(--portal-muted); font-size: 12px; line-height: 2; word-break: keep-all; }

/* 태블릿과 모바일은 사이드바를 화면 위에 열고 콘텐츠가 가려지지 않게 합니다. */
@media (max-width: 1000px) {
    .workspace-content { padding: 25px; }
    .welcome-hero { padding: 30px; }
    .welcome-art { flex-basis: 220px; transform: scale(.82); transform-origin: right center; margin-left: -40px; }
    .space-card { padding: 19px 16px; gap: 10px; flex-wrap: wrap; }
    .space-card .status-pill { margin-left: 46px; margin-top: -5px; }
}
@media (max-width: 800px) {
    .portal-sidebar { position: fixed; left: 0; top: 0; bottom: 0; width: min(280px, calc(100vw - 56px)); transform: translateX(-100%); }
    .nav-open .portal-sidebar { transform: translateX(0); }
    .portal-header { flex-basis: 80px; padding: 0 19px; gap: 13px; }
    .portal-header-note { font-size: 10px; }
    .portal-tabs { padding: 0 14px; }
    .portal-heading h1 { font-size: 18px; }
    .portal-eyebrow { font-size: 8px; }
}
@media (max-width: 520px) {
    .portal-account { gap: 7px; font-size: 10px; }
    .portal-account-name { max-width: 86px; }
    .portal-header-note { display: none; }
    .workspace-content { padding: 20px 16px 28px; }
    .welcome-hero { min-height: 285px; padding: 28px 23px; }
    .welcome-copy h1 { font-size: 31px; }
    .welcome-copy p { font-size: 12px; position: relative; }
    .welcome-art { position: absolute; right: -75px; bottom: -83px; transform: scale(.53); opacity: .35; }
    .spaces-heading { flex-direction: column; gap: 8px; }
    .space-grid { grid-template-columns: 1fr; gap: 11px; }
    .space-card { min-height: 100px; padding: 21px 17px; flex-wrap: nowrap; }
    .space-card .status-pill { margin: 0 0 0 auto; }
    .workspace-placeholder { min-height: 350px; padding: 28px 19px; }
    .workspace-placeholder h2 { font-size: 19px; }
}
@media (prefers-reduced-motion: reduce) {
    .portal-sidebar { transition: none; }
}