@charset "utf-8";
/**
 * 폼로우 새창(/bridge/) 셸 스타일
 * ---------------------------------------------------------------------
 * 상단 메뉴 / 배너 / 본문 껍데기만 담당한다.
 * 위젯 내부 스타일은 embed.js 가 주입하는 embed.css + 사이트별 custom_css.php 가
 * 담당하므로, 여기서는 wf-embed- 접두 클래스를 일절 건드리지 않는다.
 * (호스트 사이트 CSS 에 의존하지 않도록 필요한 값은 모두 자체 포함한다)
 */

/* ── 기본값 초기화 (호스트 CSS 가 없는 단독 페이지이므로 최소한만) ── */
* { box-sizing: border-box; }

html, body {
    margin: 0;
    padding: 0;
}

body {
    background: #f5f6f8;
    color: #222;
    font-family: 'Pretendard', 'Apple SD Gothic Neo', 'Malgun Gothic', '맑은 고딕', sans-serif;
    font-size: 15px;
    line-height: 1.5;
    -webkit-text-size-adjust: 100%;
}

/* ── 전체 래퍼 ─────────────────────────────────────────────── */
.wf-win {
    max-width: 1200px;
    margin: 0 auto;
    padding: 0 16px 48px;
}

/* ── 로고 (헤더 좌측, 임베드 설정에서 등록 시에만 출력) ─────── */
.wf-win-logo {
    flex: 0 0 auto;
}
.wf-win-logo img {
    display: block;
    height: 40px;
    width: auto;
    max-width: 200px;
    object-fit: contain;
}

/* ── 상단 메뉴 ─────────────────────────────────────────────── */
.wf-win-head {
    display: flex;
    align-items: center;
    gap: 12px;
    padding: 14px 0;
    border-bottom: 1px solid #e3e5ea;
    background: #f5f6f8;
}

.wf-win-nav {
    flex: 1 1 auto;
    min-width: 0;
    display: flex;
    align-items: center;
    /* 메뉴는 남은 공간의 중앙에 배치한다 (좌측 로고 / 우측 로그인 버튼 사이) */
    justify-content: center;
    gap: 4px;
    /* 메뉴가 많거나 화면이 좁으면 가로 스크롤 (줄바꿈으로 헤더가 무너지지 않게) */
    overflow-x: auto;
    -webkit-overflow-scrolling: touch;
    scrollbar-width: none;
}
.wf-win-nav::-webkit-scrollbar { display: none; }

.wf-win-nav a {
    flex: 0 0 auto;
    padding: 8px 14px;
    border-radius: 6px;
    color: #555;
    font-size: 15px;
    font-weight: 500;
    text-decoration: none;
    white-space: nowrap;
}
.wf-win-nav a:hover { background: #ebedf1; color: #222; }
.wf-win-nav a.on    { background: #2b5cff; color: #fff; font-weight: 600; }

/* ── 로그인/로그아웃 ────────────────────────────────────────── */
.wf-win-auth {
    flex: 0 0 auto;
    display: flex;
    align-items: center;
    gap: 8px;
}

.wf-win-auth-in,
.wf-win-auth-teacher,
.wf-win-auth-profile,
.wf-win-auth-out {
    display: inline-block;
    padding: 7px 14px;
    border: 1px solid #ccd0d8;
    border-radius: 6px;
    background: #fff;
    color: #444;
    font-family: inherit;
    font-size: 14px;
    line-height: 1.3;
    text-decoration: none;
    white-space: nowrap;
    cursor: pointer;
}
.wf-win-auth-in:hover,
.wf-win-auth-teacher:hover,
.wf-win-auth-profile:hover,
.wf-win-auth-out:hover { border-color: #2b5cff; color: #2b5cff; }

/* hidden 속성 복원 — 위 display: inline-block 이 브라우저 기본 [hidden]{display:none} 을
   덮어쓰므로(author 규칙이 UA 규칙에 항상 우선), 인라인 JS 의 hidden 토글이 실제로
   먹히도록 author 규칙으로 재정의한다. 이 규칙이 없으면 버튼이 토큰 유무와 무관하게 항상 보인다 */
.wf-win-auth-in[hidden],
.wf-win-auth-teacher[hidden],
.wf-win-auth-profile[hidden],
.wf-win-auth-out[hidden] { display: none; }

/* ── 배너 이미지 ───────────────────────────────────────────── */
.wf-win-banner {
    margin: 16px 0 0;
    border-radius: 8px;
    overflow: hidden;
    background: #fff;
    line-height: 0;
}
.wf-win-banner img {
    display: block;
    width: 100%;
    height: auto;
    max-width: 100%;
}

/* ── 본문 (위젯 영역) ──────────────────────────────────────── */
.wf-win-body {
    margin-top: 16px;
    padding: 20px;
    border-radius: 8px;
    background: #fff;
    min-height: 320px;
}

/* ── 하단 회사정보 (임베드 설정에서 등록 시에만 출력) ───────── */
.wf-win-foot {
    margin-top: 24px;
    padding: 20px 0 0;
    border-top: 1px solid #e3e5ea;
    color: #888;
    font-size: 13px;
    line-height: 1.7;
    text-align: center;
    white-space: normal;
    word-break: keep-all;
}

/* ── 안내 화면 (키 오류 / 사용 중지 등) ─────────────────────── */
.wf-win-notice {
    margin: 80px auto;
    padding: 48px 20px;
    max-width: 560px;
    border-radius: 8px;
    background: #fff;
    color: #666;
    text-align: center;
}

/* ── 모바일 ────────────────────────────────────────────────── */
@media (max-width: 640px) {
    .wf-win      { padding: 0 12px 32px; }
    .wf-win-head { gap: 8px; padding: 10px 0; }
    .wf-win-nav a { padding: 7px 11px; font-size: 14px; }
    .wf-win-auth-in,
    .wf-win-auth-teacher,
    .wf-win-auth-profile,
    .wf-win-auth-out { padding: 6px 10px; font-size: 13px; }
    .wf-win-body { padding: 14px; }
    .wf-win-logo img { height: 32px; max-width: 150px; }
    .wf-win-foot { margin-top: 20px; padding-top: 16px; font-size: 12px; }
}