/* ==========================================================================
   Mission Resign — 사이트 전체 스타일
   --------------------------------------------------------------------------
   모든 페이지가 이 파일 하나를 공유합니다.

   각 HTML의 <body>에 페이지 클래스가 붙어 있고, 그 클래스로 페이지 전용
   스타일을 구분합니다.
     index.html            -> .page-home
     focus-timer.html      -> .page-app
     restaurant-notes.html -> .page-app
     privacy_policy.html   -> .page-doc
     404.html              -> .page-error

   목차
     1. 디자인 토큰
     2. 리셋 · 기본 타이포
     3. 레이아웃
     4. 라벨 (eyebrow)
     5. 네비게이션
     6. 푸터
     7. 등장 애니메이션 · 접근성
     8. 페이지: 홈
     9. 페이지: 앱 상세
    10. 페이지: 개인정보 처리방침
    11. 페이지: 404
    12. 반응형 · 모션 최소화
   ========================================================================== */


/* 1. 디자인 토큰 =========================================================== */

:root{
  /* 색 */
  --paper:#FFFFFF;
  --ink:#1B1D22;
  --muted:#5B5D62;
  --line:#EAEAEA;
  --accent:#3D39D6;
  --accent-ink:#2C29A8;
  --accent-tint:#EEEEFB;
  --card:#F7F8FA;
  --body-text:#3A3C40;   /* 본문 문단용 (--ink보다 살짝 연함) */

  /* 폰트 */
  --sans:"Pretendard","Pretendard Variable",-apple-system,BlinkMacSystemFont,system-ui,"Apple SD Gothic Neo","Malgun Gothic",sans-serif;
  --mono:ui-monospace,SFMono-Regular,"SF Mono",Menlo,Consolas,"Liberation Mono",monospace;

  /* 모노 라벨 크기.
     이 두 값만 바꾸면 사이트 전체의 작은 라벨이 한꺼번에 조절됩니다. */
  --label:.86rem;     /* eyebrow, 카테고리, 상태 배지 등 */
  --label-sm:.8rem;   /* 표 제목, 태그 등 한 단계 더 작은 라벨 */

  /* 본문 최대 폭. 페이지 클래스에서 덮어씁니다. */
  --wrap:920px;
}

.page-app{ --wrap:820px; }
.page-doc{ --wrap:760px; }


/* 2. 리셋 · 기본 타이포 ==================================================== */

*{box-sizing:border-box;margin:0;padding:0;}

html{scroll-behavior:smooth;}

body{
  font-family:var(--sans);
  background:var(--paper);
  color:var(--ink);
  line-height:1.7;
  -webkit-font-smoothing:antialiased;
  text-rendering:optimizeLegibility;
}

a{color:inherit;}


/* 3. 레이아웃 ============================================================== */

.wrap{max-width:var(--wrap);margin:0 auto;padding:0 24px;}
.wrap-wide{max-width:1080px;margin:0 auto;padding:0 24px;}

/* 구분선. 여백은 페이지마다 달라서 각 페이지 섹션에서 지정합니다. */
hr.div{border:none;border-top:1px solid var(--line);}


/* 4. 라벨 (eyebrow) ======================================================== */

.eyebrow{
  font-family:var(--mono);
  font-size:var(--label);
  letter-spacing:.16em;
  text-transform:uppercase;
  color:var(--accent-ink);
  display:inline-flex;
  align-items:center;
  gap:.55em;
}
.eyebrow::before{
  content:"";
  width:7px;height:7px;
  background:var(--accent);
  border-radius:1px;
  display:inline-block;
}


/* 5. 네비게이션 ============================================================ */

header.nav{
  position:sticky;top:0;z-index:50;
  background:rgba(255,255,255,.85);
  backdrop-filter:saturate(180%) blur(10px);
  border-bottom:1px solid var(--line);
}
/* 본문 폭이 좁은 페이지에서도 네비게이션은 920px를 유지합니다. */
.nav-inner{
  display:flex;align-items:center;justify-content:space-between;
  height:62px;max-width:920px;margin:0 auto;padding:0 24px;
}
.brand{
  display:inline-flex;align-items:center;gap:10px;
  font-weight:800;letter-spacing:-.02em;font-size:1.05rem;text-decoration:none;
}
.brand-logo{width:34px;height:34px;border-radius:9px;display:block;object-fit:cover;}
.brand .dot{color:var(--accent);}
.nav-links{display:flex;gap:26px;}
.nav-links a{font-size:.92rem;color:var(--muted);text-decoration:none;transition:color .18s;}
.nav-links a:hover{color:var(--ink);}


/* 6. 푸터 ================================================================== */

footer{border-top:1px solid var(--line);text-align:center;}
.foot-brand{
  display:inline-flex;align-items:center;justify-content:center;gap:10px;
  font-weight:800;letter-spacing:-.02em;font-size:1.05rem;
}
.foot-brand .brand-logo{width:32px;height:32px;border-radius:8px;}
.foot-brand .dot{color:var(--accent);}
.foot-links{display:flex;gap:22px;justify-content:center;margin:16px 0;font-size:.9rem;flex-wrap:wrap;}
.foot-links a{color:var(--muted);text-decoration:none;transition:color .18s;}
.foot-links a:hover{color:var(--ink);}
.foot-meta{font-size:.85rem;color:var(--muted);line-height:1.7;}


/* 7. 등장 애니메이션 · 접근성 ============================================== */

.reveal{opacity:0;transform:translateY(18px);transition:opacity .6s ease,transform .6s ease;}
.reveal.in{opacity:1;transform:none;}

a:focus-visible,.card:focus-visible{outline:2px solid var(--accent);outline-offset:3px;border-radius:6px;}


/* 8. 페이지: 홈 (index.html) =============================================== */

.page-home section{padding:84px 0;text-align:center;}
.page-home hr.div{max-width:920px;margin:0 auto;}
.page-home footer{padding:48px 0 60px;}
.page-home .foot-links{margin:18px 0;}

/* 히어로 */
.page-home .hero{padding:120px 0 100px;text-align:center;}
.hero-logo{
  width:104px;height:104px;border-radius:24px;display:block;object-fit:cover;
  margin:0 auto 26px;box-shadow:0 22px 48px -26px rgba(27,29,34,.45);
}
.hero h1{
  font-size:clamp(2.4rem,6vw,4.2rem);
  font-weight:800;letter-spacing:-.035em;line-height:1.08;
  margin:26px auto 26px;max-width:18ch;
}
.hero p.lead{font-size:1.18rem;color:var(--muted);max-width:46ch;margin:0 auto;}

.cta{
  display:inline-flex;align-items:center;gap:.5em;margin-top:38px;
  font-weight:600;font-size:1rem;color:var(--accent-ink);text-decoration:none;
  border-bottom:2px solid var(--accent);padding-bottom:2px;transition:gap .2s;
}
.cta:hover{gap:.9em;}

/* 섹션 제목 */
.sec-head{margin-bottom:38px;}
.sec-head h2{font-size:clamp(1.7rem,3.4vw,2.2rem);font-weight:700;letter-spacing:-.02em;margin-top:16px;}
.prose p{font-size:1.06rem;color:#3f4145;max-width:60ch;margin:0 auto 18px;}

/* 운영 방향 강조 박스 */
.callout{margin:38px auto 0;background:var(--accent-tint);padding:30px 30px;border-radius:16px;max-width:64ch;}
.callout .tag{
  font-family:var(--mono);font-size:var(--label);letter-spacing:.14em;
  text-transform:uppercase;color:var(--accent-ink);display:block;margin-bottom:14px;
}
.callout .origin{font-weight:700;font-size:1.2rem;letter-spacing:-.01em;margin-bottom:12px;}
.callout .origin em{font-style:normal;color:var(--accent);}
.callout p{color:var(--body-text);font-size:1.02rem;max-width:none;}

/* 앱 카드 */
.cards{display:grid;grid-template-columns:1fr 1fr;gap:22px;margin-top:8px;text-align:center;}
.card{
  background:var(--card);border:1px solid var(--line);border-radius:16px;
  padding:34px 26px 28px;text-decoration:none;color:inherit;
  display:flex;flex-direction:column;align-items:center;
  transition:transform .22s ease,box-shadow .22s ease,border-color .22s ease;
}
.card:hover{transform:translateY(-4px);box-shadow:0 18px 40px -24px rgba(27,29,34,.35);border-color:#dcdce4;}
.card .cat{
  font-family:var(--mono);font-size:var(--label-sm);letter-spacing:.14em;
  text-transform:uppercase;color:var(--muted);
}
.card h3{font-size:1.5rem;font-weight:800;letter-spacing:-.02em;margin:16px 0 4px;}
.card .wip{font-family:var(--mono);font-size:var(--label);color:var(--muted);}
.card .desc{color:var(--muted);margin:14px 0 24px;flex:1;}
.card .meta{display:flex;flex-wrap:wrap;gap:8px;justify-content:center;margin-bottom:22px;}
.card .meta span{
  font-family:var(--mono);font-size:var(--label-sm);color:var(--accent-ink);
  background:var(--accent-tint);padding:5px 8px;border-radius:999px;
}
.card .more{font-weight:600;color:var(--accent-ink);display:inline-flex;gap:.4em;transition:gap .2s;}
.card:hover .more{gap:.75em;}

/* 원칙 */
/* 원칙 카드 2개 기준. 3개로 늘릴 때는 repeat(2,1fr) 을 repeat(3,1fr) 로 바꾸고
   index.html 의 감싸는 div 를 .wrap 에서 .wrap-wide(1080px) 로 되돌리세요. */
.principles{display:grid;grid-template-columns:repeat(2,1fr);gap:16px;text-align:left;}
.principle{background:var(--card);border:1px solid var(--line);border-radius:16px;padding:26px 24px;}
.principle .num{font-family:var(--mono);font-size:var(--label);color:var(--accent-ink);display:block;margin-bottom:16px;}
.principle h3{font-size:1.14rem;margin-bottom:8px;letter-spacing:-.01em;}
.principle p{color:var(--muted);font-size:.98rem;}

/* 문의 · 회사 정보 */
/* 카드 1개 기준으로 가운데 1열 배치.
   카드를 다시 2개로 늘릴 때는 grid-template-columns 를 `1fr 1fr` 로,
   max-width 를 `none` 으로 되돌리세요. */
.support-grid{
  display:grid;
  grid-template-columns:1fr;
  gap:18px;
  max-width:560px;
  margin:0 auto;
  text-align:left;
}
.info-card{background:var(--card);border:1px solid var(--line);border-radius:16px;padding:28px 26px;}
.info-card h3{font-size:1.16rem;margin-bottom:14px;letter-spacing:-.01em;}
.info-card p,.info-card li{color:var(--muted);font-size:.98rem;}
.info-card ul{margin:0 0 0 1.1em;}
/* 이메일 버튼만 카드 안에서 가운데로. 제목·본문은 왼쪽 정렬을 유지합니다.
   .mail-btn 은 기본이 inline-flex 라 margin:auto 가 듣지 않으므로
   block 레벨(flex)로 바꾸고 width 를 내용 크기에 맞춥니다. */
.info-card .mail-btn{display:flex;width:fit-content;margin:16px auto 0;}

.mail-btn{
  display:inline-flex;align-items:center;gap:.6em;
  background:var(--ink);color:#fff;text-decoration:none;font-weight:600;font-size:1rem;
  padding:14px 24px;border-radius:12px;transition:transform .18s,background .18s;
}
.mail-btn:hover{transform:translateY(-2px);background:#000;}
.mail-btn .m{font-family:var(--mono);font-size:.92rem;}


/* 9. 페이지: 앱 상세 (focus-timer.html, restaurant-notes.html) ============= */

.page-app hr.div{margin:56px auto;}
.page-app footer{padding:44px 0 60px;margin-top:64px;}

.back{
  display:inline-flex;align-items:center;gap:.4em;font-size:.9rem;
  color:var(--muted);text-decoration:none;margin-top:40px;transition:gap .2s,color .18s;
}
.back:hover{color:var(--ink);gap:.7em;}

.app-hero{text-align:center;padding:36px 0 8px;}
.app-hero .cat{
  font-family:var(--mono);font-size:var(--label);letter-spacing:.14em;
  text-transform:uppercase;color:var(--muted);
}
.app-hero h1{font-size:clamp(2.1rem,5vw,3.2rem);font-weight:800;letter-spacing:-.03em;line-height:1.12;margin:18px 0 6px;}
.app-hero .wip{font-family:var(--mono);font-size:var(--label);color:var(--muted);}
.app-hero .tagline{font-size:1.28rem;color:var(--accent-ink);font-weight:600;margin-top:18px;}

.page-app .lead{text-align:center;font-size:1.1rem;color:#3f4145;max-width:56ch;margin:30px auto 0;}

.feat-head{text-align:center;margin-bottom:34px;}
.feat-head h2{font-size:1.7rem;font-weight:700;letter-spacing:-.02em;margin-top:14px;}
.features{display:grid;gap:16px;}
.feature{background:var(--card);border:1px solid var(--line);border-radius:14px;padding:24px 26px;text-align:left;}
.feature h3{font-size:1.12rem;font-weight:700;margin-bottom:6px;}
.feature p{color:var(--muted);font-size:.99rem;}

/* 로컬 저장 안내 (restaurant-notes 전용) */
.privacy-badge{max-width:60ch;margin:0 auto;background:var(--accent-tint);border-radius:14px;padding:22px 26px;text-align:center;}
.privacy-badge strong{color:var(--accent-ink);}
.privacy-badge p{color:var(--body-text);font-size:1rem;}

/* 스토어 버튼 */
.store-wrap{text-align:center;}
.store-note{font-family:var(--mono);font-size:var(--label);letter-spacing:.06em;color:var(--muted);margin-bottom:18px;}
.stores{display:flex;gap:12px;justify-content:center;flex-wrap:wrap;}
.store-btn{
  display:inline-flex;align-items:center;gap:.5em;
  border:1px solid var(--line);background:var(--card);color:var(--muted);
  border-radius:12px;padding:13px 22px;font-weight:600;font-size:.95rem;
  text-decoration:none;cursor:default;
}
.store-btn.disabled{opacity:.6;}


/* 10. 페이지: 개인정보 처리방침 (privacy_policy.html) ====================== */

.page-doc{line-height:1.75;}
/* 본문 안의 링크만 강조색. 네비게이션·푸터 링크는 영향받지 않습니다. */
.page-doc main a{color:var(--accent-ink);}
.page-doc hr.div{margin:34px 0;}
.page-doc footer{padding:44px 0 60px;margin-top:56px;}

/* 문서 제목의 라벨에는 앞쪽 점을 쓰지 않습니다. */
.page-doc .doc-head .eyebrow{display:inline;letter-spacing:.16em;}
.page-doc .doc-head .eyebrow::before{content:none;}

.doc-head{text-align:center;padding:64px 0 30px;}
.doc-head h1{font-size:clamp(1.9rem,4.5vw,2.6rem);font-weight:800;letter-spacing:-.03em;margin-top:14px;}

.intro{color:#3f4145;font-size:1.02rem;margin-bottom:22px;}

.highlight{background:var(--accent-tint);border-radius:14px;padding:22px 24px;margin:26px 0;font-size:.98rem;color:#33353a;}
.page-doc .highlight strong{color:var(--accent-ink);}

h2.article{font-size:1.22rem;font-weight:800;letter-spacing:-.01em;margin:38px 0 12px;padding-top:8px;}
h3.sub{font-size:1.02rem;font-weight:700;margin:20px 0 8px;color:var(--accent-ink);}
p.body{color:var(--body-text);margin-bottom:12px;font-size:1rem;}

.page-doc main ul,.page-doc main ol{margin:0 0 14px 1.2em;color:var(--body-text);}
.page-doc main li{margin-bottom:7px;font-size:1rem;}
.page-doc main strong{color:var(--ink);}

/* 표 */
.table-scroll{overflow-x:auto;margin:14px 0 18px;}
.page-doc table{border-collapse:collapse;width:100%;font-size:.92rem;min-width:520px;}
.page-doc th,.page-doc td{border:1px solid var(--line);padding:10px 12px;text-align:left;vertical-align:top;color:var(--body-text);}
.page-doc th{background:var(--card);font-weight:700;color:var(--ink);}

.note-box{
  border-left:3px solid var(--accent);background:var(--accent-tint);
  padding:16px 20px;border-radius:0 10px 10px 0;margin:16px 0;font-size:.96rem;color:#33353a;
}
.page-doc .note-box strong{color:var(--accent-ink);}

.effective{
  background:var(--card);border:1px solid var(--line);border-radius:12px;
  padding:20px 24px;margin-top:36px;text-align:center;
  font-family:var(--mono);font-size:.9rem;color:var(--muted);line-height:2;
}


/* 11. 페이지: 404 (404.html) =============================================== */

.page-error{min-height:100svh;}
.page-error main{min-height:calc(100svh - 62px);display:grid;place-items:center;padding:72px 0;text-align:center;}
.page-error footer{padding:28px 0;color:var(--muted);font-size:.85rem;}

.error-card{
  max-width:680px;margin:0 auto;padding:42px 34px;
  background:var(--card);border:1px solid var(--line);border-radius:16px;
}
.error-logo{
  width:88px;height:88px;border-radius:22px;display:block;object-fit:cover;
  margin:0 auto 22px;box-shadow:0 18px 42px -28px rgba(27,29,34,.45);
}
.error-card h1{font-size:clamp(2.1rem,5vw,3.4rem);font-weight:800;letter-spacing:-.035em;line-height:1.12;margin:22px 0 16px;}
.error-card p{color:var(--muted);font-size:1.06rem;max-width:48ch;margin:0 auto;}

.actions{display:flex;justify-content:center;gap:12px;flex-wrap:wrap;margin-top:34px;}
.btn{
  display:inline-flex;align-items:center;justify-content:center;
  min-height:46px;padding:0 20px;border-radius:12px;font-weight:700;text-decoration:none;
  transition:transform .18s,background .18s,color .18s,border-color .18s;
}
.btn.primary{background:var(--ink);color:#fff;}
.btn.primary:hover{background:#000;transform:translateY(-2px);}
.btn.secondary{border:1px solid var(--line);background:#fff;color:var(--accent-ink);}
.btn.secondary:hover{border-color:#dcdce4;transform:translateY(-2px);}


/* 12. 반응형 · 모션 최소화 ================================================= */

@media (max-width:720px){
  .nav-links{gap:16px;}
  .nav-links a.hide-sm{display:none;}

  .page-home .hero{padding:76px 0 62px;}
  .page-home section{padding:60px 0;}
  .page-home .cards,
  .page-home .principles,
  .page-home .support-grid{grid-template-columns:1fr;}

  .page-app hr.div{margin:44px auto;}
  .page-app footer{margin-top:48px;}

  .page-error .error-card{padding:34px 24px;}
  .page-error .actions,.page-error .btn{width:100%;}
}

@media (prefers-reduced-motion:reduce){
  html{scroll-behavior:auto;}
  .reveal{opacity:1;transform:none;transition:none;}
  *{transition:none!important;}
}