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

/* ========================================================================
   척척펭귄 DESIGN SYSTEM v1 · Layer1 visual test only
   - Scope: #viewInput only
   - No result/calc/copy changes
   - Share-card visual language translated at lower decoration density
   ======================================================================== */
#viewInput{
  --l1-paper:#FFFDF9;
  --l1-paper-2:#F7F1E9;
  --l1-bg:#F4EDE6;
  --l1-line:#E1D5C8;
  --l1-mint:#4A9A92;
  --l1-mint-soft:#EAF3F1;
  --l1-sage:#A6B3A9;
  --l1-ink:#1E1B18;
  --l1-body:#4B443D;
  --l1-muted:#877F77;
  --l1-lav:#B7A6CB;
  position:relative;
  isolation:isolate;
  padding:4px 0 14px;
  color:var(--l1-body);
}
#viewInput::before{
  content:"";
  position:absolute;
  z-index:-1;
  inset:-20px -18px -36px;
  border-radius:30px;
  background:
    radial-gradient(circle at 12% 11%, rgba(183,166,203,.10) 0 3px, transparent 4px),
    radial-gradient(circle at 88% 26%, rgba(74,154,146,.10) 0 3px, transparent 4px),
    linear-gradient(180deg, rgba(255,253,249,.64), rgba(244,237,230,.24));
  pointer-events:none;
}

/* House glimpse: one quiet entry into the brand world. */
#viewInput .l1-house-hero{
  position:relative;
  height:224px;
  margin:2px 0 28px;
  overflow:hidden;
  border:1px solid var(--l1-line);
  border-radius:28px;
  background:var(--l1-paper-2);
  box-shadow:0 15px 34px rgba(77,65,53,.09), 0 2px 0 rgba(255,255,255,.9) inset;
}
#viewInput .l1-house-hero>img{
  width:100%;height:100%;display:block;object-fit:cover;object-position:50% 67%;
  filter:saturate(.78) contrast(.92) brightness(1.07);
  transform:scale(1.015);
  pointer-events:none;user-select:none;-webkit-user-drag:none;
}
#viewInput .l1-house-wash{
  position:absolute;inset:0;
  background:linear-gradient(180deg,rgba(255,252,247,.06) 22%,rgba(255,252,247,.18) 100%);
  pointer-events:none;
}
#viewInput .l1-fabric-label{
  position:absolute;left:16px;top:15px;
  display:inline-flex;align-items:center;gap:8px;
  min-height:38px;padding:7px 13px 7px 11px;
  border:1px solid rgba(71,107,102,.35);border-radius:9px;
  background:rgba(166,179,169,.92);
  box-shadow:0 4px 10px rgba(55,70,67,.12);
  color:#27312F;font-family:'Jua',sans-serif;font-size:16px;letter-spacing:-.1px;
  backdrop-filter:blur(4px);
}
#viewInput .l1-fabric-label::after{
  content:"";position:absolute;inset:4px;border:1px dashed rgba(255,255,255,.58);border-radius:6px;pointer-events:none;
}
#viewInput .l1-fabric-label>*{position:relative;z-index:1}
#viewInput .l1-fabric-mark{font-size:8px;color:#F4F0E8;text-shadow:13px 0 0 #27312F,-1px 0 0 rgba(39,49,47,.22)}
#viewInput .l1-house-roomtag{
  position:absolute;right:15px;bottom:14px;
  padding:7px 10px;border-radius:999px;
  background:rgba(255,253,249,.82);border:1px solid rgba(225,213,200,.78);
  color:#69736F;font-size:10px;font-weight:800;letter-spacing:1.2px;
  box-shadow:0 3px 10px rgba(55,48,41,.06);backdrop-filter:blur(5px);
}
/* Legacy hero kept for functionality/rollback, visually replaced in this test. */
#viewInput>.l1-hero{display:none!important}

/* Intro typography: same copy, more editorial breathing room. */
#viewInput .l1-head{
  margin:0 auto 10px!important;
  max-width:390px;
  font-family:'Jua',sans-serif!important;
  font-size:31px!important;line-height:1.28!important;font-weight:400!important;
  letter-spacing:-.45px!important;color:var(--l1-ink)!important;
  text-align:center!important;word-break:keep-all!important;text-wrap:balance;
}
#viewInput .l1-sub{
  max-width:350px!important;margin:0 auto 28px!important;
  color:#77716B!important;font-size:15px!important;line-height:1.72!important;
  text-align:center!important;word-break:keep-all!important;text-wrap:pretty;
}

/* A single sheet for the factual inputs. */
#viewInput .l1-paper-card,
#viewInput .l1-mini-section{
  position:relative;
  margin:0 0 22px!important;
  padding:24px 18px 22px!important;
  border:1px solid var(--l1-line)!important;
  border-radius:24px!important;
  background:
    linear-gradient(rgba(255,255,255,.82),rgba(255,255,255,.82)),
    repeating-linear-gradient(0deg,transparent 0 19px,rgba(166,179,169,.08) 19px 20px),
    var(--l1-paper)!important;
  box-shadow:0 10px 26px rgba(72,62,51,.055),0 1px 0 #fff inset!important;
}
#viewInput .l1-basic-card::before{
  content:"";
  position:absolute;left:16px;top:-12px;width:12px;height:37px;
  border:2px solid var(--l1-mint);border-radius:9px;
  transform:rotate(-7deg);opacity:.78;background:transparent;
  box-shadow:inset 0 0 0 3px var(--l1-paper);
}
#viewInput .l1-basic-card::after{
  content:"";position:absolute;right:18px;top:15px;width:7px;height:7px;border-radius:50%;
  background:var(--l1-lav);opacity:.72;box-shadow:10px 7px 0 rgba(74,154,146,.28);
}
#viewInput .l1-field{margin-bottom:22px!important}
#viewInput .l1-field:last-child{margin-bottom:0!important}
#viewInput label{
  margin:0 2px 10px!important;color:#4A4540!important;
  font-family:'Nanum Gothic',sans-serif!important;font-size:15px!important;line-height:1.5!important;font-weight:800!important;
  word-break:keep-all!important;
}
#viewInput .l1-hint{font-size:13px!important;color:#9A928A!important;font-weight:400!important;margin-left:4px!important}

/* Inputs stay unmistakably UI, not scrapbook props. */
#viewInput input,#viewInput select{
  min-height:52px!important;padding:14px 15px!important;
  border:1.5px solid #DED4C9!important;border-radius:15px!important;
  background:#FFFEFC!important;color:#302C28!important;
  font-family:'Nanum Gothic',sans-serif!important;font-size:16px!important;
  box-shadow:0 1px 0 rgba(255,255,255,.95) inset!important;
  transition:border-color .16s,box-shadow .16s,background .16s!important;
}
#viewInput input::placeholder{color:#B4ACA4!important}
#viewInput input:focus,#viewInput select:focus{
  outline:none!important;border-color:var(--l1-mint)!important;background:#fff!important;
  box-shadow:0 0 0 3px rgba(74,154,146,.13)!important;
}
#viewInput .l1-row{gap:8px!important}
#viewInput .l1-seg{gap:8px!important}
#viewInput .l1-seg button,
#viewInput .l1-choice-grid button{
  min-height:50px!important;
  border:1.5px solid #DDD5CC!important;border-radius:15px!important;
  background:#FFFEFC!important;color:#68615A!important;
  font-family:'Nanum Gothic',sans-serif!important;font-weight:700!important;
  box-shadow:0 1px 0 rgba(255,255,255,.9) inset!important;
  transition:background .14s,border-color .14s,color .14s,transform .08s!important;
}
#viewInput .l1-seg button.on,
#viewInput .l1-choice-grid button.on{
  background:var(--l1-mint-soft)!important;border-color:#91B7B3!important;color:#356E68!important;font-weight:800!important;
  box-shadow:0 0 0 2px rgba(74,154,146,.06) inset!important;
}
#viewInput .l1-seg button:active,#viewInput .l1-choice-grid button:active{transform:translateY(1px)}

/* MBTI quick check becomes a small notebook inside the main sheet. */
#viewInput .l1-helper-btn{
  width:100%!important;margin-top:10px!important;min-height:50px!important;
  border:1.5px solid #CFE1DF!important;border-radius:15px!important;
  background:#F0F6F5!important;color:#3D7771!important;
  font-family:'Nanum Gothic',sans-serif!important;font-size:15px!important;font-weight:800!important;
  box-shadow:none!important;
}
#viewInput .l1-helper-copy{
  margin:8px 4px 0!important;color:#8A837C!important;font-size:13.5px!important;line-height:1.65!important;
}
#viewInput .quickcheck{
  margin-top:14px!important;padding:18px 15px!important;
  border:1px solid #DCE7E4!important;border-radius:19px!important;
  background:
    linear-gradient(rgba(255,254,252,.92),rgba(255,254,252,.92)),
    repeating-linear-gradient(0deg,transparent 0 21px,rgba(74,154,146,.09) 21px 22px)!important;
  box-shadow:0 6px 15px rgba(65,86,82,.045)!important;
}
#viewInput .quickcheck-head{margin-bottom:15px!important}
#viewInput .quickcheck-head b{font-family:'Jua',sans-serif!important;font-size:20px!important;font-weight:400!important;color:#313A38!important}
#viewInput .quickcheck-head span{display:block;margin-top:5px;color:#827D77!important;font-size:13.5px!important;line-height:1.6!important}
#viewInput .quick-q{padding:15px 0!important;border-top:1px dashed #D7E4E2!important}
#viewInput .quick-q p{font-size:15px!important;line-height:1.6!important;color:#4B5351!important;margin-bottom:10px!important}
#viewInput .quick-options{gap:8px!important}
#viewInput .quick-options button{
  min-height:54px!important;border:1.5px solid #DCD9D2!important;border-radius:14px!important;
  background:#FFFEFC!important;color:#68635D!important;font-size:13.5px!important;line-height:1.45!important;padding:10px 8px!important;
}
#viewInput .quick-options button.on{background:var(--l1-mint-soft)!important;border-color:#91B7B3!important;color:#356E68!important}
#viewInput .quick-result{background:#EAF3F1!important;color:#356E68!important;border:1px solid #CFE1DF!important;border-radius:13px!important}

/* The second sheet is quieter: questions are the hero, not decoration. */
#viewInput .l1-mini-section{margin-top:0!important;padding-top:25px!important;border-top:1px solid var(--l1-line)!important}
#viewInput .l1-mini-section::before{
  content:"";position:absolute;top:16px;right:18px;width:8px;height:8px;border-radius:50%;background:var(--l1-lav);opacity:.7;
}
#viewInput .l1-mini-head{
  font-family:'Jua',sans-serif!important;font-size:24px!important;line-height:1.35!important;color:#312E2A!important;margin:0 0 7px!important;
}
#viewInput .l1-mini-sub{font-size:14px!important;line-height:1.7!important;color:#847E77!important;margin:0 0 22px!important}
#viewInput .l1-choice-field{margin-bottom:22px!important}
#viewInput .l1-choice-field:last-child{margin-bottom:0!important}
#viewInput .l1-choice-field label{font-size:15px!important;line-height:1.58!important;margin-bottom:11px!important;text-wrap:balance}
#viewInput .l1-choice-grid{gap:8px!important}
#viewInput .l1-choice-grid button{padding:11px 10px!important;font-size:13.5px!important;line-height:1.48!important;word-break:keep-all!important;text-wrap:balance}

/* Primary action: clear UI, with the brand mint doing the work. */
#viewInput .l1-cta{
  width:100%!important;min-height:58px!important;margin:4px 0 0!important;padding:16px 18px!important;
  border:1px solid #3F8C84!important;border-radius:18px!important;
  background:var(--l1-mint)!important;color:#FFFDF9!important;
  font-family:'Jua',sans-serif!important;font-size:20px!important;font-weight:400!important;letter-spacing:-.1px!important;
  box-shadow:0 7px 17px rgba(74,154,146,.22)!important;
  transition:transform .08s,box-shadow .16s,background .16s!important;
}
#viewInput .l1-cta:hover{background:#438F87!important;box-shadow:0 9px 22px rgba(74,154,146,.26)!important}
#viewInput .l1-cta:active{transform:translateY(2px)!important;box-shadow:0 4px 10px rgba(74,154,146,.20)!important}

@media(max-width:430px){
  #viewInput .l1-house-hero{height:210px;border-radius:24px;margin-bottom:25px}
  #viewInput .l1-fabric-label{left:13px;top:13px;font-size:15px;min-height:36px;padding:6px 12px 6px 10px}
  #viewInput .l1-house-roomtag{right:12px;bottom:12px}
  #viewInput .l1-head{font-size:29px!important;max-width:360px}
  #viewInput .l1-sub{font-size:14.5px!important;margin-bottom:25px!important}
  #viewInput .l1-paper-card,#viewInput .l1-mini-section{padding:22px 15px 20px!important;border-radius:21px!important}
  #viewInput .l1-basic-card::before{left:14px}
}
@media(max-width:390px){
  #viewInput .l1-house-hero{height:194px}
  #viewInput .l1-house-hero>img{object-position:50% 68%}
  #viewInput .l1-head{font-size:28px!important}
  #viewInput .l1-row{gap:6px!important}
  #viewInput .l1-choice-grid{grid-template-columns:minmax(0,1fr) minmax(0,1fr)!important}
  #viewInput .l1-choice-grid button{font-size:13px!important;padding:10px 7px!important}
  #viewInput .quick-options button{font-size:13px!important}
}
@media(max-width:350px){
  #viewInput .l1-house-hero{height:180px}
  #viewInput .l1-house-roomtag{display:none}
  #viewInput .l1-head{font-size:26px!important}
  #viewInput .l1-paper-card,#viewInput .l1-mini-section{padding-left:13px!important;padding-right:13px!important}
  #viewInput .l1-choice-grid button{font-size:12.5px!important}
}