@charset "utf-8";
/* /app — TOPIK 데일리5 앱 랜딩.
   상단 띠 색은 앱 자체의 스플래시 배경(#FDEDEE)과 맞췄다.
   QR 로 들어온 사람이 앱에서 본 색을 그대로 만나야 같은 물건으로 읽힌다. */

#sub_title_bg.pt_sec_app{background:#fdedee;border-bottom:1px solid #f2ccd0}

.ptapp_hero{
  display:flex;gap:56px;align-items:center;
  padding:56px 20px 44px;
}
.ptapp_hero_text{flex:1 1 auto;min-width:0}
.ptapp_hero_shot{flex:0 0 268px}
.ptapp_hero_shot img{
  width:100%;height:auto;display:block;border-radius:22px;
  border:1px solid #e6e2da;box-shadow:0 14px 38px rgba(0,0,0,.12);
}

.ptapp_kicker{
  font-size:var(--pt-fs-xs);letter-spacing:.12em;text-transform:uppercase;
  color:#b86e00;margin:0 0 10px;font-weight:700;
}
.ptapp_tagline{
  font-family:'Noto_bold',sans-serif;
  font-size:var(--pt-fs-h2);line-height:1.28;letter-spacing:-.02em;
  color:#141414;margin:0 0 14px;max-width:22ch;
}
.ptapp_lede{
  font-size:var(--pt-fs-lead);line-height:1.65;color:#444;
  margin:0 0 22px;max-width:56ch;
}

.ptapp_badges{list-style:none;margin:0 0 26px;padding:0;display:flex;flex-wrap:wrap;gap:8px 18px}
.ptapp_badges li{font-size:var(--pt-fs-small);color:#333;display:flex;align-items:center;gap:6px}
.ptapp_badges .fa{color:#1f7a4d}

.ptapp_coming{
  background:#fff;border:1px solid #f2ccd0;border-radius:10px;
  padding:14px 16px;margin:0 0 20px;max-width:52ch;
}
.ptapp_coming_title{margin:0 0 4px;font-weight:700;font-size:var(--pt-fs-body);color:#141414}
.ptapp_coming_sub{margin:0;font-size:var(--pt-fs-small);line-height:1.6;color:#666}

.ptapp_stores{display:flex;flex-wrap:wrap;gap:10px;margin:0 0 20px}
.ptapp_store{
  display:inline-flex;align-items:center;gap:9px;
  background:#141414;color:#fff;border-radius:10px;
  padding:13px 20px;font-size:var(--pt-fs-body);font-weight:700;text-decoration:none;
}
.ptapp_store:hover{background:#333;color:#fff}
.ptapp_store .fa{font-size:19px}

.ptapp_cta{display:flex;flex-wrap:wrap;gap:10px;margin:0 0 22px}
.ptapp_btn{
  display:inline-block;border-radius:10px;padding:13px 22px;
  font-size:var(--pt-fs-body);font-weight:700;text-decoration:none;
  border:1px solid transparent;
}
.ptapp_btn_primary{background:#c8102e;color:#fff}
.ptapp_btn_primary:hover{background:#a70d26;color:#fff}
.ptapp_btn_ghost{background:#fff;color:#141414;border-color:#d8d4cc}
.ptapp_btn_ghost:hover{border-color:#141414;color:#141414}

.ptapp_langs{
  font-size:var(--pt-fs-xs);color:#777;margin:0;line-height:1.6;
}
.ptapp_langs span{font-weight:700;color:#555;margin-right:6px}

/* ── 기능 넷 ── */
.ptapp_features{padding:8px 20px 8px}
.ptapp_features ul{
  list-style:none;margin:0;padding:0;
  display:grid;gap:18px;grid-template-columns:repeat(4,1fr);
}
.ptapp_features li{
  background:#fff;border:1px solid #e6e2da;border-radius:12px;padding:20px 18px;
}
.ptapp_features .fa{font-size:20px;color:#b86e00;margin-bottom:10px;display:block}
.ptapp_features h3{
  font-size:var(--pt-fs-body);font-weight:700;color:#141414;margin:0 0 6px;line-height:1.35;
}
.ptapp_features p{font-size:var(--pt-fs-small);line-height:1.65;color:#666;margin:0}

/* ── 화면 셋 ── */
.ptapp_shots{padding:52px 20px 8px}
.ptapp_shots h2{
  font-family:'Noto_bold',sans-serif;font-size:var(--pt-fs-h3);
  color:#141414;margin:0 0 22px;
}
.ptapp_shots ul{
  list-style:none;margin:0;padding:0;
  display:grid;gap:26px;grid-template-columns:repeat(3,1fr);max-width:840px;
}
.ptapp_shots img{
  width:100%;height:auto;display:block;border-radius:16px;
  border:1px solid #e6e2da;box-shadow:0 8px 22px rgba(0,0,0,.08);
}
.ptapp_shots p{font-size:var(--pt-fs-small);color:#666;margin:10px 0 0;line-height:1.5}

/* ── 만든 사람 ── */
.ptapp_author{padding:52px 20px 80px}
.ptapp_author_box{
  display:flex;gap:18px;align-items:flex-start;
  background:#faf8f5;border:1px solid #e6e2da;border-radius:12px;
  padding:24px 24px;max-width:760px;
}
.ptapp_author_mark{
  flex:0 0 auto;width:52px;height:52px;border-radius:50%;
  background:#fdeedc;color:#b86e00;
  display:flex;align-items:center;justify-content:center;
  font-size:22px;font-weight:700;
}
.ptapp_author_title{
  font-size:var(--pt-fs-xs);letter-spacing:.08em;color:#b86e00;
  font-weight:700;margin:0 0 4px;
}
.ptapp_author_name{font-size:var(--pt-fs-body);font-weight:700;color:#141414;margin:0 0 6px}
.ptapp_author_body{font-size:var(--pt-fs-small);line-height:1.7;color:#555;margin:0 0 10px;max-width:60ch}
.ptapp_author_link{font-size:var(--pt-fs-small);font-weight:700;color:#c8102e;text-decoration:none}
.ptapp_author_link:hover{text-decoration:underline}

@media (max-width: 1023px){
  .ptapp_features ul{grid-template-columns:repeat(2,1fr)}
}
@media (max-width: 767px){
  .ptapp_hero{flex-direction:column;gap:30px;padding:34px 20px 30px}
  .ptapp_hero_shot{flex:0 0 auto;width:230px;align-self:center}
  .ptapp_tagline{max-width:none}
  .ptapp_features ul{grid-template-columns:1fr}
  .ptapp_shots ul{grid-template-columns:1fr;gap:30px;max-width:300px}
  .ptapp_shots{padding-top:38px}
  .ptapp_author{padding:38px 20px 60px}
  .ptapp_author_box{flex-direction:column;gap:14px;padding:20px}
  .ptapp_btn,.ptapp_store{width:100%;text-align:center;justify-content:center}
}

/* ── 다음 단계: 앱 → 무료 가입 → 모의고사 ── */
.ptapp_path{padding:56px 20px 8px}
.ptapp_path h2{
  font-family:'Noto_bold',sans-serif;font-size:var(--pt-fs-h3);
  color:#141414;margin:0 0 10px;
}
.ptapp_path_lede{
  font-size:var(--pt-fs-body);line-height:1.7;color:#555;
  margin:0 0 26px;max-width:62ch;
}
.ptapp_steps{
  list-style:none;margin:0 0 26px;padding:0;counter-reset:ptstep;
  display:grid;gap:16px;grid-template-columns:repeat(3,1fr);
}
.ptapp_step{
  position:relative;background:#fff;border:1px solid #e6e2da;border-radius:12px;
  padding:20px 20px 22px;
}
/* 마지막 칸이 목적지다. 눈에 먼저 들어와야 한다. */
.ptapp_step.is_goal{border-color:#c8102e;background:#fffafa}
.ptapp_step_no{
  display:inline-block;font-size:var(--pt-fs-xs);font-weight:700;letter-spacing:.06em;
  color:#b86e00;background:#fdeedc;border-radius:999px;padding:3px 10px;margin-bottom:10px;
}
.ptapp_step.is_goal .ptapp_step_no{color:#c8102e;background:#fbe0e4}
.ptapp_step h3{
  font-size:var(--pt-fs-body);font-weight:700;color:#141414;margin:0 0 6px;line-height:1.35;
}
.ptapp_step p{font-size:var(--pt-fs-small);line-height:1.7;color:#666;margin:0}

/* 단계 사이 화살표 — 흐름이 한 방향임을 보인다 */
.ptapp_step + .ptapp_step::before{
  content:'›';position:absolute;left:-13px;top:50%;transform:translateY(-50%);
  font-size:22px;color:#c9c4bb;line-height:1;
}
.ptapp_path_cta{display:flex;flex-direction:column;align-items:flex-start;gap:8px}
.ptapp_path_note{font-size:var(--pt-fs-xs);color:#888;margin:0}

@media (max-width: 1023px){
  .ptapp_steps{grid-template-columns:1fr}
  .ptapp_step + .ptapp_step::before{
    left:50%;top:-14px;transform:translateX(-50%) rotate(90deg);
  }
}
@media (max-width: 767px){
  .ptapp_path{padding:38px 20px 4px}
  .ptapp_path_cta{align-items:stretch}
  .ptapp_path_note{text-align:center}
}