/* ==========================================================================
   LW Suite — 코어 프론트엔드(방문자 화면) 디자인 시스템
   톤: 애플(여백·정갈함) + 토스(친근함·명확함)
   관리자용 lw-core-admin-ui.css와 색상/반경 토큰을 동일하게 맞춘다.
   각 모듈은 이 파일이 이미 로드되어 있다는 전제 하에, 모듈 전용 스타일만
   최소한으로 <style> 블록에 추가한다 (컨테이너/카드/버튼/뱃지는 여기서 상속).
   ========================================================================== */

:root{
    /* 컬러 토큰 — LW Suite 공식 브랜드 컬러 4종 (2026-08 확정)
       #25558F(주조색) / #278DB3(청록 보조) / #8FAFDF(라이트 블루) / #C4CEDC(라이트 블루그레이, 보더/라인용) */
    --lw-blue: #25558F;
    --lw-blue-dark: #163A5F;
    --lw-blue-soft: #E8EEF5;
    --lw-teal: #278DB3;
    --lw-blue-light: #8FAFDF;
    --lw-line-blue: #C4CEDC;
    --lw-green: #12B886;
    --lw-green-soft: #E9FBF3;
    --lw-red: #F03E3E;
    --lw-red-soft: #FFF0F0;
    --lw-amber: #F59F00;
    --lw-amber-soft: #FFF7E6;

    --lw-ink-900: #191F28;   /* 제목 */
    --lw-ink-700: #333D4B;   /* 본문 */
    --lw-ink-500: #6B7684;   /* 보조설명 */
    --lw-ink-300: #B0B8C1;   /* placeholder */
    --lw-line: #E5E8EB;
    --lw-bg: #F2F4F6;
    --lw-white: #FFFFFF;

    /* 레이아웃 토큰 — 관리자와 동일 */
    --lw-radius-sm: 8px;
    --lw-radius-md: 14px;
    --lw-radius-lg: 20px;
    --lw-shadow-card: 0 2px 10px rgba(25,31,40,.05), 0 1px 2px rgba(25,31,40,.04);
    --lw-shadow-pop: 0 12px 32px rgba(25,31,40,.14);
    --lw-gap: 16px;

    /* 프론트 전용 토큰 — 본문 컨텐츠 폭. 모든 모듈이 이 3단계 중 하나만 쓴다. */
    --lw-f-width-narrow: 820px;  /* 개인정보/약관 등 텍스트 위주 페이지 */
    --lw-f-width-base: 1024px;   /* 회사소개/공지/연락처 등 기본 컨텐츠 */
    --lw-f-width-wide: 1140px;   /* 제품/프로젝트 그리드처럼 카드가 여러 줄 필요한 페이지 */

    /* 리퀴드글래스 재질 토큰 (iOS 27 방향, 2026-08 확정)
       강도: 은은하게 / 톤: 뉴트럴 화이트로 확정 — 임의로 값 바꾸지 말 것.
       프론트 페이지 배경은 #F3F6F9 고정을 전제로 캘리브레이션했다. */
    --lw-glass-bg: rgba(255,255,255,.58);
    --lw-glass-bg-hover: rgba(255,255,255,.72);
    --lw-glass-blur: 18px;
    --lw-glass-saturate: 150%;
    --lw-glass-border: rgba(255,255,255,.65);
    --lw-glass-border-outer: rgba(25,31,40,.06);
    --lw-glass-shadow: 0 8px 24px rgba(25,31,40,.06), inset 0 1px 0 rgba(255,255,255,.5);
    --lw-glass-shadow-hover: 0 16px 36px rgba(25,31,40,.10), inset 0 1px 0 rgba(255,255,255,.6);

    /* 틴트 글래스 (버튼 전용) — 색상은 유지하되 블러+상단 하이라이트+입체감으로 유리 재질을 표현.
       카드는 무채색 글래스, 버튼은 브랜드색이 살아있는 "틴트 글래스"로 구분해서 쓴다. */
    --lw-tint-blue: linear-gradient(155deg, rgba(58,105,163,.92), rgba(22,58,95,.92));
    --lw-tint-blue-hover: linear-gradient(155deg, rgba(70,118,178,.94), rgba(22,58,95,.96));
    --lw-tint-teal: linear-gradient(155deg, rgba(60,161,199,.92), rgba(21,94,118,.92));
    --lw-tint-teal-hover: linear-gradient(155deg, rgba(74,175,211,.94), rgba(21,94,118,.96));
    --lw-tint-dark: linear-gradient(155deg, rgba(75,86,100,.9), rgba(25,31,40,.92));
    --lw-tint-dark-hover: linear-gradient(155deg, rgba(90,101,115,.92), rgba(25,31,40,.96));
    --lw-tint-blur: 14px;
    --lw-tint-saturate: 160%;
    --lw-tint-shadow-blue: inset 0 1px 1px rgba(255,255,255,.25), 0 6px 16px rgba(22,58,95,.32);
    --lw-tint-shadow-teal: inset 0 1px 1px rgba(255,255,255,.25), 0 6px 16px rgba(21,94,118,.32);
    --lw-tint-shadow-dark: inset 0 1px 1px rgba(255,255,255,.22), 0 6px 16px rgba(25,31,40,.28);
}

/* ------------------------------------------------------------------------
   공용 래퍼 — 모듈은 최상위 컨테이너에 .lw-f-wrap 과 폭 modifier를 함께 준다.
   예: <div class="lw-f-wrap lw-f-wrap--narrow"> ... </div>
   ------------------------------------------------------------------------ */
.lw-f-wrap{
    font-family: "Pretendard", -apple-system, BlinkMacSystemFont, "Apple SD Gothic Neo", "Malgun Gothic", "Segoe UI", sans-serif;
    color: var(--lw-ink-700);
    width: 100%;
    margin: 0 auto;
    padding: 0 20px;
    box-sizing: border-box;
    word-break: keep-all;
    line-height: 1.7;
}
.lw-f-wrap *, .lw-f-wrap *::before, .lw-f-wrap *::after{ box-sizing: border-box; }

.lw-f-wrap--narrow{ max-width: var(--lw-f-width-narrow); }
.lw-f-wrap--base{ max-width: var(--lw-f-width-base); }
.lw-f-wrap--wide{ max-width: var(--lw-f-width-wide); }

/* 타이포그래피 */
.lw-f-wrap h1{ font-size: 28px; font-weight: 800; color: var(--lw-ink-900); margin: 0 0 24px; text-align:center; }
/* 개인정보처리방침처럼 관리자가 입력한 순수 HTML 본문(조항 제목이 h2)에만 적용.
   다른 모듈은 전부 자체 제목 클래스를 이미 갖고 있으므로 여기서 전역으로 h2를 건드리지 않는다
   (전역 h2 규칙은 선택자 우선순위가 각 모듈의 단일 클래스 선택자보다 높아서 조용히 덮어써버리는 문제가 있었음). */
.lw-privacy-view h2{
    font-size: 19px; font-weight: 700; color: var(--lw-blue);
    margin: 36px 0 16px;
}
.lw-f-wrap p{ margin: 0 0 14px; }
.lw-f-wrap p:last-child{ margin-bottom: 0; }
.lw-f-wrap a{ color: var(--lw-blue); }
.lw-f-wrap table{ width:100%; border-collapse: collapse; margin: 12px 0; }
.lw-f-wrap th, .lw-f-wrap td{ border: 1px solid var(--lw-line); padding: 10px; text-align:left; }
.lw-f-wrap th{ background: var(--lw-blue-soft); color: var(--lw-ink-900); font-weight:700; }

/* 카드 — 제품/프로젝트/솔루션 그리드 공통 (리퀴드글래스) */
.lw-f-card{
    position: relative;
    background: var(--lw-glass-bg);
    -webkit-backdrop-filter: blur(var(--lw-glass-blur)) saturate(var(--lw-glass-saturate));
    backdrop-filter: blur(var(--lw-glass-blur)) saturate(var(--lw-glass-saturate));
    border: 1px solid var(--lw-glass-border);
    border-radius: var(--lw-radius-md);
    box-shadow: var(--lw-glass-shadow);
    padding: 24px;
    transition: box-shadow .2s ease, transform .2s ease, background .2s ease;
    overflow: hidden;
}
/* 상단 스펙큘러 하이라이트 — iOS27 "다크엣지 + 밝은 하이라이트" 깊이감을 얇게 재현 */
.lw-f-card::before{
    content:''; position:absolute; inset:0 0 auto 0; height:1px;
    background: linear-gradient(90deg, transparent, rgba(255,255,255,.9), transparent);
}
.lw-f-card::after{
    content:''; position:absolute; inset:0; border-radius:inherit;
    box-shadow: inset 0 0 0 1px var(--lw-glass-border-outer);
    pointer-events:none;
}
.lw-f-card:hover{ box-shadow: var(--lw-glass-shadow-hover); transform: translateY(-2px); background: var(--lw-glass-bg-hover); }
.lw-f-card-title{ font-size: 16px; font-weight: 700; color: var(--lw-ink-900); margin: 0 0 8px; }
.lw-f-card-desc{ font-size: 14px; color: var(--lw-ink-500); margin: 0; }

/* 리퀴드글래스 지원 안 하는 구형 브라우저 대비 fallback */
@supports not ((backdrop-filter: blur(1px)) or (-webkit-backdrop-filter: blur(1px))){
    .lw-f-card{ background: var(--lw-white); }
}

/* 뱃지 (얇은 유리 처리) */
.lw-f-badge{
    display:inline-flex; align-items:center; gap:4px;
    font-size: 12px; font-weight: 700;
    padding: 4px 10px; border-radius: 999px;
    background: rgba(232,238,245,.75); color: var(--lw-blue);
    -webkit-backdrop-filter: blur(8px); backdrop-filter: blur(8px);
    border: 1px solid rgba(255,255,255,.5);
}
.lw-f-badge--new{ background: rgba(233,251,243,.8); color: var(--lw-green); }
.lw-f-badge--notice{ background: rgba(255,247,230,.8); color: var(--lw-amber); }

/* 버튼 — primary는 브랜드 블루 "틴트 글래스"로 (완전 불투명 X, 완전 투명 X — 클릭 유도는 유지하면서 유리 재질감)
   주의: 아래는 `.lw-f-wrap a{ color: var(--lw-blue); }` (67행)보다 selector가
   더 구체적이어야 글자색이 덮어써지지 않는다. 새 버튼 variant 추가 시에도 유지할 것. */
.lw-f-wrap a.lw-f-btn, .lw-f-btn{
    display:inline-flex; align-items:center; justify-content:center; gap:6px;
    font-size: 14px; font-weight: 700; line-height:1;
    padding: 12px 20px; border-radius: var(--lw-radius-sm);
    background: var(--lw-tint-blue); color: var(--lw-white);
    -webkit-backdrop-filter: blur(var(--lw-tint-blur)) saturate(var(--lw-tint-saturate));
    backdrop-filter: blur(var(--lw-tint-blur)) saturate(var(--lw-tint-saturate));
    border: none; cursor: pointer; text-decoration:none;
    box-shadow: var(--lw-tint-shadow-blue);
    position: relative; overflow: hidden;
    transition: background .15s ease, transform .15s ease, box-shadow .15s ease;
}
/* 상단 스펙큘러 하이라이트 — 틴트 글래스 공통 표식 */
.lw-f-btn::before{
    content:''; position:absolute; inset:0 0 auto 0; height:45%;
    background: linear-gradient(180deg, rgba(255,255,255,.28), transparent);
    pointer-events:none;
}
.lw-f-btn:hover{ background: var(--lw-tint-blue-hover); color: var(--lw-white); transform: translateY(-1px); }
.lw-f-wrap a.lw-f-btn.lw-f-btn--ghost, .lw-f-btn--ghost{
    background: var(--lw-glass-bg);
    -webkit-backdrop-filter: blur(var(--lw-glass-blur)) saturate(var(--lw-glass-saturate));
    backdrop-filter: blur(var(--lw-glass-blur)) saturate(var(--lw-glass-saturate));
    color: var(--lw-blue); border: 1px solid var(--lw-glass-border);
    box-shadow: var(--lw-glass-shadow);
}
.lw-f-btn--ghost::before{ display:none; }
.lw-f-btn--ghost:hover{ background: var(--lw-glass-bg-hover); }
@supports not ((backdrop-filter: blur(1px)) or (-webkit-backdrop-filter: blur(1px))){
    .lw-f-wrap a.lw-f-btn, .lw-f-btn{ background: var(--lw-blue); }
}

@supports not ((backdrop-filter: blur(1px)) or (-webkit-backdrop-filter: blur(1px))){
    .lw-f-badge{ background: var(--lw-blue-soft); }
    .lw-f-btn--ghost{ background: var(--lw-white); border-color: var(--lw-blue); }
}

/* 빈 상태(empty state) — 아이콘 + 안내문 한 줄 패턴. contact.php에서 처음 쓰이고
   notices.php가 두 번째로 쓰면서 모듈마다 로컬 <style>에 값이 중복돼 있었음(DESIGN-SYSTEM.md
   2-1절에 "세 번째로 쓰는 모듈이 나오면 코어로 올릴 것"이라고 명시). 2026-08-17 세션59에서
   projects.php가 세 번째로 쓰게 되어 이 규칙대로 코어로 승격.
   주의: contact.php/notices.php에는 아직 동일한 정의가 로컬에 남아있음(notices.php는 패딩만
   64px로 다르게 씀) — 지금 당장 깨지진 않지만 다음 담당자가 정리할 때 이 코어 클래스를
   재사용하도록 로컬 중복 제거할 것. */
.lw-empty-state{ padding:48px 24px; text-align:center; color:var(--lw-ink-500); }
.lw-empty-state-icon{ font-size:28px; margin-bottom:10px; opacity:.5; }
.lw-empty-state p{ margin:0; font-size:14px; font-weight:600; }

/* 글래스 패널 — CEO 인사말처럼 텍스트 위주 단일 블록에 사용하는 신규 공통 컴포넌트.
   (company.php의 .lw-ceo-view 등 모듈별 커스텀 패널은 다음 단계에서 이 클래스로 이관 예정) */
.lw-glass-panel{
    position: relative;
    background: var(--lw-glass-bg);
    -webkit-backdrop-filter: blur(var(--lw-glass-blur)) saturate(var(--lw-glass-saturate));
    backdrop-filter: blur(var(--lw-glass-blur)) saturate(var(--lw-glass-saturate));
    border: 1px solid var(--lw-glass-border);
    border-radius: var(--lw-radius-lg);
    box-shadow: var(--lw-glass-shadow);
    padding: 40px 44px;
}
.lw-glass-panel::before{
    content:''; position:absolute; inset:0 0 auto 0; height:1px;
    background: linear-gradient(90deg, transparent, rgba(255,255,255,.9), transparent);
    border-radius: var(--lw-radius-lg) var(--lw-radius-lg) 0 0;
}
.lw-glass-panel::after{
    content:''; position:absolute; inset:0; border-radius:inherit;
    box-shadow: inset 0 0 0 1px var(--lw-glass-border-outer);
    pointer-events:none;
}
@supports not ((backdrop-filter: blur(1px)) or (-webkit-backdrop-filter: blur(1px))){
    .lw-glass-panel{ background: var(--lw-white); }
}
@media (max-width: 768px){
    .lw-glass-panel{ padding: 28px 24px; }
}

/* 섹션 헤더 (페이지 상단 타이틀 + 설명 묶음) */
.lw-f-section-head{ text-align:center; margin-bottom: 40px; }
.lw-f-section-head h1{ margin-bottom: 8px; }
.lw-f-section-head p{ color: var(--lw-ink-500); font-size: 15px; }

/* 그리드 유틸 */
.lw-f-grid{ display:grid; gap: var(--lw-gap); grid-template-columns: repeat(auto-fill, minmax(260px, 1fr)); }

@media (max-width: 768px){
    .lw-f-wrap{ padding: 0 16px; }
    .lw-f-wrap h1{ font-size: 22px; }
    .lw-privacy-view h2{ font-size: 17px; }
}