globals.css (21994B)
1 @import "tailwindcss"; 2 3 /* ========================================== 4 1. VARIABLES & THEMES (:root / .dark) 5 ========================================== */ 6 :root { 7 --background: #f0f8ff; 8 --foreground: #1a2a3a; 9 --card: #ffffff; 10 --card-foreground: #1a2a3a; 11 --primary: hsl(var(--tap-h) var(--tap-s) 55%); 12 --primary-foreground: #ffffff; 13 --secondary: #2c3e50; 14 --secondary-foreground: #5a7d9a; 15 --muted: #d0e1f0; 16 --muted-foreground: #8ba8c2; 17 --nav-foreground: #394a52; 18 --tap-h: 200; 19 --tap-s: 100%; 20 --tap-bg-0: #ffffff; 21 --tap-bg-1: hsl(var(--tap-h) var(--tap-s) 95%); 22 --tap-bg-2: hsl(var(--tap-h) var(--tap-s) 93%); 23 --tap-bg-3: hsl(var(--tap-h) var(--tap-s) 89%); 24 --tap-bg-4: hsl(var(--tap-h) var(--tap-s) 86%); 25 --tap-bg-5: hsl(var(--tap-h) var(--tap-s) 78%); 26 --tap-bg-6: hsl(var(--tap-h) var(--tap-s) 73%); 27 --tap-bg-7: hsl(var(--tap-h) var(--tap-s) 66%); 28 --tap-bg-8: hsl(var(--tap-h) var(--tap-s) 59%); 29 --system-color-scheme: light; 30 --svh: 100vh; 31 --bottom-nav-height: 56px; 32 } 33 34 .dark { 35 --background: #000000; 36 --foreground: #f5f0f7; 37 --card: #151b2b; 38 --card-foreground: #f5f0f7; 39 --primary: hsl(var(--tap-h) var(--tap-s) 50%); 40 --primary-foreground: #f5f0f7; 41 --secondary: #d1d7e9; 42 --secondary-foreground: #a0abc2; 43 --muted: #4b5068; 44 --muted-foreground: #7d8dad; 45 --nav-foreground: #a3a5aa; 46 --tap-h: 235; 47 --tap-s: 40%; 48 --tap-bg-0: #0f0e1a; 49 --tap-bg-1: hsl(var(--tap-h) var(--tap-s) 12%); 50 --tap-bg-2: hsl(var(--tap-h) var(--tap-s) 16%); 51 --tap-bg-3: hsl(var(--tap-h) var(--tap-s) 23%); 52 --tap-bg-4: hsl(var(--tap-h) var(--tap-s) 27%); 53 --tap-bg-5: hsl(var(--tap-h) var(--tap-s) 34%); 54 --tap-bg-6: hsl(var(--tap-h) var(--tap-s) 41%); 55 --tap-bg-7: hsl(var(--tap-h) var(--tap-s) 50%); 56 --tap-bg-8: hsl(var(--tap-h) var(--tap-s) 56%); 57 --system-color-scheme: dark; 58 } 59 60 @supports (height: 1svh) { 61 :root { 62 --svh: 100svh; 63 } 64 } 65 66 /* ========================================== 67 2. GLOBAL RESET & BASE STYLES 68 ========================================== */ 69 *, 70 *::before, 71 *::after { 72 -ms-overflow-style: none !important; 73 scrollbar-width: none !important; 74 } 75 *::-webkit-scrollbar { 76 display: none !important; 77 } 78 .show-scrollbar { 79 -ms-overflow-style: auto !important; 80 scrollbar-width: auto !important; 81 } 82 .show-scrollbar::-webkit-scrollbar { 83 display: block !important; 84 width: 4px !important; 85 } 86 .show-scrollbar::-webkit-scrollbar-thumb { 87 background-color: var(--muted-foreground); 88 border-radius: 9999px; 89 opacity: 0.5; 90 } 91 .show-scrollbar::-webkit-scrollbar-track { 92 background: transparent; 93 } 94 95 html { 96 font-size: clamp(0.875rem, 0.5rem + 1vw, 1.125rem); 97 } 98 html, 99 body, 100 #__next { 101 display: flex; 102 flex-direction: column; 103 height: var(--svh); 104 min-height: var(--svh); 105 } 106 body { 107 background-color: var(--background); 108 color: var(--foreground); 109 font-family: var(--font-mandali), var(--font-kosugi), "Helvetica Neue", Arial, "Hiragino Kaku Gothic ProN", "Hiragino Sans", Meiryo, sans-serif; 110 font-weight: 700; 111 padding-bottom: calc(var(--bottom-nav-height)); 112 } 113 header { 114 background-color: var(--background); 115 font-size: 1.35rem; 116 font-weight: 700; 117 } 118 119 /* ========================================== 120 3. COMMON UI COMPONENTS 121 ========================================== */ 122 /* Forms & Inputs */ 123 input[type="range"] { 124 appearance: none; 125 -webkit-appearance: none; 126 background: transparent; 127 cursor: pointer; 128 } 129 input[type="range"]::-webkit-slider-thumb { 130 appearance: none; 131 -webkit-appearance: none; 132 height: 18px; 133 width: 18px; 134 border-radius: 50%; 135 background-color: white; 136 border: 4px solid var(--tap-bg-8); 137 box-shadow: 0 1px 4px rgba(0, 0, 0, 0.3); 138 } 139 input[type="range"]::-moz-range-thumb { 140 height: 18px; 141 width: 18px; 142 border-radius: 50%; 143 background-color: white; 144 border: 4px solid var(--tap-bg-8); 145 box-shadow: 0 1px 3px rgba(0, 0, 0, 0.3); 146 } 147 148 /* Layout Containers */ 149 .dashboard-container { 150 padding: 5cqw 5cqw 2cqw 5cqw; 151 } 152 .cal-container { 153 padding: 2cqw 3cqw 2cqw 3cqw; 154 } 155 .bond-container { 156 padding: 5cqw 5cqw calc(var(--bottom-nav-height) - 4cqw) 5cqw; 157 } 158 159 .view-panel { 160 display: none; 161 width: 100%; 162 } 163 .view-panel.active { 164 display: block; 165 } 166 .mobile-view { 167 display: block; 168 margin-top: 3rem; 169 padding: 0.5rem; 170 } 171 .desktop-view, 172 .desktop-hidden { 173 display: none; 174 } 175 176 /* Buttons */ 177 .btn-setting { 178 flex: 1 1 0%; 179 padding: 8px 0; 180 text-align: center; 181 font-size: 1.2rem; 182 line-height: 1.25; 183 font-weight: 700; 184 color: var(--secondary-foreground); 185 background-color: transparent; 186 transition: all 0.2s ease-in-out; 187 cursor: pointer; 188 } 189 .btn-close { 190 color: var(--secondary-foreground); 191 transition: all 0.2s ease-in-out; 192 cursor: pointer; 193 } 194 .btn-setting:hover, 195 .btn-close:hover { 196 color: var(--secondary); 197 } 198 199 .btn-nav { 200 flex: 1 1 0%; 201 display: flex; 202 flex-direction: column; 203 align-items: center; 204 justify-content: center; 205 padding: 14px 0 18px 0; 206 color: var(--nav-foreground); 207 background-color: var(--background); 208 transition: all 0.2s ease-in-out; 209 cursor: pointer; 210 } 211 .btn-nav svg { 212 transition: stroke-width 0.3s cubic-bezier(0.4, 0, 0.2, 1); 213 stroke-width: 1.5; 214 } 215 .btn-nav.active svg { 216 stroke-width: 2.2; 217 } 218 .btn-nav:hover { 219 color: color-mix(in srgb, var(--primary) 65%, transparent); 220 } 221 .dark .btn-nav:hover { 222 color: color-mix(in srgb, var(--foreground) 90%, transparent); 223 } 224 .btn-nav.active, 225 .btn-nav:hover.active { 226 color: var(--primary); 227 opacity: 100%; 228 } 229 .dark .btn-nav.active, 230 .dark .btn-nav:hover.active { 231 color: var(--foreground); 232 } 233 234 .btn-nav-bar { 235 position: relative; 236 bottom: -8px; 237 height: 2.5px; 238 width: 0px; 239 opacity: 0; 240 transition: 241 width 0.2s ease-out, 242 opacity 0.2s ease-out; 243 } 244 .btn-nav-bar.active { 245 background-color: var(--primary); 246 width: 50px; 247 opacity: 1; 248 } 249 .dark .btn-nav-bar.active { 250 background-color: var(--foreground); 251 } 252 253 /* ========================================== 254 4. APP MODULES (Timer, Calendar, Bond) 255 ========================================== */ 256 /* --- Timer Module --- */ 257 .timer-card { 258 display: flex; 259 flex-direction: column; 260 justify-content: center; 261 padding: 1cqw; 262 margin-bottom: 4cqw; 263 color: var(--card-foreground); 264 border-radius: 10px; 265 backdrop-filter: blur(6px); 266 } 267 .timer-card-title { 268 font-size: 3cqw; 269 font-weight: 700; 270 color: var(--secondary-foreground); 271 margin-bottom: 0.8cqw; 272 letter-spacing: 0.02em; 273 } 274 .countdown-text-l { 275 font-size: 13cqw; 276 letter-spacing: 0.05em; 277 line-height: 1.1; 278 margin-top: -1.6cqw; 279 margin-bottom: 1.6cqw; 280 } 281 .countdown-text-s { 282 font-size: 7.5cqw; 283 letter-spacing: 0.05em; 284 line-height: 1.1; 285 } 286 .slot-grid { 287 display: grid; 288 grid-template-columns: repeat(4, 1fr); 289 gap: 1.5cqw; 290 margin-bottom: 4cqw; 291 padding: 0 5cqw; 292 } 293 .slot-item { 294 display: flex; 295 flex-direction: column; 296 align-items: center; 297 justify-content: center; 298 min-height: 8cqw; 299 border-style: none; 300 font-weight: 700; 301 line-height: 1.1; 302 clip-path: polygon(0 0, 88% 0, 100% 28%, 100% 100%, 0 100%); 303 transition: all 0.2s; 304 } 305 .slot-default { 306 background-color: var(--card); 307 color: var(--muted); 308 } 309 .slot-current { 310 position: relative; 311 background-color: var(--card); 312 color: var(--primary); 313 text-decoration: none; 314 overflow: hidden; 315 } 316 .slot-current::before { 317 content: ""; 318 position: absolute; 319 bottom: 0; 320 left: -100%; 321 width: 100%; 322 height: 2px; 323 background: linear-gradient(90deg, transparent, var(--primary), transparent); 324 animation: flow-line 3s infinite linear; 325 } 326 @keyframes flow-line { 327 0% { 328 left: -150%; 329 } 330 100% { 331 left: 150%; 332 } 333 } 334 .slot-tapped { 335 color: var(--primary-foreground); 336 background: var(--primary); 337 border-color: var(--primary); 338 } 339 .slot-text-main { 340 font-size: 5cqw; 341 } 342 .slot-text-sub { 343 font-size: 2cqw; 344 margin-top: -0.7cqw; 345 } 346 347 .btn-timer { 348 position: relative; 349 display: flex; 350 align-items: center; 351 justify-content: center; 352 width: 100%; 353 height: auto; 354 padding: 2cqw 0; 355 margin: 0; 356 font-size: 3.5cqw; 357 font-weight: 700; 358 background-color: var(--primary); 359 color: var(--primary-foreground); 360 border: none; 361 border-radius: 8px; 362 transform: skewX(-10deg); 363 cursor: pointer; 364 transition: all 0.3s cubic-bezier(0.23, 1, 0.32, 1); 365 } 366 .btn-timer span, 367 .btn-timer div { 368 transform: skewX(10deg); 369 } 370 .btn-timer:hover:not(:disabled) { 371 filter: brightness(1.1); 372 transform: skewX(-10deg) translateX(5px); 373 } 374 .btn-timer:disabled { 375 background-color: var(--muted); 376 color: var(--muted-foreground); 377 cursor: not-allowed; 378 } 379 .btn-timer:disabled::before, 380 .btn-timer:disabled::after { 381 background-color: var(--muted); 382 } 383 384 /* --- Calendar Module --- */ 385 .cal-info { 386 font-size: 6cqw; 387 font-weight: 700; 388 } 389 .cal-week { 390 font-size: 3.5cqw; 391 font-weight: 700; 392 } 393 .cal-days { 394 font-size: 38cqw; 395 font-weight: 400; 396 } 397 .cal-tap { 398 font-size: 52cqw; 399 font-weight: 700; 400 } 401 402 .cal-nav { 403 flex: 1 1 0%; 404 padding: 14px 0; 405 text-align: center; 406 font-size: 4cqw; 407 line-height: 1.25; 408 font-weight: 700; 409 color: var(--secondary-foreground); 410 background-color: transparent; 411 transition: all 0.2s ease-in-out; 412 cursor: pointer; 413 } 414 .cal-save-nav { 415 font-size: 2.5cqw; 416 color: var(--secondary-foreground); 417 background-color: transparent; 418 transition: all 0.2s ease-in-out; 419 cursor: pointer; 420 } 421 .cal-nav:hover, 422 .cal-save-nav:hover { 423 color: var(--primary); 424 } 425 .dark .cal-nav:hover, 426 .dark .cal-save-nav:hover { 427 color: #f5f0f7; 428 } 429 .cal-cell { 430 container-type: inline-size; 431 border: none; 432 text-shadow: 0 0 3px #ffffff; 433 } 434 .dark .cal-cell { 435 text-shadow: none; 436 } 437 438 .bg-tap-0 { 439 background-color: var(--tap-bg-0); 440 } 441 .bg-tap-1 { 442 background-color: var(--tap-bg-1); 443 } 444 .bg-tap-2 { 445 background-color: var(--tap-bg-2); 446 } 447 .bg-tap-3 { 448 background-color: var(--tap-bg-3); 449 } 450 .bg-tap-4 { 451 background-color: var(--tap-bg-4); 452 } 453 .bg-tap-5 { 454 background-color: var(--tap-bg-5); 455 } 456 .bg-tap-6 { 457 background-color: var(--tap-bg-6); 458 } 459 .bg-tap-7 { 460 background-color: var(--tap-bg-7); 461 } 462 .bg-tap-8 { 463 background-color: var(--tap-bg-8); 464 } 465 466 /* --- Glow Ring Effects --- */ 467 .ba-ring-container { 468 overflow: visible; 469 } 470 .ba-glow-ring { 471 fill: none; 472 stroke: var(--primary); 473 stroke-width: 1.5; 474 transform-origin: center; 475 opacity: 0; 476 filter: blur(1px) drop-shadow(0 0 4px var(--primary)); 477 animation: ba-glow-anim 0.5s ease-out forwards; 478 } 479 .dark .ba-glow-ring { 480 filter: drop-shadow(0 0 4px var(--primary)) drop-shadow(0 0 12px var(--primary)) brightness(1.8); 481 } 482 @keyframes ba-glow-anim { 483 0% { 484 transform: scale(0.6); 485 opacity: 0; 486 } 487 20% { 488 opacity: 1; 489 } 490 100% { 491 transform: scale(1.2); 492 opacity: 0; 493 } 494 } 495 496 /* --- Bond Dashboard --- */ 497 .bond-split-layout { 498 display: flex; 499 flex-direction: column; 500 gap: 5cqw; 501 width: 100%; 502 } 503 .bond-left-panel { 504 display: flex; 505 flex-direction: column; 506 } 507 .char-selector { 508 position: relative; 509 margin-bottom: 2cqw; 510 } 511 .char-selector-trigger { 512 display: flex; 513 flex-direction: column; 514 align-items: flex-start; 515 background: transparent; 516 border: none; 517 padding: 0; 518 cursor: pointer; 519 } 520 .char-selector-label, 521 .input-label { 522 font-size: 3cqw; 523 letter-spacing: 0.02em; 524 margin-bottom: 0.8cqw; 525 color: var(--secondary-foreground); 526 } 527 .char-selector-name { 528 display: flex; 529 align-items: baseline; 530 gap: 2cqw; 531 margin-top: 0.4cqw; 532 margin-bottom: 8px; 533 font-size: 7cqw; 534 font-weight: 900; 535 letter-spacing: -0.025em; 536 line-height: 1; 537 } 538 .char-selector-arrow { 539 font-size: 3.5cqw; 540 color: var(--secondary-foreground); 541 transition: transform 0.3s ease; 542 } 543 .char-selector-arrow.open { 544 transform: rotate(180deg); 545 } 546 .char-dropdown { 547 position: absolute; 548 top: 100%; 549 left: 0; 550 margin-top: 0.5cqw; 551 width: 45cqw; 552 max-width: 16rem; 553 max-height: 50cqw; 554 overflow-y: auto; 555 z-index: 50; 556 background-color: var(--card); 557 border: 1px solid rgba(255, 255, 255, 0.1); 558 border-radius: 2cqw; 559 } 560 .char-dropdown-container { 561 padding: 1.5cqw; 562 } 563 .char-dropdown-item { 564 width: 100%; 565 text-align: left; 566 padding: 1.5cqw 3cqw; 567 border: none; 568 border-radius: 1.5cqw; 569 background: transparent; 570 color: var(--foreground); 571 font-weight: 700; 572 font-size: 2.5cqw; 573 cursor: pointer; 574 } 575 .char-dropdown-item.active { 576 background-color: var(--primary); 577 color: var(--primary-foreground); 578 } 579 .record-input-area { 580 display: flex; 581 align-items: flex-end; 582 justify-content: space-between; 583 gap: 4cqw; 584 border-bottom: 1px solid rgba(var(--muted), 0.2); 585 padding-bottom: 2cqw; 586 } 587 .date-input-display::-webkit-calendar-picker-indicator, 588 .date-input-display::-webkit-inner-spin-button, 589 .date-input-display::-webkit-clear-button { 590 display: none; 591 -webkit-appearance: none; 592 } 593 .input-group-container { 594 display: flex; 595 align-items: flex-end; 596 justify-content: space-between; 597 gap: 12px; 598 width: 100%; 599 } 600 .input-field-wrapper.rank-field { 601 flex: 0 0 auto; 602 } 603 .input-field-wrapper.date-field { 604 flex: 1 1 0%; 605 min-width: 0; 606 } 607 .input-content { 608 display: flex; 609 align-items: center; 610 width: 100%; 611 } 612 .date-input-display { 613 width: 100%; 614 min-width: 0; 615 font-size: 6cqw; 616 font-weight: 700; 617 line-height: 1; 618 letter-spacing: 0.03em; 619 background: transparent; 620 border: none; 621 outline: none; 622 padding: 0; 623 cursor: pointer; 624 -webkit-appearance: none; 625 appearance: none; 626 } 627 .input-field-wrapper { 628 display: flex; 629 flex-direction: column; 630 } 631 .rank-value { 632 display: inline-block; 633 width: 10cqw; 634 margin-left: 0.5cqw; 635 font-size: 6cqw; 636 font-weight: 900; 637 line-height: 1; 638 } 639 .spin-buttons { 640 display: inline-block; 641 vertical-align: baseline; 642 } 643 .spin-btn { 644 display: flex; 645 align-items: center; 646 justify-content: center; 647 width: 4cqw; 648 height: 3.2cqw; 649 background-color: rgba(var(--muted), 0.3); 650 border: none; 651 font-size: 2cqw; 652 color: var(--foreground); 653 cursor: pointer; 654 } 655 .spin-btn.up { 656 border-radius: 0.8cqw 0.8cqw 0 0; 657 margin-bottom: 2px; 658 } 659 .spin-btn.down { 660 border-radius: 0 0 0.8cqw 0.8cqw; 661 } 662 .btn-bond-record { 663 display: flex; 664 flex-direction: column; 665 align-items: center; 666 justify-content: center; 667 margin-left: 0; 668 width: 18cqw; 669 height: 9cqw; 670 flex-shrink: 0; 671 font-weight: 700; 672 line-height: 1.3; 673 background-color: var(--primary); 674 color: var(--primary-foreground); 675 border: none; 676 border-radius: 1.5cqw; 677 transform: skewX(-10deg); 678 cursor: pointer; 679 transition: all 0.3s cubic-bezier(0.23, 1, 0.32, 1); 680 } 681 .btn-bond-record:hover:not(:disabled) { 682 filter: brightness(1.1); 683 transform: skewX(-10deg) translateX(5px); 684 } 685 .btn-bond-record:disabled { 686 background-color: var(--muted); 687 color: var(--muted-foreground); 688 cursor: not-allowed; 689 } 690 .btn-bond-record span { 691 font-size: 2cqw; 692 font-weight: 900; 693 letter-spacing: 0.15em; 694 transform: skewX(10deg); 695 margin-top: 0.4cqw; 696 } 697 .btn-bond-record div { 698 font-size: 2.5cqw; 699 transform: skewX(10deg); 700 } 701 .btn-bond-record-dialog { 702 width: 100%; 703 margin-top: 0.5rem; 704 padding: 0.75rem 0; 705 border-radius: 0.75rem; 706 font-weight: 700; 707 background-color: var(--primary); 708 color: var(--primary-foreground); 709 border: none; 710 box-shadow: 0 4px 6px -1px rgba(0, 0, 0, 0.1); 711 cursor: pointer; 712 transition: all 0.3s cubic-bezier(0.23, 1, 0.32, 1); 713 } 714 .btn-bond-record-dialog:hover:not(:disabled) { 715 filter: brightness(1.1); 716 transform: translateX(5px); 717 } 718 .btn-bond-record-dialog:disabled { 719 opacity: 0.5; 720 cursor: not-allowed; 721 } 722 .section-wrapper { 723 margin-top: 4cqw; 724 } 725 .section-toggle-btn { 726 display: flex; 727 align-items: center; 728 gap: 1.5cqw; 729 margin-bottom: 1cqw; 730 font-size: 3cqw; 731 letter-spacing: 0.02em; 732 color: var(--secondary-foreground); 733 background: transparent; 734 border: none; 735 cursor: pointer; 736 } 737 .graph-container { 738 height: 55cqw; 739 min-height: 12rem; 740 width: 100%; 741 margin-top: 1.5cqw; 742 } 743 .graph-container * { 744 outline: none !important; 745 } 746 .graph-container .recharts-tooltip-item { 747 color: var(--primary) !important; 748 line-height: 0.8; 749 } 750 .dark .graph-container .recharts-tooltip-item { 751 color: var(--secondary-foreground) !important; 752 } 753 754 .gift-title { 755 font-size: 3cqw; 756 letter-spacing: 0.02em; 757 margin-bottom: 2cqw; 758 color: var(--secondary-foreground); 759 } 760 .gift-scroll-container { 761 display: flex; 762 flex-wrap: nowrap; 763 gap: 1.5cqw; 764 width: 100%; 765 overflow-x: auto; 766 padding-top: 0.5cqw; 767 padding-bottom: 2cqw; 768 } 769 .gift-item { 770 display: flex; 771 flex-direction: column; 772 align-items: center; 773 flex-shrink: 0; 774 width: 50px; 775 height: 70px; 776 } 777 .gift-image-box { 778 position: relative; 779 width: 100%; 780 aspect-ratio: 1 / 1; 781 margin-bottom: 1cqw; 782 } 783 .gift-sprite { 784 position: absolute; 785 top: 50%; 786 left: 50%; 787 width: 142px; 788 height: 112px; 789 background-image: url("gifts.png"); 790 background-repeat: no-repeat; 791 background-position: calc(var(--col) * -142px) calc(var(--row) * -112px); 792 transform: translate(-50%, -50%) scale(0.48); 793 transform-origin: center center; 794 image-rendering: -webkit-optimize-contrast; 795 } 796 .gift-rank-dot { 797 position: absolute; 798 top: 0; 799 left: 0; 800 width: 2cqw; 801 height: 2cqw; 802 border-radius: 9999px; 803 border: 1px solid var(--background); 804 z-index: 10; 805 } 806 .gift-rank-dot.s { 807 background-color: #ef4444; 808 } 809 .gift-rank-dot.a { 810 background-color: #fb923c; 811 } 812 .gift-rank-dot.b { 813 background-color: #3b82f6; 814 } 815 816 .gift-category-text { 817 width: 100%; 818 font-size: 2cqw; 819 min-height: 2.5cqw; 820 text-align: center; 821 font-weight: 500; 822 line-height: 1; 823 overflow-x: hidden; 824 white-space: nowrap; 825 text-overflow: ellipsis; 826 } 827 828 /* ========================================== 829 History Log Compact Grid Styles (5行×2列) 830 ========================================== */ 831 .history-grid-container { 832 display: grid; 833 grid-template-rows: repeat(3, minmax(0, 1fr)); 834 grid-auto-flow: column; 835 gap: 0.125rem 1.5rem; 836 margin-bottom: 2cqw; 837 } 838 .history-item { 839 display: flex; 840 align-items: center; 841 padding: 0.15rem 0.5rem; 842 border-bottom: 1px solid rgba(var(--muted), 0.05); 843 min-height: 1.75rem; 844 } 845 .history-log-row { 846 font-size: 0.875rem; 847 letter-spacing: 0.02em; 848 display: flex; 849 align-items: center; 850 } 851 .history-rank-num { 852 display: inline-block; 853 width: 1.5rem; 854 text-align: right; 855 font-weight: 700; 856 color: var(--foreground); 857 } 858 .history-divider { 859 margin: 0 0.5rem; 860 opacity: 0.25; 861 color: var(--foreground); 862 } 863 .history-date-text { 864 color: var(--secondary-foreground); 865 } 866 .history-empty-text { 867 color: var(--muted-foreground); 868 opacity: 0.4; 869 } 870 .edit-icon-btn { 871 display: flex; 872 align-items: center; 873 justify-content: center; 874 color: var(--secondary-foreground); 875 background: transparent; 876 border: none; 877 padding: 0.2rem; 878 margin-left: 0.3rem; 879 border-radius: 0.25rem; 880 cursor: pointer; 881 transition: all 0.2s ease; 882 } 883 .edit-icon-btn:hover { 884 color: var(--primary); 885 background-color: rgba(var(--muted), 0.1); 886 } 887 .edit-btn-placeholder { 888 display: inline-block; 889 width: 1.5rem; 890 height: 1px; 891 opacity: 0; 892 pointer-events: none; 893 } 894 895 /* ========================================== 896 5. MEDIA QUERIES (Desktop Optimization) 897 ========================================== */ 898 @media (min-width: 1000px) { 899 html { 900 font-size: 0.875rem; 901 } 902 903 :root { 904 --bottom-nav-height: 56px; 905 } 906 907 .dashboard-container { 908 container-type: inline-size; 909 display: flex; 910 flex-direction: column; 911 gap: 2cqw; 912 padding: 2cqw 2cqw 2cqw 5cqw; 913 } 914 .cal-container { 915 container-type: inline-size; 916 padding: 2cqw 5cqw 2cqw 2cqw; 917 } 918 .bond-container { 919 container-type: inline-size; 920 display: flex; 921 flex-direction: column; 922 padding: 2cqw 3cqw 2cqw 3cqw; 923 } 924 .bond-split-layout { 925 flex-direction: row; 926 align-items: stretch; 927 gap: 4rem; 928 } 929 .bond-left-panel { 930 flex: 1.2; 931 display: flex; 932 flex-direction: column; 933 } 934 .bond-right-panel { 935 flex: 1.8; 936 display: flex; 937 flex-direction: column; 938 height: calc(100svh - 220px); 939 border-left: 1px solid rgba(var(--muted), 0.15); 940 } 941 .char-selector { 942 margin-bottom: 1cqw; 943 } 944 .char-selector-name { 945 font-size: 3.5cqw; 946 gap: 0.5cqw; 947 } 948 .char-selector-label, 949 .input-label { 950 font-size: 1.5cqw; 951 } 952 .char-selector-arrow { 953 font-size: 1.3cqw; 954 } 955 .char-dropdown { 956 width: 16rem; 957 max-height: 20rem; 958 border-radius: 1rem; 959 } 960 .char-dropdown-container { 961 padding: 0.5cqw; 962 } 963 .char-dropdown-item { 964 font-size: 14px; 965 padding: 6px 12px; 966 } 967 .record-input-area { 968 padding-bottom: 1.5rem; 969 } 970 .input-content { 971 display: flex; 972 } 973 .rank-prefix { 974 font-size: 1.3cqw; 975 margin-top: 1cqw; 976 } 977 .rank-value { 978 display: inline-block; 979 width: 4.5cqw; 980 font-size: 2.5cqw; 981 font-weight: 900; 982 line-height: 1; 983 } 984 .spin-buttons { 985 display: inline-block; 986 vertical-align: baseline; 987 margin-left: 0.5cqw; 988 scale: 1.3; 989 } 990 .spin-btn { 991 width: 1cqw; 992 height: 1cqw; 993 font-size: 0.8cqw; 994 } 995 .input-group-container { 996 gap: 20px; 997 } 998 .date-input-display { 999 font-size: 2.5cqw; 1000 } 1001 .btn-bond-record { 1002 width: 9cqw; 1003 height: 4.5cqw; 1004 border-radius: 0.75rem; 1005 } 1006 .btn-bond-record span { 1007 font-size: 1cqw; 1008 margin-bottom: -0.1cqw; 1009 } 1010 .btn-bond-record div { 1011 font-size: 1cqw; 1012 } 1013 .section-wrapper { 1014 margin-top: 1cqw; 1015 } 1016 .section-toggle-btn, 1017 .gift-title { 1018 font-size: 1.5cqw; 1019 margin-bottom: 0.5cqw; 1020 } 1021 .gift-scroll-container { 1022 display: grid; 1023 grid-template-columns: repeat(auto-fill, minmax(4rem, 1fr)); 1024 gap: 0.5cqw 0; 1025 overflow-x: visible; 1026 } 1027 .gift-image-box { 1028 border-radius: 1rem; 1029 margin-bottom: 0.5rem; 1030 } 1031 .gift-rank-dot { 1032 width: 0.7cqw; 1033 height: 0.7cqw; 1034 } 1035 .gift-category-text { 1036 font-size: 0.7cqw; 1037 } 1038 .history-grid-container { 1039 grid-template-rows: repeat(3, minmax(0, 1fr)); 1040 gap: 0.1cqw 2cqw; 1041 } 1042 .history-item { 1043 padding: 0.1cqw 0.4cqw; 1044 min-height: 1.5cqw; 1045 } 1046 .history-log-row { 1047 font-size: 0.9cqw; 1048 } 1049 .history-rank-num { 1050 width: 1.5cqw; 1051 } 1052 .history-divider { 1053 margin: 0 0.4cqw; 1054 } 1055 .edit-icon-btn { 1056 padding: 0.1cqw; 1057 } 1058 .edit-btn-placeholder { 1059 width: 1.2cqw; 1060 } 1061 .graph-container { 1062 flex: 1; 1063 width: 100%; 1064 height: 100% !important; 1065 min-height: 25rem; 1066 margin-top: 0.5cqw; 1067 } 1068 }