@import "https://fonts.googleapis.com/css2?family=Gowun+Dodum&display=swap";:root{--bg-light:#f5f5f7;--bg-dark:#000;--card-bg:#fff;--text-main:#1d1d1f;--text-light:#fff;--text-secondary:#000c;--text-muted:#0000007a;--apple-blue:#0071e3;--apple-blue-hover:#0077ed;--focus-color:#0071e3;--border-radius:8px;--pill-radius:980px;--nav-bg:#000c;--shadow-card:#00000038 3px 5px 30px 0px}*{box-sizing:border-box;margin:0;padding:0}body{letter-spacing:0;background-color:var(--bg-light);color:var(--text-main);justify-content:center;min-height:100vh;font-family:Gowun Dodum,-apple-system,BlinkMacSystemFont,sans-serif;font-size:12px;font-weight:400;line-height:1.5;display:flex}.app-container{justify-content:center;width:100%;max-width:1440px;min-height:100vh;display:flex}.main-content{background-color:var(--bg-light);width:100%;max-width:900px;padding:60px 40px;overflow-y:auto}.main-header h1{letter-spacing:0;margin-bottom:6px;font-family:Gowun Dodum,sans-serif;font-size:20px;font-weight:400;line-height:1.2}.main-header .date{color:var(--text-secondary);margin-bottom:32px;font-size:11px;font-weight:400}.summary-cards{grid-template-columns:repeat(3,1fr);gap:24px;margin-bottom:48px;display:grid}.card{background-color:var(--card-bg);border:none;border-radius:12px;flex-direction:column;justify-content:center;padding:24px;transition:transform .4s,box-shadow .4s;display:flex}.card:hover{box-shadow:var(--shadow-card);z-index:2;transform:translateY(-2px)}.card h3{letter-spacing:0;color:var(--text-secondary);margin-bottom:10px;font-family:Gowun Dodum,sans-serif;font-size:10px;font-weight:400;line-height:1.3}.card-value{letter-spacing:0;color:var(--text-main);font-family:Gowun Dodum,sans-serif;font-size:18px;font-weight:400;line-height:1.2}#next-payment{white-space:nowrap;text-overflow:ellipsis;font-size:14px;overflow:hidden}.sync-details{flex-direction:column;align-items:center;margin-top:60px;margin-bottom:40px;display:flex}.sync-details summary{cursor:pointer;color:var(--text-muted);text-align:center;-webkit-user-select:none;user-select:none;opacity:.7;padding:12px;font-family:Gowun Dodum,sans-serif;font-size:11px;list-style:none;transition:opacity .2s}.sync-details summary:hover{opacity:1}.sync-details summary::-webkit-details-marker{display:none}.sync-section{width:100%;max-width:900px;margin:0 auto}.sync-card{border-radius:var(--border-radius);background-color:#f5f5f7;padding:24px}.sync-header{justify-content:space-between;align-items:center;margin-bottom:16px;display:flex}.sync-header h3{color:var(--text-main);font-family:Gowun Dodum,sans-serif;font-size:14px;font-weight:400}.sync-status{border-radius:var(--pill-radius);color:#666;background:#eee;padding:4px 10px;font-size:11px}.sync-status.active{color:#34c759;background:#34c7591a}.sync-body{align-items:center;gap:12px;display:flex}#sync-key{background:var(--bg-light);border:1px solid #0000001a;border-radius:8px;flex:1;padding:10px 14px;font-family:Gowun Dodum,sans-serif;font-size:12px}.sync-actions{gap:8px;display:flex}.btn-sync-primary,.btn-sync-secondary{cursor:pointer;border:none;border-radius:8px;padding:10px 16px;font-family:Gowun Dodum,sans-serif;font-size:12px;font-weight:400;transition:all .2s}.btn-sync-primary{background:var(--apple-blue);color:#fff}.btn-sync-primary:hover{background:var(--apple-blue-hover)}.btn-sync-secondary{color:var(--text-main);background:#e5e5ea}.sync-tip{color:var(--text-muted);margin-top:12px;font-size:11px}@media (width<=768px){.app-container{padding:0}.main-content{max-width:100%;padding:20px 16px}.main-header h1{font-size:18px}.summary-cards{grid-template-columns:1fr;gap:12px;margin-bottom:24px}.card,.sync-card{padding:16px}.sync-body{flex-direction:column;align-items:stretch;gap:12px}.sync-actions{grid-template-columns:1fr 1fr;gap:8px;display:grid}#sync-key{width:100%}.action-bar{flex-direction:column;align-items:stretch;gap:12px}.filters{justify-content:space-between}.btn-add{text-align:center;width:100%;padding:12px;font-size:13px}.sub-item{flex-direction:row;align-items:center;gap:8px;padding:12px 14px;position:relative}.sub-item>div:first-child{width:32px;height:32px;margin-bottom:0;margin-right:4px}.sub-info{flex:1;min-width:0;margin-bottom:0}.sub-name{white-space:nowrap;text-overflow:ellipsis;font-size:13px;overflow:hidden}.sub-memo,.sub-period{display:none}.sub-price{text-align:right;white-space:nowrap;flex-shrink:0;width:auto;min-width:60px;margin-bottom:0;font-size:13px}.sub-price .krw-eq{display:none}.sub-renew{width:auto;color:var(--text-muted);text-align:center;min-width:30px;margin-bottom:0;font-size:11px}.renew-label{display:none}.sub-actions{border-top:none;gap:8px;width:auto;padding-top:0}.btn-edit,.btn-delete{display:none}.switch{width:36px;height:20px}.slider:before{width:16px;height:16px;bottom:2px}input:checked+.slider:before{transform:translate(16px)}.modal{width:90%;padding:24px}}.action-bar{justify-content:space-between;align-items:center;margin-bottom:24px;display:flex}.action-bar h3{color:var(--text-main);letter-spacing:0;font-family:Gowun Dodum,sans-serif;font-size:13px;font-weight:400}.filters{align-items:center;gap:15px;display:flex}.filters select{color:var(--text-secondary);cursor:pointer;background-color:#fafafc;border:1px solid #0000000a;border-radius:11px;outline:none;height:32px;padding:5px 14px;font-family:Gowun Dodum,sans-serif;font-size:11px;font-weight:400;transition:all .2s}.filters select:focus{border:2px solid var(--focus-color)}.btn-add{background-color:var(--apple-blue);color:var(--text-light);border-radius:var(--pill-radius);cursor:pointer;border:1px solid #0000;padding:7px 14px;font-family:Gowun Dodum,sans-serif;font-size:11px;font-weight:400;transition:all .2s}.btn-add:hover{background-color:var(--apple-blue-hover)}.btn-add:focus{border:1px solid var(--focus-color);outline:none;box-shadow:0 0 0 2px #0071e34d}.subscriptions-list{flex-direction:column;gap:8px;display:flex}.sub-item{border-radius:var(--border-radius);background-color:var(--card-bg);-webkit-tap-highlight-color:transparent;border:none;align-items:center;padding:12px 20px;transition:all .4s;display:flex}.sub-item:hover{box-shadow:var(--shadow-card);z-index:1;transform:translateY(-2px)}.sub-item:active{background-color:#f5f5f7;transform:scale(.98)}.memo-indicator{vertical-align:middle;cursor:help;margin-left:6px;font-size:11px}.sub-item.inactive{opacity:.48}.sub-info{flex-direction:column;flex:2;justify-content:center;min-height:48px;display:flex}.sub-name{color:var(--text-main);font-family:Gowun Dodum,sans-serif;font-size:13px;font-weight:400;line-height:1.3}.sub-name a{color:var(--text-main);text-decoration:none}.sub-name a:hover{color:#06c;text-decoration:underline}.sub-memo{color:var(--text-muted);white-space:nowrap;text-overflow:ellipsis;letter-spacing:-.12px;max-width:180px;margin-top:2px;font-size:12px;overflow:hidden}.sub-period{color:var(--text-secondary);margin-top:1px;font-size:14px}.sub-price{color:var(--text-main);white-space:nowrap;flex-direction:column;flex:1;font-family:Gowun Dodum,sans-serif;font-size:12px;font-weight:400;display:flex}.krw-eq{color:var(--text-muted);margin-top:2px;font-size:12px;font-weight:400}.sub-renew{color:var(--text-secondary);flex:1;font-size:12px}.sub-actions{align-items:center;gap:16px;display:flex}.switch{width:42px;height:24px;display:inline-block;position:relative}.switch input{opacity:0;width:0;height:0}.slider{cursor:pointer;border-radius:var(--pill-radius);background-color:#d2d2d7a3;transition:all .3s;position:absolute;inset:0}.slider:before{content:"";background-color:#fff;border-radius:50%;width:20px;height:20px;transition:all .3s;position:absolute;bottom:2px;left:2px;box-shadow:0 2px 4px #0003}input:checked+.slider{background-color:var(--apple-blue)}input:checked+.slider:before{transform:translate(18px)}.btn-edit{cursor:pointer;color:#06c;background:0 0;border:none;padding:5px;font-family:Gowun Dodum,sans-serif;font-size:11px;transition:color .1s}.btn-edit:hover{text-decoration:underline}.btn-delete{color:var(--text-muted);cursor:pointer;background:0 0;border:none;padding:5px;font-family:Gowun Dodum,sans-serif;font-size:11px;transition:color .1s}.btn-delete:hover{color:#ff3b30}.icon-selector{-ms-overflow-style:none;scrollbar-width:none;gap:8px;padding:8px 0;display:flex;overflow-x:auto}.icon-selector::-webkit-scrollbar{display:none}.icon-option{cursor:pointer;color:#1d1d1f;background:#f0f0f2;border:2px solid #0000;border-radius:8px;flex-shrink:0;justify-content:center;align-items:center;width:32px;height:32px;font-size:10px;font-weight:600;transition:all .2s;display:flex}.icon-option:hover{background:#e5e5e7}.icon-option.active{border-color:var(--apple-blue);background:#fff}.icon-option img{object-fit:contain;width:20px;height:20px}.sub-icon-img{object-fit:cover;border-radius:inherit;width:100%;height:100%}.modal-overlay{-webkit-backdrop-filter:blur(4px);z-index:1000;background:#0000004d;justify-content:center;align-items:center;display:none;position:fixed;inset:0}.modal-overlay.show{display:flex}.modal{background:var(--card-bg);width:440px;box-shadow:var(--shadow-card);border-radius:12px;padding:40px}.modal h2{margin-bottom:20px;font-family:Gowun Dodum,sans-serif;font-size:16px;font-weight:400;line-height:1.3}.input-group{flex-direction:column;margin-bottom:20px;display:flex}.input-group label{color:var(--text-main);margin-bottom:6px;font-family:Gowun Dodum,sans-serif;font-size:11px;font-weight:400;line-height:1.3}.price-input-wrapper{gap:12px;display:flex}.input-group input,.input-group select{background-color:var(--card-bg);color:var(--text-main);border:1px solid #0000001a;border-radius:8px;padding:10px 12px;font-family:Gowun Dodum,sans-serif;font-size:12px;transition:border-color .2s,box-shadow .2s}.input-group input:focus,.input-group select:focus{border-color:var(--focus-color);box-shadow:0 0 0 1px var(--focus-color);outline:none}.price-input-wrapper input{flex:1;min-width:0}.modal-actions{align-items:center;gap:12px;margin-top:32px;display:flex}.btn-delete{cursor:pointer;border:none;border-radius:8px;padding:8px 14px;font-family:Gowun Dodum,sans-serif;font-size:12px;font-weight:400;transition:background-color .2s;color:#fff!important;background-color:#ff3b30!important}.btn-delete:hover{background-color:#d70015!important}.btn-cancel{color:var(--text-main);cursor:pointer;background-color:#f5f5f7;border:none;border-radius:8px;padding:8px 14px;font-family:Gowun Dodum,sans-serif;font-size:12px;font-weight:400;transition:background-color .2s}.btn-cancel:hover{background-color:#e5e5ea}.btn-save{background-color:var(--apple-blue);color:#fff;cursor:pointer;border:none;border-radius:8px;padding:7px 14px;font-family:Gowun Dodum,sans-serif;font-size:12px;font-weight:400;transition:background-color .2s}.btn-save:hover{background-color:var(--apple-blue-hover)}
