@jjlmoya/utils-alcohol 1.23.0 → 1.25.0

package/src/tool/alcoholClearance/component.astro

@@ -217,436 +217,4 @@ const { ui } = Astro.props;
     new AlcoholClearanceApp();
 </script>
 
-<style>
-    .alc-app {
-        width: 100%;
-        max-width: 56rem;
-        margin: 0 auto;
-        padding: 0.5rem;
-    }
-
-    .alc-card {
-        background: #fff;
-        border: 1px solid #e2e8f0;
-        border-radius: 1.25rem;
-        overflow: clip;
-        box-shadow: 0 4px 20px rgba(0,0,0,0.06);
-        color: #1e293b;
-    }
-    :global(.theme-dark) .alc-card {
-        background: #0f172a;
-        border-color: #1e293b;
-        color: #f1f5f9;
-    }
-
-    .alc-grid { display: grid; }
-
-    @media (min-width: 768px) {
-        .alc-grid {
-            grid-template-columns: 1fr 1fr;
-            align-items: stretch;
-        }
-    }
-
-    .alc-inputs-panel {
-        display: flex;
-        flex-direction: column;
-    }
-
-    @media (min-width: 768px) { .alc-inputs-panel { border-right: 1px solid #e2e8f0; } }
-    :global(.theme-dark) .alc-inputs-panel { border-color: #1e293b; }
-
-    .alc-sec {
-        padding: 1.25rem 1.5rem;
-        border-bottom: 1px solid #e2e8f0;
-    }
-    :global(.theme-dark) .alc-sec { border-color: #1e293b; }
-    .alc-sec:last-child { border-bottom: none; }
-
-    .alc-sex-weight {
-        display: grid;
-        grid-template-columns: 1fr 1fr;
-        gap: 1.25rem;
-    }
-    .alc-field {
-        display: flex;
-        flex-direction: column;
-        gap: 0.75rem;
-    }
-
-    .field-label {
-        font-size: 0.75rem;
-        font-weight: 700;
-        text-transform: uppercase;
-        letter-spacing: 0.1em;
-        color: #94a3b8;
-        display: flex;
-        align-items: center;
-        gap: 0.5rem;
-    }
-    .field-label-icon {
-        width: 1rem;
-        height: 1rem;
-    }
-
-    .sex-toggle {
-        display: flex;
-        gap: 0.5rem;
-        padding: 0.25rem;
-        background: #f1f5f9;
-        border-radius: 0.75rem;
-    }
-    :global(.theme-dark) .sex-toggle { background: #1e293b; }
-
-    .sex-btn {
-        flex: 1;
-        padding: 0.75rem;
-        border-radius: 0.5rem;
-        border: none;
-        cursor: pointer;
-        display: flex;
-        align-items: center;
-        justify-content: center;
-        color: #94a3b8;
-        background: transparent;
-        transition: all 0.2s;
-    }
-    .sex-btn:hover { color: #64748b; }
-    .sex-btn.selected {
-        background: #fff;
-        color: #4f46e5;
-        box-shadow: 0 1px 3px rgba(0,0,0,0.1);
-    }
-    :global(.theme-dark) .sex-btn.selected {
-        background: #334155;
-        color: #818cf8;
-    }
-    .sex-icon {
-        width: 1.5rem;
-        height: 1.5rem;
-    }
-
-    .weight-input-wrap { position: relative; }
-    .weight-input {
-        width: 100%;
-        background: #f8fafc;
-        border: 2px solid #e2e8f0;
-        border-radius: 0.75rem;
-        padding: 0.75rem 3rem 0.75rem 1rem;
-        font-weight: 700;
-        font-size: 1.125rem;
-        outline: none;
-        transition: border-color 0.2s;
-        box-sizing: border-box;
-    }
-    :global(.theme-dark) .weight-input {
-        background: rgba(0,0,0,0.2);
-        border-color: #334155;
-        color: #f1f5f9;
-    }
-    .weight-input:focus { border-color: #6366f1; }
-    .weight-unit {
-        position: absolute;
-        right: 1rem;
-        top: 50%;
-        transform: translateY(-50%);
-        color: #94a3b8;
-        font-weight: 700;
-        font-size: 0.75rem;
-        text-transform: uppercase;
-    }
-
-    .drink-btns {
-        display: grid;
-        grid-template-columns: repeat(4, 1fr);
-        gap: 0.75rem;
-        margin-top: 0.75rem;
-    }
-    .drink-add-btn {
-        display: flex;
-        flex-direction: column;
-        align-items: center;
-        gap: 0.5rem;
-        padding: 1rem;
-        border-radius: 0.75rem;
-        border: none;
-        cursor: pointer;
-        background: #f1f5f9;
-        color: #475569;
-        transition: all 0.15s;
-    }
-    :global(.theme-dark) .drink-add-btn {
-        background: #1e293b;
-        color: #94a3b8;
-    }
-    .drink-add-btn:hover {
-        background: #e0e7ff;
-        color: #6366f1;
-        transform: scale(1.05);
-    }
-    .drink-add-btn:active { transform: scale(0.95); }
-    .drink-icon {
-        width: 2rem;
-        height: 2rem;
-    }
-
-    .list-header {
-        display: flex;
-        justify-content: space-between;
-        align-items: center;
-        margin-bottom: 0.75rem;
-    }
-    .items-count {
-        font-size: 0.75rem;
-        font-weight: 900;
-        color: #6366f1;
-        text-transform: uppercase;
-    }
-
-    .drinks-list {
-        max-height: 250px;
-        overflow-y: auto;
-        display: flex;
-        flex-direction: column;
-        gap: 0.5rem;
-        padding-right: 0.5rem;
-    }
-    .list-empty {
-        text-align: center;
-        padding: 2rem 0;
-        color: #cbd5e1;
-        display: flex;
-        flex-direction: column;
-        align-items: center;
-        gap: 0.75rem;
-    }
-    :global(.theme-dark) .list-empty { color: #334155; }
-    .list-empty-icon {
-        width: 2.5rem;
-        height: 2.5rem;
-        opacity: 0.2;
-    }
-    .list-empty-text {
-        font-size: 0.875rem;
-        font-weight: 500;
-    }
 
-    .custom-scroll::-webkit-scrollbar { width: 4px; }
-    .custom-scroll::-webkit-scrollbar-track { background: transparent; }
-    .custom-scroll::-webkit-scrollbar-thumb {
-        background: #e2e8f0;
-        border-radius: 10px;
-    }
-
-    :global(.drink-list-row) {
-        display: flex;
-        align-items: center;
-        justify-content: space-between;
-        padding: 0.75rem;
-        background: #f8fafc;
-        border-radius: 0.75rem;
-        border: 1px solid #e2e8f0;
-    }
-    :global(.theme-dark) :global(.drink-list-row) {
-        background: #1e293b;
-        border-color: #334155;
-    }
-
-    :global(.drink-row-info) {
-        display: flex;
-        align-items: center;
-        gap: 0.75rem;
-    }
-
-    :global(.drink-row-name) {
-        font-weight: 700;
-        color: #334155;
-    }
-    :global(.theme-dark) :global(.drink-row-name) {
-        color: #e2e8f0;
-    }
-
-    :global(.drink-row-qty) {
-        font-size: 0.75rem;
-        background: #e0e7ff;
-        color: #4f46e5;
-        padding: 0.125rem 0.5rem;
-        border-radius: 0.25rem;
-        font-weight: 700;
-    }
-    :global(.theme-dark) :global(.drink-row-qty) {
-        background: #312e81;
-        color: #a5b4fc;
-    }
-
-    :global(.drink-row-del) {
-        display: flex;
-        align-items: center;
-        justify-content: center;
-        width: 2rem;
-        height: 2rem;
-        padding: 0;
-        background: none;
-        border: none;
-        color: #ef4444;
-        cursor: pointer;
-        transition: background 0.2s;
-    }
-    :global(.drink-row-del:hover) {
-        background: #fef2f2;
-        border-radius: 0.5rem;
-    }
-    :global(.theme-dark) :global(.drink-row-del:hover) {
-        background: rgba(239,68,68,0.1);
-    }
-
-    .alc-results-panel {
-        display: flex;
-        flex-direction: column;
-        background: #f8fafc;
-    }
-    :global(.theme-dark) .alc-results-panel { background: rgba(0,0,0,0.2); }
-
-    .bac-section {
-        background: #4f46e5;
-        color: #fff;
-        padding: 1.5rem;
-        position: relative;
-        overflow: hidden;
-        flex-shrink: 0;
-    }
-    :global(.theme-dark) .bac-section { background: #4338ca; }
-    .bac-bg-icon {
-        position: absolute;
-        top: 0;
-        right: 0;
-        padding: 1.5rem;
-        opacity: 0.1;
-    }
-    .bac-bg-icon-svg {
-        width: 5rem;
-        height: 5rem;
-        transform: rotate(12deg);
-    }
-    .bac-content {
-        position: relative;
-        z-index: 1;
-        display: flex;
-        flex-direction: column;
-        gap: 1rem;
-    }
-    .bac-label {
-        font-size: 0.75rem;
-        font-weight: 700;
-        text-transform: uppercase;
-        letter-spacing: 0.2em;
-        opacity: 0.6;
-    }
-    .bac-value-row {
-        display: flex;
-        align-items: baseline;
-        gap: 0.5rem;
-    }
-    .bac-number {
-        font-size: 3.5rem;
-        font-weight: 900;
-        letter-spacing: -0.05em;
-        line-height: 1;
-        font-variant-numeric: tabular-nums;
-    }
-    .bac-unit {
-        font-size: 1rem;
-        font-weight: 700;
-        opacity: 0.6;
-    }
-
-    .time-box {
-        display: flex;
-        align-items: center;
-        gap: 0.75rem;
-        background: rgba(255,255,255,0.1);
-        border-radius: 0.75rem;
-        padding: 0.75rem;
-        border: 1px solid rgba(255,255,255,0.1);
-    }
-    .time-icon {
-        width: 1.25rem;
-        height: 1.25rem;
-        flex-shrink: 0;
-    }
-    .time-text {
-        font-weight: 700;
-        font-size: 0.875rem;
-    }
-
-    .alc-advice-sec {
-        display: flex;
-        flex-direction: column;
-        gap: 1rem;
-    }
-    .advice-row {
-        display: flex;
-        align-items: center;
-        gap: 1rem;
-    }
-    .advice-icon {
-        width: 2.25rem;
-        height: 2.25rem;
-        border-radius: 0.6rem;
-        display: flex;
-        align-items: center;
-        justify-content: center;
-        flex-shrink: 0;
-    }
-    .advice-icon-blue {
-        background: #dbeafe;
-        color: #3b82f6;
-    }
-    :global(.theme-dark) .advice-icon-blue { background: rgba(59,130,246,0.2); }
-    .advice-icon-amber {
-        background: #fef3c7;
-        color: #f59e0b;
-    }
-    :global(.theme-dark) .advice-icon-amber { background: rgba(245,158,11,0.2); }
-    .advice-icon-svg {
-        width: 1.25rem;
-        height: 1.25rem;
-    }
-    .advice-label {
-        font-size: 0.75rem;
-        font-weight: 700;
-        color: #94a3b8;
-        text-transform: uppercase;
-        margin: 0 0 0.2rem;
-    }
-    .advice-value {
-        font-size: 1.125rem;
-        font-weight: 900;
-        margin: 0;
-    }
-    .advice-value-sm { font-size: 0.875rem; }
-
-    .alc-disclaimer-sec { margin-top: auto; }
-    .disclaimer {
-        background: #fffbeb;
-        border-radius: 0.75rem;
-        padding: 0.875rem;
-        display: flex;
-        gap: 0.75rem;
-        color: #92400e;
-        font-size: 0.75rem;
-        line-height: 1.6;
-        border: 1px solid #fde68a;
-    }
-    :global(.theme-dark) .disclaimer {
-        background: rgba(120,53,15,0.2);
-        border-color: rgba(120,53,15,0.5);
-        color: #f59e0b;
-    }
-    .disclaimer-icon {
-        width: 1.5rem;
-        height: 1.5rem;
-        flex-shrink: 0;
-    }
-    .disclaimer-text { margin: 0; }
-</style>