:root{font-family:sans-serif}*{-webkit-tap-highlight-color:transparent}body{margin:0;min-width:320px;min-height:100vh}@media (min-width: 481px){body{display:flex;justify-content:center;align-items:flex-start;background-color:#f5f5f5}}h1{font-size:3.2em;line-height:1.1}:root{--cream: #fff6ec;--cream-deep: #fbebd8;--card: #ffffff;--caramel: #e8a05c;--caramel-deep: #d98b45;--brown: #7b4b2a;--text-dark: #4a3526;--text-mid: #9a7a60;--text-soft: #b59a82;--line: #f1e3d2;--green: #6fa97e;--green-soft: #eaf3ec;--surface-soft: #fffbf4;--track: #f0dfc8;--dashed: #ebd7be;--track-warm: #f4e7d6;--ring: #f4dcc0;--font-display: "Jua", sans-serif;--font-body: "Pretendard", -apple-system, BlinkMacSystemFont, sans-serif}*{box-sizing:border-box}#root{width:100%;min-height:100vh;background-color:var(--cream-deep)}.page{width:100%;max-width:780px;margin:0 auto;padding:36px 32px 42px;background-color:var(--cream-deep);background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='84' height='84' viewBox='0 0 100 100'%3E%3Cg fill='%23D98B45' fill-opacity='0.07'%3E%3Cellipse cx='50' cy='64' rx='23' ry='19'/%3E%3Cellipse cx='24' cy='44' rx='9.5' ry='12.5'/%3E%3Cellipse cx='41' cy='30' rx='9' ry='13'/%3E%3Cellipse cx='59' cy='30' rx='9' ry='13'/%3E%3Cellipse cx='76' cy='44' rx='9.5' ry='12.5'/%3E%3C/g%3E%3C/svg%3E");font-family:var(--font-body);color:var(--text-dark);min-height:100vh}.dac-header{text-align:center;margin-bottom:26px}.dac-header-deco{display:flex;justify-content:center;align-items:center;gap:8px;margin-bottom:8px}.dac-title{margin:0;font-family:var(--font-display);font-weight:400;font-size:33px;color:var(--brown);letter-spacing:-.5px}.dac-subtitle{margin:9px 0 0;font-size:14px;font-weight:500;color:var(--text-mid)}.tag-card{position:relative;background:var(--card);border-radius:30px;padding:26px 26px 28px;border:2.5px solid var(--caramel);box-shadow:0 0 0 6px #fff,0 0 0 8px var(--ring),0 18px 36px #7b4b2a1f}.tag-card+.tag-card{margin-top:30px}.card-body{margin-top:14px}.tab-label{position:absolute;top:-16px;left:50%;transform:translate(-50%);display:inline-flex;align-items:center;gap:7px;font-family:var(--font-display);font-size:15px;color:#fff;padding:6px 22px;border-radius:20px;white-space:nowrap}.tab-label--caramel{background:var(--caramel);box-shadow:0 6px 14px #d88b4566}.tab-label--brown{background:var(--brown);box-shadow:0 6px 14px #7b4b2a57}.status-badge{position:absolute;top:22px;right:22px;display:inline-flex;align-items:center;gap:6px;font-family:var(--font-display);font-size:13px;color:var(--green);background:var(--green-soft);padding:6px 13px;border-radius:20px;white-space:nowrap}.pill-label{display:inline-block;font-family:var(--font-display);font-size:14px;color:var(--brown);background:var(--cream-deep);padding:5px 14px;border-radius:20px;margin-bottom:13px}.size-segment{display:grid;grid-template-columns:repeat(4,1fr);gap:10px;margin-bottom:24px}.seg-btn{border-radius:20px;padding:15px 8px;text-align:center;cursor:pointer;background:var(--surface-soft);border:2px solid var(--track);transition:transform .18s ease,box-shadow .18s ease,background .18s ease}.seg-btn:hover{transform:translateY(-1px)}.seg-btn--active{background:var(--caramel);border:2.5px solid var(--caramel-deep);box-shadow:0 8px 16px #d88b4557;transform:translateY(-2px)}.seg-name{display:block;font-family:var(--font-display);font-size:17px;color:var(--brown);white-space:nowrap}.seg-btn--active .seg-name{color:#fff}.seg-sub{display:block;font-size:11.5px;margin-top:2px;color:var(--text-soft);white-space:nowrap}.seg-btn--active .seg-sub{color:#ffffffe6}.age-number{text-align:center;margin:2px 0 16px}.age-number-val{font-family:var(--font-display);font-size:68px;color:var(--caramel-deep);line-height:1}.age-number-unit{font-family:var(--font-display);font-size:24px;color:var(--brown);margin-left:6px}.slider{position:relative;height:30px;margin-bottom:7px}.slider-track{position:absolute;top:11px;left:0;right:0;height:9px;border-radius:9px;background:var(--track)}.slider-fill{position:absolute;top:11px;left:0;height:9px;border-radius:9px;background:var(--caramel);transition:width .3s ease}.slider-thumb{position:absolute;top:50%;transform:translate(-50%,-50%) rotate(-18deg);filter:drop-shadow(0 3px 5px rgba(123,75,42,.3));pointer-events:none;transition:left .3s ease}.slider-input{position:absolute;top:0;left:0;width:100%;height:100%;margin:0;opacity:0;cursor:pointer}.slider-ticks{display:flex;justify-content:space-between;font-size:11.5px;font-weight:500;color:var(--text-soft);margin-bottom:24px}.btn-row{display:flex;gap:12px}.btn{border-radius:999px;padding:16px 0;font-family:var(--font-display);font-size:18px;cursor:pointer;display:inline-flex;align-items:center;justify-content:center;gap:9px;white-space:nowrap}.btn--primary{flex:1;border:none;color:#fff;background:linear-gradient(180deg,#eda968,var(--caramel-deep));box-shadow:0 9px 20px #d88b4566}.btn--secondary{width:140px;color:var(--brown);background:var(--surface-soft);border:2px solid var(--dashed)}.result-hero{text-align:center;padding:26px 0 4px}.hero-num{font-family:var(--font-display);font-size:82px;color:var(--caramel-deep);line-height:1}.hero-unit{font-family:var(--font-display);font-size:30px;color:var(--brown);margin-left:8px}.hero-caption{font-size:14px;font-weight:500;color:var(--text-mid);margin-top:8px}.stage-badge{display:inline-flex;align-items:center;gap:8px;margin-top:14px;font-family:var(--font-display);font-size:16px;color:#fff;background:var(--caramel);padding:9px 22px;border-radius:24px;box-shadow:0 7px 16px #d88b4552;white-space:nowrap}.desc-box{display:flex;gap:12px;margin:22px 0 24px;background:var(--cream);border:2px dashed var(--dashed);border-radius:20px;padding:17px 20px}.desc-text{margin:0;font-size:13.5px;line-height:1.74;color:var(--text-dark)}.compare{display:flex;flex-direction:column;gap:13px;margin-bottom:24px}.compare-row{display:flex;align-items:center;gap:12px}.compare-label{width:60px;font-size:13px;font-weight:700;color:var(--text-mid);text-align:right;white-space:nowrap}.compare-track{flex:1;height:18px;border-radius:12px;background:var(--track-warm);overflow:hidden}.compare-fill{height:100%;border-radius:12px;transition:width .3s ease}.compare-val{width:40px;font-family:var(--font-display);font-size:14px;color:var(--brown);white-space:nowrap}.info-box{background:var(--surface-soft);border:2px solid var(--track-warm);border-radius:18px;padding:6px 18px;margin-bottom:22px}.info-row{display:flex;justify-content:space-between;align-items:center;padding:13px 2px}.info-row+.info-row{border-top:1px solid var(--line)}.info-key{font-size:14px;font-weight:500;color:var(--text-mid)}.info-val{font-family:var(--font-display);font-size:15px;color:var(--brown);white-space:nowrap}.lifespan-head{display:flex;align-items:center;gap:8px;margin-bottom:15px;font-family:var(--font-display);font-size:16px;color:var(--brown)}.lifespan-list{display:flex;flex-direction:column;gap:12px}.lifespan-row{display:flex;align-items:center;gap:12px}.lifespan-label{width:44px;font-size:13px;font-weight:500;color:var(--text-mid);white-space:nowrap}.lifespan-label--active{font-weight:700;color:var(--brown)}.lifespan-track{flex:1;height:16px;border-radius:10px;background:var(--track-warm);overflow:hidden}.lifespan-fill{height:100%;border-radius:10px;transition:width .3s ease}.lifespan-yrs{width:48px;font-size:12.5px;font-weight:600;color:var(--text-mid);white-space:nowrap}.profile-divider{height:1px;background:var(--line);margin:22px 0 18px}.profile-form{display:block}.profile-field{display:flex;align-items:center;gap:12px;margin-bottom:12px}.profile-label{width:52px;flex-shrink:0;font-family:var(--font-display);font-size:14px;color:var(--brown)}.profile-input{flex:1;min-width:0;font-family:var(--font-body);font-size:15px;color:var(--text-dark);background:var(--surface-soft);border:2px solid var(--track);border-radius:14px;padding:12px 14px;outline:none}.profile-input:focus{border-color:var(--caramel)}.profile-error{margin:0 0 12px;font-size:13px;color:#c0392b}.profile-save{width:100%;margin-top:4px}.profile-note{display:flex;align-items:center;gap:8px;margin:0 0 4px;padding:12px 16px;background:var(--cream);border:2px dashed var(--dashed);border-radius:16px;font-size:13.5px;color:var(--text-dark)}.profile-note strong{color:var(--brown)}.profile-greeting{text-align:center;font-family:var(--font-display);font-size:15px;color:var(--brown);margin-bottom:2px}@media (max-width: 520px){.page{padding:28px 16px 32px}.dac-title{font-size:27px}.seg-btn{padding:12px 4px}.seg-name{font-size:15px}.hero-num{font-size:68px}.btn-row{flex-direction:column}.btn--secondary{width:100%}}
