/* ---------------------------------------------------------------
   07-cc-design-system-v1-full.css
   원본 index.html의 7번째 <style> 블록 (id="cc-design-system-v1-full")
   ⚠ 이 파일들은 뒤 순서가 앞 순서를 덮어쓰는 레이어 구조입니다.
      index.html의 <link> 순서를 바꾸면 화면이 깨집니다.
   --------------------------------------------------------------- */

/* =========================================================
   척척펭귄 Design System v1.0 · Full web visual pass
   Visual layer only. Calculation / classification / copy logic untouched.
   ========================================================= */
:root{
  --cc-paper:#FFFFFF;
  --cc-paper-2:#FFFFFF;
  --cc-paper-warm:#F4F8F7;
  --cc-border:#E3EBEA;
  --cc-mint:#5C9993;
  --cc-mint-dark:#477D78;
  --cc-mint-pale:#EAF3F1;
  --cc-sage:#A9B5AA;
  --cc-lav:#B8A8C8;
  --cc-ink:#27231F;
  --cc-body:#4B443D;
  --cc-muted:#857C73;
  --cc-shadow:0 10px 26px rgba(74,61,49,.07);
  --cc-shadow-sm:0 5px 16px rgba(74,61,49,.055);
}
html,body{background:#FFFFFF!important;color:var(--cc-body)!important}
body{background-image:none!important}
.app{background:#FFFFFF!important;border:0!important;box-shadow:none!important}

/* ---------- Shared paper language ---------- */
#viewInput .card,#viewFreeResult .card,#viewPaidPreview .card,
#viewFreeResult .l2v8-data-zone,#viewFreeResult .l2v8-gap-card,
#viewFreeResult .l2v9-acc,#viewFreeResult .l2v8-share-frame{
  background:var(--cc-paper-2)!important;
  border-color:var(--cc-border)!important;
  box-shadow:var(--cc-shadow-sm)!important;
}
#viewInput .card,#viewFreeResult .card,#viewPaidPreview .card{border-radius:22px!important}
#viewInput input,#viewInput select{background:#fff!important;border-color:#E3EBEA!important;color:var(--cc-ink)!important}
#viewInput input:focus,#viewInput select:focus{border-color:var(--cc-mint)!important;box-shadow:0 0 0 3px rgba(92,153,147,.12)!important}

/* ---------- Layer 1 : simple room banner ---------- */
#viewInput .l1-house-hero{
  margin:0 0 22px!important;border-radius:22px!important;overflow:hidden!important;
  border:1px solid var(--cc-border)!important;box-shadow:var(--cc-shadow)!important;
  background:#F7F8F6!important;position:relative!important;
}
#viewInput .l1-house-hero img{
  display:block!important;width:100%!important;height:178px!important;object-fit:cover!important;
  object-position:center center!important;filter:saturate(.88) brightness(1.025) contrast(.97)!important;
}
#viewInput .l1-house-hero:after{
  content:"";position:absolute;inset:0;pointer-events:none;
  background:linear-gradient(90deg,rgba(255,253,250,.08),rgba(255,253,250,0) 34%,rgba(255,253,250,0) 68%,rgba(255,253,250,.05));
}
#viewInput .l1-shell,#viewInput .l1-section,#viewInput .input-section{background:transparent!important}
#viewInput .l1-head,#viewInput h1,#viewInput h2,#viewInput h3{color:var(--cc-ink)!important}
#viewInput .l1-sub,#viewInput .hint,#viewInput .sub{color:var(--cc-muted)!important}
#viewInput .l1-cta,#viewInput .main-btn,#viewInput button.primary{
  background:var(--cc-mint)!important;border-color:var(--cc-mint)!important;color:#fff!important;
  box-shadow:0 8px 18px rgba(92,153,147,.16)!important;
}
#viewInput .l1-cta:hover,#viewInput .main-btn:hover{background:var(--cc-mint-dark)!important}
#viewInput .choice.active,#viewInput .seg.active,#viewInput button.selected,
#viewInput .quick-option.active{background:var(--cc-mint-pale)!important;border-color:var(--cc-mint)!important;color:var(--cc-mint-dark)!important}

/* ---------- Layer 2 : record-book hierarchy ---------- */
#viewFreeResult{position:relative}
#viewFreeResult:before{
  content:"척척펭귄  ·  GAP RECORD";display:block;width:max-content;max-width:80%;margin:2px 0 18px 3px;
  padding:8px 13px;border-radius:9px;background:#B7CEC8;color:#27312F;
  border:1px solid #9EB9B3;box-shadow:0 4px 10px rgba(70,82,78,.08);
  font-family:var(--font-display);font-size:12px;letter-spacing:.02em;
}
#viewFreeResult .l2v8-hero{
  margin:0 0 32px!important;padding:20px 20px 18px!important;border:1px solid var(--cc-border)!important;
  border-radius:24px!important;background:linear-gradient(145deg,#FFFDFC 0%,#F5EEE5 100%)!important;
  box-shadow:var(--cc-shadow)!important;overflow:hidden!important;
}
#viewFreeResult .l2v8-hero:after{display:none!important}
#viewFreeResult .v161-result-kicker{color:var(--cc-ink)!important}
#viewFreeResult .l2v8-opener{color:#5A5148!important}
#viewFreeResult .l2v8-cue{color:#8A8178!important;margin-top:14px!important}
#viewFreeResult .l2v8-cue span{color:var(--cc-mint)!important}

/* Major sections become clean paper sheets, not decorative stickers. */
#viewFreeResult .l2v8-data-zone,#viewFreeResult .l2v8-gap-card,
#viewFreeResult .v16-character-hero,#viewFreeResult .elements-card,
#viewFreeResult .l2v9-reading,#viewFreeResult .l2v8-share{
  position:relative!important;
}
#viewFreeResult .l2v8-data-zone{background:#FBF8F3!important;border:1px solid var(--cc-border)!important;border-radius:24px!important;padding:21px 18px!important}
#viewFreeResult .l2v8-zone-head h2,#viewFreeResult .l2v8-gap-head h2,#viewFreeResult .l2v8-share-head h3,
#viewFreeResult .l2v8-final-copy h3,#viewFreeResult .l2v9-reading-head h2{color:var(--cc-ink)!important}
#viewFreeResult .l2v8-zone-head p,#viewFreeResult .l2v8-gap-head p,#viewFreeResult .l2v8-share-head p,
#viewFreeResult .l2v9-reading-head p{color:var(--cc-muted)!important}

/* Type labels echo the scalloped share-card label without flooding the page. */
#viewFreeResult .l2v8-type .tn,#viewFreeResult .result-type-name,#viewFreeResult [data-result-type-label]{
  color:var(--cc-mint-dark)!important;
}
#viewFreeResult .v16-character-hero{
  border:1px solid var(--cc-border)!important;border-radius:22px!important;background:#FFFDFC!important;
  box-shadow:var(--cc-shadow-sm)!important;padding:18px!important;
}
#viewFreeResult .v16-character-hero:before{
  content:"";position:absolute;top:-8px;left:20px;width:42px;height:17px;border-radius:4px;
  background:rgba(109,164,158,.28);transform:rotate(-3deg);pointer-events:none;
}

/* Five-element / evidence cards keep information-first color. */
#viewFreeResult .element-chip,#viewFreeResult .oheng-badge{box-shadow:none!important}
#viewFreeResult .l2v8-dashboard{background:#fff!important;border-color:#E4D9CC!important}
#viewFreeResult .l2v8-gauge{border-color:#D9CEC1!important;background:#FBF8F3!important}

/* Reading accordions: preserve layout, harmonize palette only. */
#viewFreeResult .l2v9-acc{border:1px solid var(--cc-border)!important;border-radius:18px!important;overflow:hidden!important}
#viewFreeResult .l2v9-acc-title{color:#37312C!important}
#viewFreeResult .l2v9-acc:nth-of-type(1){background:#F2F7F5!important}
#viewFreeResult .l2v9-acc:nth-of-type(2){background:#F1F6F8!important}
#viewFreeResult .l2v9-acc:nth-of-type(3){background:#FBF7EB!important}
#viewFreeResult .l2v9-acc:nth-of-type(4){background:#F5F1F7!important}
#viewFreeResult .l2v9-acc:nth-of-type(5){background:#FBF1EC!important}

/* Share section becomes the visual climax, borrowing the 8-card stationery language. */
#viewFreeResult .l2v8-share{margin-top:8px!important;padding-top:4px!important}
#viewFreeResult .l2v8-share-head{margin-bottom:14px!important}
#viewFreeResult .l2v8-share-frame{
  padding:13px!important;border-radius:26px!important;background:#EFE8DF!important;
  border:1px solid #DFD2C4!important;box-shadow:var(--cc-shadow)!important;
}
#viewFreeResult .l2v8-share-frame:before{
  content:"";position:absolute;z-index:2;left:25px;top:3px;width:17px;height:36px;border:3px solid #6EAAA4;
  border-radius:9px;transform:rotate(-8deg);background:transparent;opacity:.9;pointer-events:none;
}
#viewFreeResult .l2v8-share-frame canvas#shareCanvas{
  background:#FFFCF8!important;border:1px solid #E0D3C5!important;border-radius:20px!important;
  box-shadow:0 9px 22px rgba(75,62,49,.08)!important;
}
#viewFreeResult .share-btns button{border-radius:14px!important;border-color:#BFD4D1!important;background:#FFF!important;color:var(--cc-mint-dark)!important;box-shadow:none!important}
#viewFreeResult .share-btns button.fill{background:var(--cc-mint)!important;border-color:var(--cc-mint)!important;color:#fff!important}
#viewFreeResult .chemistry-section{background:#FBF8F3!important;border-color:var(--cc-border)!important;border-radius:20px!important}

#viewFreeResult .l2v8-final{
  border:1px solid var(--cc-border)!important;border-radius:24px!important;background:linear-gradient(135deg,#F5EFE6,#EDF4F2)!important;
  box-shadow:var(--cc-shadow-sm)!important;
}
#viewFreeResult .l2-cta{background:var(--cc-mint)!important;border-color:var(--cc-mint)!important;color:white!important}
#viewFreeResult .again{color:var(--cc-mint-dark)!important}

/* ---------- Layer 3 : private file / archive ---------- */
#viewPaidPreview{position:relative;padding-top:6px}
#viewPaidPreview:before{
  content:"척척펭귄  ·  PRIVATE FILE";display:inline-block;margin:0 0 15px 2px;padding:8px 13px;
  border-radius:9px;background:#B7CEC8;border:1px solid #9EB9B3;color:#27312F;
  font-family:var(--font-display);font-size:12px;letter-spacing:.02em;box-shadow:0 4px 10px rgba(70,82,78,.08)
}
#viewPaidPreview>.logo{display:none!important}
#viewPaidPreview>.tagline{display:none!important}
#viewPaidPreview>.card{
  position:relative;background:#FFFDFC!important;border:1px solid var(--cc-border)!important;border-radius:24px!important;
  padding:24px 20px 22px!important;box-shadow:var(--cc-shadow)!important;overflow:hidden;
}
#viewPaidPreview .report-title{color:var(--cc-ink)!important;margin-bottom:9px!important}
#viewPaidPreview .report-sub{color:var(--cc-muted)!important}
#viewPaidPreview .report-open{background:#FBF8F3!important;border-radius:18px!important;padding:15px!important;margin-top:16px!important}
#viewPaidPreview .report-outline{gap:10px!important}
#viewPaidPreview .report-outline div{background:#FFF!important;border:1px solid var(--cc-border)!important;border-radius:14px!important;color:#5B534B!important}
#viewPaidPreview .report-outline b{color:var(--cc-mint-dark)!important}
#viewPaidPreview .lock-divider{color:#83796F!important;border-color:#E3D8CB!important}
#viewPaidPreview .blur-wrap{border-radius:18px!important;overflow:hidden!important;background:#F7F2EC!important}
#viewPaidPreview .report-cta{background:var(--cc-mint)!important;color:#fff!important;border:0!important;border-radius:16px!important;box-shadow:0 8px 18px rgba(92,153,147,.15)!important}
#viewPaidPreview .again{color:var(--cc-mint-dark)!important}

/* footer */
.foot{color:#9A9189!important;border-top-color:#E5D9CC!important}

@media(max-width:460px){
  #viewInput .l1-house-hero img{height:150px!important}
  #viewFreeResult:before,#viewPaidPreview:before{font-size:11px;padding:7px 11px}
  #viewFreeResult .l2v8-hero{padding:17px 16px 16px!important}
  #viewFreeResult .l2v8-data-zone{padding:18px 15px!important}
  #viewPaidPreview>.card{padding:21px 16px 19px!important}
}
@media(max-width:390px){#viewInput .l1-house-hero img{height:138px!important}}