@charset "utf-8";
/* ============================================================
   진단 선택(U-02) 전용
   ============================================================ */

.pick-head{padding:0 20px 0}
.pick-head h1{font-size:var(--fs-h1);font-weight:800;letter-spacing:-.042em;line-height:1.3;text-wrap:balance}
.pick-head p{margin-top:10px;font-size:var(--fs-body);color:var(--text-sub);text-align:justify;word-break:normal}

.pick-sec{padding:26px 20px 0}
.pick-sec > h2{
  display:flex;align-items:center;gap:8px;
  font-size:var(--fs-label);font-weight:800;letter-spacing:.13em;color:var(--text-dim);
  margin-bottom:12px;
}
.pick-sec > h2::after{content:"";flex:1;height:1px;background:var(--line)}

/* ── 바로 시작 카드 (기초·응용) ─────────────────── */
.starts{display:grid;gap:12px}
.start{
  position:relative;overflow:hidden;isolation:isolate;display:flex;flex-direction:column;
  padding:20px;border-radius:22px;
  background:var(--card);border:1px solid var(--line);
  box-shadow:0 1px 2px rgba(14,23,38,.04);
  transition:transform .5s var(--ease), box-shadow .5s var(--ease), border-color .5s var(--ease);
}
.start::before{
  content:"";position:absolute;right:-34%;top:-72%;width:86%;height:184%;z-index:-1;
  background:radial-gradient(circle,var(--glow),transparent 66%);
  opacity:.55;transition:opacity .55s var(--ease), transform .55s var(--ease);
}
.start:hover{transform:translateY(-5px);border-color:#DDE6F2;box-shadow:0 22px 48px -26px rgba(14,23,38,.32)}
.start:hover::before{opacity:1;transform:translate(-6%,8%)}
.start:active{transform:translateY(-2px)}

.start-head{display:flex;align-items:center;gap:12px}
.start-ico{
  flex-shrink:0;display:grid;place-items:center;width:46px;height:46px;border-radius:15px;
  background:var(--chip);color:#fff;box-shadow:0 10px 20px -10px var(--chip-shadow);
  transition:transform .5s var(--ease);
}
.start:hover .start-ico{transform:translateY(-2px) rotate(-4deg)}
.start-ico svg{width:22px;height:22px;stroke:currentColor;fill:none;stroke-width:1.9;stroke-linecap:round;stroke-linejoin:round}
.start .start-head h3{font-size:var(--fs-card);font-weight:800;letter-spacing:-.035em;
  color:var(--text);text-transform:none}
.start-head .tag{
  margin-left:auto;flex-shrink:0;font-size:var(--fs-label);font-weight:700;color:var(--text-sub);
  background:#F1F5FA;border:1px solid #E7EDF5;padding:5px 11px;border-radius:var(--r-pill);
}
.start p{margin:13px 0;font-size:var(--fs-body);color:var(--text-sub);text-align:justify;word-break:normal}
.start-foot{
  display:flex;align-items:center;gap:8px;margin-top:29px;padding-top:15px;
  border-top:1px solid #EEF2F8;font-size:var(--fs-sub);font-weight:600;color:var(--text-dim);
}
/* 진입 배지 — 대문(index)의 「진단 시작」과 같은 모양.
   아이콘과 같은 색 계열을 아주 연하게 깔고 글자만 진하게 쓴다. */
.start-go{
  margin-left:auto;flex-shrink:0;
  display:inline-flex;align-items:center;gap:6px;
  height:38px;padding:0 16px;border-radius:var(--r-pill);
  background:var(--soft);color:var(--tone-ink);
  border:1px solid var(--soft-line);
  font-size:var(--fs-sub);font-weight:800;letter-spacing:-.02em;
  transition:background .3s var(--ease), border-color .3s var(--ease);
}
.start-go svg{width:15px;height:15px;stroke:currentColor;fill:none;stroke-width:2.6;stroke-linecap:round;
  transition:transform .4s var(--ease)}
.start:hover .start-go{background:var(--soft-on);border-color:var(--soft-line-on)}
.start:hover .start-go svg{transform:translateX(3px)}

.start.s-basic{--tone:#0EA47A;--chip:linear-gradient(140deg,#34E0AE,#059669);
  --chip-shadow:rgba(5,150,105,.55);--glow:rgba(52,224,174,.16);
  --tone-ink:#0B8362;--soft:rgba(14,164,122,.10);--soft-on:rgba(14,164,122,.17);
  --soft-line:rgba(14,164,122,.22);--soft-line-on:rgba(14,164,122,.34)}
.start.s-applied{--tone:#D97706;--chip:linear-gradient(140deg,#FBBF24,#EA8C00);
  --chip-shadow:rgba(234,140,0,.5);--glow:rgba(251,191,36,.18);
  --tone-ink:#AC5F05;--soft:rgba(217,119,6,.10);--soft-on:rgba(217,119,6,.17);
  --soft-line:rgba(217,119,6,.22);--soft-line-on:rgba(217,119,6,.34)}

/* ── 대상 그룹 ─────────────────────────────────── */
.tgroup + .tgroup{margin-top:26px}
.tgroup > h3{
  display:flex;align-items:center;gap:7px;
  font-size:var(--fs-label);font-weight:800;letter-spacing:.11em;color:var(--text-dim);margin-bottom:10px;
}
.tgroup > h3::after{content:"";flex:1;height:1px;background:#EEF2F8}
.start.s-pre{--tone:#E0703A;--chip:linear-gradient(140deg,#FFB27A,#E0703A);
  --chip-shadow:rgba(224,112,58,.5);--glow:rgba(255,178,122,.18);
  --tone-ink:#BF521E;--soft:rgba(224,112,58,.10);--soft-on:rgba(224,112,58,.17);
  --soft-line:rgba(224,112,58,.22);--soft-line-on:rgba(224,112,58,.34)}
.start.s-e12{--tone:#C2831C;--chip:linear-gradient(140deg,#FFD36E,#D9922A);
  --chip-shadow:rgba(217,146,42,.5);--glow:rgba(255,211,110,.2);
  --tone-ink:#9A6816;--soft:rgba(194,131,28,.10);--soft-on:rgba(194,131,28,.17);
  --soft-line:rgba(194,131,28,.22);--soft-line-on:rgba(194,131,28,.34)}
.start.s-e34{--tone:#3F9E52;--chip:linear-gradient(140deg,#8BDE96,#3F9E52);
  --chip-shadow:rgba(63,158,82,.48);--glow:rgba(139,222,150,.2);
  --tone-ink:#358445;--soft:rgba(63,158,82,.10);--soft-on:rgba(63,158,82,.17);
  --soft-line:rgba(63,158,82,.22);--soft-line-on:rgba(63,158,82,.34)}
.start.s-e56{--tone:#1E9C8E;--chip:linear-gradient(140deg,#6FE0D0,#0F857A);
  --chip-shadow:rgba(15,133,122,.5);--glow:rgba(111,224,208,.2);
  --tone-ink:#198277;--soft:rgba(30,156,142,.10);--soft-on:rgba(30,156,142,.17);
  --soft-line:rgba(30,156,142,.22);--soft-line-on:rgba(30,156,142,.34)}
.start.s-mid{--tone:#2F72D8;--chip:linear-gradient(140deg,#79B2FF,#2563EB);
  --chip-shadow:rgba(37,99,235,.5);--glow:rgba(121,178,255,.2);
  --tone-ink:#2F72D8;--soft:rgba(47,114,216,.10);--soft-on:rgba(47,114,216,.17);
  --soft-line:rgba(47,114,216,.22);--soft-line-on:rgba(47,114,216,.34)}
.start.s-high{--tone:#4C56C7;--chip:linear-gradient(140deg,#9AA5FF,#3F49C4);
  --chip-shadow:rgba(63,73,196,.5);--glow:rgba(154,165,255,.2);
  --tone-ink:#4C56C7;--soft:rgba(76,86,199,.10);--soft-on:rgba(76,86,199,.17);
  --soft-line:rgba(76,86,199,.22);--soft-line-on:rgba(76,86,199,.34)}
.start.s-adt{--tone:#6D4DF6;--chip:linear-gradient(140deg,#A78BFF,#5B3DF5);
  --chip-shadow:rgba(91,61,245,.48);--glow:rgba(167,139,255,.18);
  --tone-ink:#6D4DF6;--soft:rgba(109,77,246,.10);--soft-on:rgba(109,77,246,.17);
  --soft-line:rgba(109,77,246,.22);--soft-line-on:rgba(109,77,246,.34)}
.start.s-snr{--tone:#B0562C;--chip:linear-gradient(140deg,#F0A986,#B0562C);
  --chip-shadow:rgba(176,86,44,.5);--glow:rgba(240,169,134,.2);
  --tone-ink:#B0562C;--soft:rgba(176,86,44,.10);--soft-on:rgba(176,86,44,.17);
  --soft-line:rgba(176,86,44,.22);--soft-line-on:rgba(176,86,44,.34)}
.start.s-def{--tone:#8A4BC9;--chip:linear-gradient(140deg,#CFA0F5,#7E3BC0);
  --chip-shadow:rgba(126,59,192,.5);--glow:rgba(207,160,245,.2);
  --tone-ink:#8A4BC9;--soft:rgba(138,75,201,.10);--soft-on:rgba(138,75,201,.17);
  --soft-line:rgba(138,75,201,.22);--soft-line-on:rgba(138,75,201,.34)}

.deep-foot{margin-top:18px;font-size:var(--fs-sub);color:var(--text-dim);text-align:center}

/* ── 태블릿 가로 ─────────────────────────────────── */
@media (min-width:768px){
  .pick-head{padding:0 40px 0}
  .pick-head h1{font-size:calc(2.05rem * var(--fs-k))}
  .pick-sec{padding:30px 40px 0}
  .starts{grid-template-columns:repeat(2,1fr)}
  .start{display:flex;flex-direction:column}
  .start-foot{margin-top:auto}
  .tgroup .starts{grid-template-columns:repeat(2,1fr)}
  .start.wide{grid-column:1 / -1}
}